Arhitectura browser-ului Web

1,698 views

Published on

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.

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
1,698
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
14
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Arhitectura browser-ului Web

  1. 1. Arhitecturabrowser-ului Web Dr. Sabin Buraga Facultatea de Informatică, UAIC Iași www.purl.org/net/busaco
  2. 2. Firefox Chrome MSIE OperaDe ce ar trebui să știmcare-i arhitectura generalăa unui navigator Web?
  3. 3. user interface data persistence browser engine rendering enginenet JS XML inter- display backendwork preter parser
  4. 4. user interface address bar back/forward button bookmarking menu …
  5. 5. browser engine “punte” între interfața cu utilizatorul (UI) și rendering engine
  6. 6. browser engine “punte” între interfața cu utilizatorul (UI) și rendering engine kernel plugins extensions add-ons
  7. 7. rendering engine realizează redarea conținutului (e.g., documente HTML)
  8. 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. 9. rendering engine include un interpretor (parser) conform tipului de document Web – DTD HTML 4 XHTML HTML 5 www.quirksmode.org
  10. 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. 11. rendering engine arbore DOM  arbore de redare (render tree)
  12. 12. rendering engine arbore de redare  generare aranjament vizual (layout)
  13. 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. 14. rendering engine generare layout  afișare layout (painting)
  15. 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. 16. rendering engine exemplificări: Gecko (Firefox) Presto (Opera) Trident (MSIE) WebKit (Chrome, Safari, iOS) Gecko WebKit Trident Presto
  17. 17. fluxul de activități realizate de Gecko https://developer.mozilla.org/en/Gecko
  18. 18. activitățile derulate în cazul WebKit www.webkit.org
  19. 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. 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. 21. rendering engine  implicit, procesul de rendering e oprit până ce codul JavaScript este executat complet
  22. 22. rendering engine  procesul de rendering poate fi optimizat (speculative parsing) încărcare paralelă a resurselor multi-procesare …
  23. 23. networking folosit pentru transferuri de date de pe Internet HTTP HTTPS SPDY
  24. 24. networking folosit pentru transferuri de date de pe Internet numărul conexiunilor paralele e limitat (uzual: 2—6)
  25. 25. display (UI) backend răspunzător cu afișarea componentelor de interfață comune (ferestre, butoane de tip radio,…)
  26. 26. JavaScript interpreter interpretează și execută programele JavaScript la nivel de clientCarakan (Opera)Chakra (Microsoft)Nitro, JavaScriptCore (Apple)SpiderMonkey, IonMonkey, Rhino (Mozilla)V8 (Google)
  27. 27. data persistence responsabil cu stocarea datelor pe calculatorul client
  28. 28. data persistence responsabil cu stocarea datelor pe calculatorul client cookie-uri localStorage – HTML5 cache …
  29. 29. Arhitecturabrowser-ului Web 

×