• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Arhitectura browser-ului Web
 

Arhitectura browser-ului Web

on

  • 1,677 views

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.

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.

Statistics

Views

Total Views
1,677
Views on SlideShare
1,675
Embed Views
2

Actions

Likes
2
Downloads
13
Comments
1

2 Embeds 2

http://us-w1.rockmelt.com 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Arhitectura browser-ului Web Arhitectura browser-ului Web Presentation Transcript

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