Architecture of the Web browser

Dr. Sabin Buraga

Faculty of Computer Science, UAIC, Romania www.purl.org/net/busaco

Why we should know the general architecture of a Web browser?

Firefox Chrome

MSIE Opera

user interface

browser engine

rendering engine

net work

JS inter-preter

XML parser

display backend

da

ta p

ersiste

nce

www.html5rocks.com/en/tutorials/internals/howbrowserswork/

user interface

address bar

back/forward button

bookmarking menu

…

browser engine

“bridge” between user interface (UI)

and rendering engine

browser engine

“bridge” between user interface (UI)

and rendering engine

kernel

plug-ins

extensions

add-ons

rendering engine

able to render the content available

of the Web – representations of resources

(e.g., HTML documents)

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

rendering engine

includes an interpreter (parser)

depending on the Web document type – DTD

HTML 4

XHTML

HTML 5

www.quirksmode.org

rendering engine

HTML Html

Element

HTML Body

Element

HTML Paragraph

Element

Text

HTML Head

Element

HTML Title

Element

www.w3.org/DOM/

HTML source (stored in a text file – on server)

DOM tree (in RAM, on client side)

rendering engine

DOM tree

render tree

rendering engine

render tree

visual representation – layout

rendering engine

render tree

visual representation – layout

computing the width of each content block

(width calculation)

decisions regarding line breaking

…and others

rendering engine

layout

painting

rendering engine

layout

painting

after painting,

rendering changes could (locally or globally) occur

re-layout and/or re-paint

rendering engine

Gecko WebKit

Trident Presto

examples:

Gecko (Firefox)

Presto (Opera)

Trident (MSIE)

WebKit (Chrome, Safari, iOS)

rendering workflow – the Gecko use-case

https://developer.mozilla.org/en/Gecko

rendering workflow – WebKit

www.webkit.org

rendering engine

because – usually – CSS styles

do not modify the DOM tree, the rendering process

is not dependent by the loading of CSS files

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)

rendering engine

implicitly, the rendering process is stopped

until the JavaScript code is entirely executed

rendering engine

the rendering process could be optimized

speculative parsing

parallel loading of resources

multi-processing

…

networking

used to access & transfer data

(representations of resources)

available on the Internet

HTTP

HTTPS

SPDY

networking

used to access & transfer data

(representations of resources)

available on the Internet

limited number of parallel connections

(usually, 2—6)

display (UI) backend

able to display common UI components

(windows, radio buttons,text controls,…)

browsershots.org/

JavaScript interpreter

interpreting & executing

JavaScript programs

on the client side

Carakan (Opera)

Chakra (Microsoft)

Nitro, JavaScriptCore (Apple)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

V8 (Google)

data persistence

storing data on the client machine

data persistence

storing data on the client machine

cookies

localStorage – HTML5

cache

…

Architecture of the Web browser