Architecture of the Web browser
30 likes20,120 views
The document outlines the architecture of web browsers, highlighting key components such as the user interface, browser engine, and rendering engine. It explains how content is processed and displayed, including the role of the Document Object Model (DOM) and the execution of JavaScript. Additionally, it covers networking aspects and data persistence mechanisms within browsers.
Architecture of the Web browser
- 1. Architecture of the Web browser Dr. Sabin Buraga Faculty of Computer Science, UAIC, Romania www.purl.org/net/busaco
- 2. Firefox Chrome MSIE Opera Why we should know the general architecture of a Web browser?
- 3. user interface data persistence browser engine rendering engine net JS XML inter- display backend work preter parser www.html5rocks.com/en/tutorials/internals/howbrowserswork/
- 4. user interface address bar back/forward button bookmarking menu …
- 5. browser engine “bridge” between user interface (UI) and rendering engine
- 6. browser engine “bridge” between user interface (UI) and rendering engine kernel plug-ins extensions add-ons
- 7. rendering engine able to render the content available of the Web – representations of resources (e.g., HTML documents)
- 8. rendering engine able to render the content available of the Web – representations of resources (e.g., HTML documents) processing the DOM tree corresponding to a Web page by applying the CSS style properties in order to render information within a display area – viewport
- 9. rendering engine includes an interpreter (parser) depending on the Web document type – DTD HTML 4 XHTML HTML 5 www.quirksmode.org
- 10. rendering engine HTML source HTML (stored in a text file – on server) Html Element DOM tree HTML HTML (in RAM, on client side) Body Head Element Element HTML HTML Paragraph Title Element Element Text www.w3.org/DOM/
- 11. rendering engine DOM tree render tree
- 12. rendering engine render tree visual representation – layout
- 13. rendering engine render tree visual representation – layout computing the width of each content block (width calculation) decisions regarding line breaking …and others
- 14. rendering engine layout painting
- 15. rendering engine layout painting after painting, rendering changes could (locally or globally) occur re-layout and/or re-paint
- 16. rendering engine examples: Gecko (Firefox) Presto (Opera) Trident (MSIE) WebKit (Chrome, Safari, iOS) Gecko WebKit Trident Presto
- 17. rendering workflow – the Gecko use-case https://developer.mozilla.org/en/Gecko
- 18. rendering workflow – WebKit www.webkit.org
- 19. rendering engine because – usually – CSS styles do not modify the DOM tree, the rendering process is not dependent by the loading of CSS files
- 20. rendering engine the processing is made in a synchronous manner JavaScript programs must be executed immediately when the engine spots the JS source-code (eventually, loaded from an external URL)
- 21. rendering engine implicitly, the rendering process is stopped until the JavaScript code is entirely executed
- 22. rendering engine the rendering process could be optimized speculative parsing parallel loading of resources multi-processing …
- 23. networking used to access & transfer data (representations of resources) available on the Internet HTTP HTTPS SPDY
- 24. networking used to access & transfer data (representations of resources) available on the Internet limited number of parallel connections (usually, 2—6)
- 25. display (UI) backend able to display common UI components (windows, radio buttons,text controls,…) browsershots.org/
- 26. JavaScript interpreter interpreting & executing JavaScript programs on the client side Carakan (Opera) Chakra (Microsoft) Nitro, JavaScriptCore (Apple) SpiderMonkey, IonMonkey, Rhino (Mozilla) V8 (Google)
- 27. data persistence storing data on the client machine
- 28. data persistence storing data on the client machine cookies localStorage – HTML5 cache …
- 30. Architecture of the Web browser