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.

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
