Arhitectura browser-ului Web

Dr. Sabin Buraga

Facultatea de Informatică, UAIC Iași www.purl.org/net/busaco

De ce ar trebui să știm care-i arhitectura generală a unui navigator Web?

Firefox Chrome

MSIE Opera

user interface

browser engine

rendering engine

net work

JS inter-preter

XML parser

display backend

da

ta p

ersiste

nce

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

HTML Html

Element

HTML Body

Element

HTML Paragraph

Element

Text

HTML Head

Element

HTML Title

Element

www.w3.org/DOM/

cod sursă HTML

arbore 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

Gecko WebKit

Trident Presto

exemplificări:

Gecko (Firefox)

Presto (Opera)

Trident (MSIE)

WebKit (Chrome, Safari, iOS)

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 client

Carakan (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

…

Arhitectura browser-ului Web