arhitectura browser-ului web
DESCRIPTION
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.TRANSCRIPT
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