Webböngészők Történet (2) ● Böngészőháborúk – Lásd: https://en.wikipedia.org/wiki/Browser_wars Jeszenszky Péter Debreceni Egyetem, Informatikai Kar [email protected] Utolsó módosítás: 2021. szeptember 24. 3 Történet (1) Hogy működnek a böngészők? ● Az első böngésző: ● Ajánlott olvasnivaló: – WorldWideWeb (Tim Berners-Lee, 1990. – Tali Garsiel and Paul Irish. How Browsers Work: december 25.) Behind the scenes of modern web browsers. – Lásd: August 5, 2011. https://www.html5rocks.com/en/tutorials/internals/h ● Tim Berners-Lee. The WorldWideWeb browser. owbrowserswork/ https://www.w3.org/People/Berners-Lee/WorldWideWeb .html – Anton Paras. Notes on “How Browsers Work”. ● Jay Hoffmann. The Web’s First (And Second) Browser. December 11, 2017. September 25, 2017. https://codeburst.io/how-browsers-work-6350a423 https://thehistoryoftheweb.com/web-first-and-second-br 4634 owser/ 2 4 A böngészők komponensei: A böngészők felépítése felhasználó felület User Interface ● A felhasználói felülethez tartozik a címsor, a gombok (például, vissza, előre, frissítés), menük, stb. Browser Engine ● Beletartozik a böngésző minden látható része, Data annak a területnek a kivételével, ahol a Storage weboldal megjelenítésre kerül. Rendering Engine Networking JS Engine UI Backend 5 7 A böngészők komponensei: Böngészőmotor és renderelő motor böngészőmotor ● A böngészőmotor (browser engine), renderelő ● Egy magas szintű interfészt biztosít a motor (rendering engine) és layout engine renderelő motor manipulálásához. kifejezéseket gyakran egymás megfelelőiként ● Közvetítő szerepet tölt be a felhasználói felület használják, bár ez technikailag pontatlan. és a renderelő motor között. – A Gecko egy speciális eset, mivel egy ● böngészőmotorból és egy renderelő motorból áll. Kezeli az adattároló komponenst. 6 8 A böngészők komponensei: A böngészők komponensei: renderelő motor hálózati komponens (2) ● A böngészők egy kulcskomponense. ● További információk: ● Feladata webes tartalom (például egy HTML – WebSocket API: vagy XML dokumentum) vizuális ● HTML Living Standard – Web sockets https://html.spec.whatwg.org/multipage/web-sockets.ht reprezentációjának létrehozása egy kimeneti ml eszközön való megjelenítés céljából. – WebRTC: – A tartalom renderelése a meghatározott formázási ● https://webrtc.org/ szabályoknak megfelelően történik. ● WebRTC 1.0: Real-time Communication Between Browsers (W3C ajánlás, 2021. január 26.) https://www.w3.org/TR/webrtc/ 9 11 A böngészők komponensei: A böngészők komponensei: hálózati komponens (1) JavaScript-motor (1) ● A hálózati komponens felelős a hálózati ● Feladata JavaScript kód végrehajtása. kommunikáció kezeléséért, beleértve: – HTTP kérések és válaszok – WebSocket API – WebRTC ● Egy platformfüggetlen interfészt biztosít, mely mögött platform specifikus API-k kerülnek felhasználásra. 10 12 A böngészők komponensei: A böngészők komponensei: JavaScript-motor (2) adattároló (1) ● A fő JavaScript-motorok: ● Az adattároló felelős az adatok perzisztens – SpiderMonkey (programozási nyelv: C/C++; licenc: Mozilla tárolásáért, a következőkhöz használják: Public License 2.0) https://spidermonkey.dev/ – HTTP sütik ● A Mozilla projekt JavaScript motorja. – V8 (programozási nyelv: C++; licenc: New BSD License) – HTTP gyorsítótárazás https://v8.dev/ https://github.com/v8/v8/ – Indexed Database API (IndexedDB) ● A Chromium JavaScript motorja. – Web Storage API – JavaScriptCore (programozási nyelv: C++; licenc: LGPLv2) https://developer.apple.com/documentation/javascriptcore https://trac.webkit.org/wiki/JavaScriptCore ● Az Apple JavaScript motorja. 13 15 A böngészők komponensei: A böngészők komponensei: UI back-end adattároló (2) ● Az UI back-end felelős a böngészőben a ● További információk: rajzolásért. – HTTP sütik: ● Adam Barth, HTTP State Management Mechanism, RFC 6265, April 2011. ● Egyaránt használják a felhasználói felület https://www.rfc-editor.org/rfc/rfc6265 – HTTP gyorsítótárazás: elemek és a weboldal megjelenítéséhez. ● Roy T. Fielding (ed.), Mark Nottingham (ed.), Julian F. Reschke (ed.), Hypertext Transfer Protocol (HTTP/1.1): Caching, RFC 7234, June 2014. ● Egy platformfüggetlen interfészt biztosít, mely https://www.rfc-editor.org/rfc/rfc7234 mögött platform specifikus API-k kerülnek – Indexed Database API (IndexedDB): ● Indexed Database API 3.0 (W3C munkaterv, 2021. június 18.) felhasználásra. https://www.w3.org/TR/IndexedDB/ – Web Storage API: ● HTML Living Standard – Web storage https://html.spec.whatwg.org/#webstorage 14 16 A főbb renderelő motorok Renderelő motorok: Blink ● WebKit ● Webhely: https://www.chromium.org/blink ● Fejlesztő: Chromium Project (Google) ● Blink ● Licenc: Simplified BSD License/New BSD License/LGPLv2.1 ● Programozási nyelv: C++ ● Gecko ● A Blink eredetileg a WebKit WebCore komponensének forkjaként született. ● A Blink-en alapuló szoftverek: – Chromium https://www.chromium.org/Home – Google Chrome, Google Chrome for Android https://www.google.com/chrome/ – Chromium-alapú Microsoft Edge https://www.microsoftedgeinsider.com/ – Opera https://www.opera.com/ – Vivaldi https://vivaldi.com/ – … 17 19 Renderelő motorok: WebKit Renderelő motorok: Gecko ● Webhely: https://webkit.org/ ● Webhely: ? ● Fejlesztő: Apple ● Fejlesztő: Mozilla Project ● Licenc: LGPLv2/Simplified BSD License ● Licenc: Mozilla Public License 2.0 ● Programozási nyelv: C++ ● Programozási nyelvek: C, C++, JavaScript, Rust ● A WebKit-en alapuló szoftverek: ● A Gecko-n alapuló szoftverek: – Safari https://www.apple.com/safari/ – Firefox https://www.mozilla.org/firefox/ – Google Chrome for iOS https://www.google.com/chrome/ – Firefox for Android https://www.mozilla.org/firefox/browsers/mobile/ – Firefox for iOS https://www.mozilla.org/firefox/browsers/mobile/ – SeaMonkey https://www.seamonkey-project.org/ – GNOME Web https://wiki.gnome.org/Apps/Web – … – … 18 20 Böngészők piaci részesedése Böngészők összehasonlítása ● Minden platform: ● Can I use… – Compare browsers https://gs.statcounter.com/browser-market-sha https://caniuse.com/ciu/comparison re https://github.com/Fyrd/caniuse ● Asztali: ● https://en.wikipedia.org/wiki/Comparison_of_w https://gs.statcounter.com/browser-market-sha eb_browsers re/desktop ● Mobil: https://gs.statcounter.com/browser-market-sha re/mobile 21 23 Műszaki dokumentáció fejlesztők A főbb asztali böngészők számára ● Chromium, Google Chrome ● Chromium, Google Chrome: ● Firefox – For Developers https://www.chromium.org/developers ● Opera ● Firefox: ● Safari – https://developer.mozilla.org/en-US/docs/Mozilla/Fi ● Microsoft Edge refox – https://firefox-source-docs.mozilla.org/ ● Microsoft Edge: – https://docs.microsoft.com/en-us/microsoft-edge/# microsoft-edge-for-developers 22 24 A főbb asztali böngészők: A főbb asztali böngészők: Chromium Chromium és Google Chrome (1) ● Webhely: https://www.chromium.org/Home ● A Google Chrome a Chromiumon alapul. ● Fejlesztő: Chromium Project (Google) ● Licenc: New BSD License – Lásd: https://chromium.googlesource.com/chromium/src/+/master/LICENSE ● Programozási nyelvek: C, C++, JavaScript ● Platform: Linux, macOS, Windows ● Renderelő motor: Blink ● JavaScript motor: V8 ● Technikai információk: chrome://system 25 27 A főbb asztali böngészők: Google A főbb asztali böngészők: Chrome Chromium és Google Chrome (2) ● Webhely: https://www.google.com/chrome/ ● A két böngésző közötti különbségek: ● Fejlesztő: Google – Eltérő logók. – Eltérő audio és videó kódekekkel vannak felszerelve. ● Licenc: nem szabad (lásd: chrome://terms) – A felhasználói adatok tárolása különböző könyvtárakban. ● Programozási nyelvek: C, C++, JavaScript ● Chromium: ~/.cache/chromium, ~/.config/chromium ● Platform: Linux, macOS, Windows ● Google Chrome: ~/.cache/google-chrome, ~/.config/google- chrome ● Renderelő motor: Blink – A Chromium forráskódját módosíthatják az operációs rendszer ● JavaScript motor: V8 disztribúciók, a csomagolás is disztribúciófüggő. ● ● Technikai információk: chrome://system Lásd: The Difference between Google Chrome and Chromium on Linux ● Fejlesztői kiadás: https://www.google.com/intl/hu/chrome/dev/ https://chromium.googlesource.com/chromium/src/+/master/doc s/chromium_browser_vs_google_chrome.md 26 28 A főbb asztali böngészők: Firefox A főbb asztali böngészők: Safari ● Webhely: https://www.mozilla.org/firefox/ ● Webhely: https://www.apple.com/safari/ ● Fejlesztő: Mozilla Project ● Fejlesztő: Apple ● Licenc: Mozilla Public License 2.0 (lásd: about:license) ● Licenc: nem szabad ● Programozási nyelvek: C, C++, JavaScript, Rust ● Programozási nyelvek: C++, Objective-C ● Platform: Linux, macOS, Windows ● Platform: macOS ● Renderelő motor: Gecko ● Renderelő motor: WebKit ● JavaScript motor: SpiderMonkey ● ● Technikai információk: about:support JavaScript motor: JavaScriptCore ● Fejlesztői kiadás: Firefox Developer Edition ● Fejlesztői kiadás: Safari Technology Preview https://www.mozilla.org/firefox/developer/ https://developer.apple.com/safari/technology-preview/ 29 31 A főbb asztali böngészők: A főbb asztali böngészők: Opera Microsoft Edge (1) ● Webhely: https://www.opera.com/ ● Webhely: https://www.microsoft.com/edge ● Fejlesztő: Opera Software ● ● Licenc: nem szabad Fejlesztő: Microsoft – Lásd: https://www.opera.com/eula/computers ● Licenc: nem szabad (lásd: edge://terms) ● Programozási nyelv: C++ ● ● Platform: Linux, macOS, Windows Platform: Linux (2020–), macOS (2019–), ● Renderelő motor: Blink Windows ● JavaScript motor: V8 ● Renderelő motor: EdgeHTML (–2019), Blink ● Technikai információk: opera://system (2019–) ● Fejlesztői kiadás: Opera developer https://www.opera.com/computer/beta