Most important aspects regarding the internal architecture of a Web browser. A presentation prepared to be delivered within InfoEducatie 2012, a national IT contest for high-school students.

1. Arhitectura
browser-ului Web
Dr. Sabin Buraga
Facultatea de Informatică, UAIC Iași
www.purl.org/net/busaco

2. Firefox Chrome
MSIE Opera
De ce ar trebui să știm
care-i arhitectura generală
a unui navigator Web?

3. user interface
data persistence
browser engine
rendering engine
net JS XML
inter- display backend
work preter parser

4. user interface
address bar
back/forward button
bookmarking menu
…

5. browser engine
“punte” între interfața cu utilizatorul (UI)
și rendering engine

6. browser engine
“punte” între interfața cu utilizatorul (UI)
și rendering engine
kernel
plugins
extensions
add-ons

7. rendering engine
realizează redarea conținutului
(e.g., documente HTML)

8. rendering engine
realizează redarea conținutului
(e.g., documente HTML)
uzual:
procesarea arborelui DOM
asociat unei pagini Web
cu aplicarea proprietăților CSS aferente
în vederea redării într-o zonă de afișare

9. rendering engine
include un interpretor (parser)
conform tipului de document Web – DTD
HTML 4
XHTML
HTML 5
www.quirksmode.org

10. rendering engine
cod sursă HTML
HTML 
Html
Element
arbore DOM
HTML HTML
Body Head
Element Element
HTML HTML
Paragraph Title
Element Element
Text
www.w3.org/DOM/

11. rendering engine
arbore DOM

arbore de redare (render tree)

12. rendering engine
arbore de redare

generare aranjament vizual (layout)

13. rendering engine
arbore de redare

generare aranjament vizual (layout)
calculul lățimii fiecărui bloc de conținut
(width calculation)
decizii privind line breaking
…și altele

14. rendering engine
generare layout

afișare layout (painting)

15. rendering engine
generare layout

afișare layout (painting)
după afișare, pot apărea schimbări de redare

re-layout și/sau re-paint

16. rendering engine
exemplificări:
Gecko (Firefox)
Presto (Opera)
Trident (MSIE)
WebKit (Chrome, Safari, iOS)
Gecko WebKit
Trident Presto

17. fluxul de activități realizate de Gecko
https://developer.mozilla.org/en/Gecko

18. activitățile derulate în cazul WebKit
www.webkit.org

19. rendering engine

deoarece – în mod normal – stilurile CSS
nu modifică arborele DOM, procesarea poate avea loc
independent de încărcarea fișierelor CSS

20. rendering engine

deoarece modelul de procesare e sincron,
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
(eventual, încărcat de la o adresă Web externă)

21. rendering engine

implicit, procesul de rendering e oprit
până ce codul JavaScript este executat complet

22. rendering engine

procesul de rendering poate fi optimizat
(speculative parsing)
încărcare paralelă a resurselor
multi-procesare
…

23. networking
folosit pentru transferuri de date
de pe Internet
HTTP
HTTPS
SPDY

24. networking
folosit pentru transferuri de date
de pe Internet
numărul conexiunilor paralele e limitat
(uzual: 2—6)

25. display (UI) backend
răspunzător cu afișarea componentelor
de interfață comune
(ferestre, butoane de tip radio,…)

26. JavaScript interpreter
interpretează și execută
programele JavaScript
la nivel de client
Carakan (Opera)
Chakra (Microsoft)
Nitro, JavaScriptCore (Apple)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
V8 (Google)

27. data persistence
responsabil cu stocarea datelor
pe calculatorul client

28. data persistence
responsabil cu stocarea datelor
pe calculatorul client
cookie-uri
localStorage – HTML5
cache
…

30. Arhitectura
browser-ului Web
