CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
☸
arhitectura unui navigator Web

“To avoid criticism
do nothing, say nothing, be nothing.”
Elbert Hubbard

mediu de execuție
browser Web
funcționalități de bază
(application logic)
interpretor
JavaScript
acces la
platformă

mediu de execuție
(sistem de operare, aplicație nativă,…)
browser Web
funcționalități de bază
procesare conținut, redare,…
interpretor
JavaScript
acces la
platformă
rețea, grafică, fonturi,
widget-uri native,…

Un client (i.e. browser Web) se identifică via valoarea
câmpului-antet User-Agent dintr-o cerere HTTP
www.useragentstring.com

1993 – primul browser Web: Mosaic – Mosaic/0.9
1994 – primul browser comercial: Netscape Navigator
include primul interpretor JavaScript și oferă o interfață
de programare (BOM – Browser Object Model)
Mozilla/Versiune [Limbă] (Platformă; Criptare)
Mozilla/2.02 [fr] (WinNT; I)
Mozilla/Versiune (Platformă; Criptare [; descriere OS])
Mozilla/3.0 (X11; I; AIX 2)
Netscape Communicator 4 – Mozilla/4.04 [en] (WinNT; U)
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

1994 – primul browser disponibil pe un dispozitiv
miniaturizat (PDA – Apple Newton): PocketWeb
http://www.teco.edu/pocketweb/

1996 – primul navigator produs de Microsoft: MSIE
include dialectul JScript și propriul BOM
oferă multe facilități, ulterior standardizate de W3C
Mozilla/2.0 (compatible; MSIE Versiune; Sistem de operare)
Mozilla/2.0 (compatible; MSIE 3.02; Windows 95)
MSIE 4—7 – Mozilla/4.0 (compatible; MSIE 4.5; Mac_PowerPC)
MSIE 8 – Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
MSIE 11 – Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko
www.modern.ie

1996 – primul navigator trialware: Opera 2
focalizat pe utilizabilitate (e.g., tab-uri)
și accesibilitate (de exemplu, interacțiune prin gesturi)
permite selectarea modului de identificare a browser-ului
Opera/Versiune (OS; Criptare) [Limbă]
Opera/7.54 (Windows NT 5.1; U) [en]
http://dev.opera.com/

1998 – apariția procesorului de redare
(rendering engine) Gecko
Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;
VersiuneRevizie) Gecko/Versiune Produs/Versiune
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1b2)
Gecko/20060823 SeaMonkey/1.1a
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.11)
Gecko/20071127 Firefox/2.0.0.11
http://www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

1997—1999 – navigator Web pentru telefoane mobile:
HitchHiker (ulterior, Microsoft Mobile Explorer 2.0)
acces via WAP (Wireless Access Protocol)
conținut structurat cu WML (Wireless Markup Language)
procesare de date + interacțiune prin WMLScript

fundația Mozilla – codul Netscape disponibil open source:
Phoenix (2002)Firebird (2003)Firefox (2004)
focalizare asupra respectării standardelor Web
interfață via XUL (Extensible User-interface Language)
extensibil via add-ons (extensii, teme vizuale etc.)
ciclu de dezvoltare de 6 săptămâni:
Nightly, Aurora, Beta, Release
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:41.0) Gecko/20100101 Firefox/41.0
https://developer.mozilla.org/Mozilla/Firefox

2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)
accent pus pe inovare (<canvas>, CSS,…) + performanță
Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă)
AppleWebKit/Versiune (KHTML, like Gecko) Safari/Versiune
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
Mozilla/5.0 (iPad; CPU OS 8_4_1 like Mac OS X) AppleWebKit/600.1.4
(KHTML, like Gecko) Version/8.0 Mobile/12H321 Safari/600.1.4
https://developer.apple.com/devcenter/safari/

2005 – Opera Mini oferă primele facilități de redare
a datelor pe ecrane miniaturizate (small screen rendering)
procesare realizată la nivel de server via data centers

2008 – Google Chrome folosind WebKit; din 2013: Blink
bazat pe proiectul open source Chromium
focalizare asupra performanței la nivel de client Web
interfață minimalistă + manager de tab-uri
include instrumente avansate pentru dezvoltatori
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13
(KHTML, like Gecko) Chrome/0.2.149.29 Safari/525.13
Mozilla/5.0 (Linux; Android 5.0.2;…) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/44.0.2403.117 Safari/537.36 GSA/5.2.33.19.arm
https://developers.google.com/chrome/
www.chromium.org

2015 – Microsoft Edge folosind EdgeHTML
(bazat pe Trident de la vechiul IE)
accent asupra suportului standardelor Web
și interoperabilității
rulează exclusiv pe sistemele Windows
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240
https://dev.modern.ie/platform/status/

Care este arhitectura generală
a unui navigator Web?

user interface
browser engine
rendering engine
net
work
JS
inter-
preter
XML
par-
ser
display back-end
datapersistence
componentele de bază ale unui navigator Web generic
conform (Grosskurth & Godfrey, 2006; Garsiel, 2011)

procesele implicate în afișarea conținutului unei pagini Web
(J. Brereton et al., 2011)
rendering engine

user interface
bara de introducere a URI-urilor (address bar)
căutare pe Web
instrumente facilitând navigarea (back/forward button)
meniu de salvare a adreselor Web favorite (bookmarks)
acces la preferințe + alte componente – e.g., extensii
…

user interface
diverse proprietăți & setări ale browser-ului specifice
unui utilizator pot fi stocate în cadrul unui profil
exemplu tipic: Firefox – http://mzl.la/NYhKHH
https://developer.mozilla.org/Profile_Manager

browser engine
„punte” între interfața cu utilizatorul și rendering engine

browser engine
„punte” între interfața cu utilizatorul și rendering engine
nucleu (kernel)
plug-ins
extensions
add-ons

rendering engine
realizează redarea conținutului solicitat

rendering engine
realizează redarea conținutului solicitat
documente HTML ce includ resurse multimedia
imagini raster (GIF, PNG, JPEG)
grafică vectorială SVG (Scalable Vector Graphics)
reprezentări diverse: MathML, WebGL,…

rendering engine
implică, uzual, procesarea arborelui DOM
asociat unei pagini Web
cu aplicarea proprietăților CSS aferente
în vederea redării într-o zonă de afișare

o aplicație Web la nivel de client poate fi compusă din diverse
componente, încărcate dinamicmanagementul arborilor DOM
(Dimitri Glazkov, 2013)

rendering engine
include un interpretor (parser) HTML
conform tipului de document Web – DTD

rendering engine
conform tipului de document Web – DTD
moduri diferite de interpretare
standards mode – HTML5, CSS3, SVG,…
quirks mode – www.quirksmode.org

rendering engine
pot fi folosite diverse euristici (speculative parsing),
mai ales în cazul codului care nu e bine formatat

proce-
sare cod
HTML

arbore
DOM
generare
arbore
de
redare
determi-
nare
layout
afișare
(rendering)
layout

rendering engine
cod sursă HTML – încărcat (a)sincron de pe rețea

arbore DOM

fazele importante ale procesării unui document HTML
în vederea obținerii arborelui DOM

HTML
Html
Element
HTML
Body
Element
HTML
Paragraph
Element
Text
HTML
Head
Element
HTML
Title
Element
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Salut, lume!
</body>
</html>
www.w3.org/DOM/
http://dom.spec.whatwg.org/

rendering engine
în mod tradițional,
modelul de procesare este sincron, single-threaded

rendering engine
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
(eventual, extern – încărcat de pe alt sit, dacă e posibil)

rendering engine
programele JavaScript vor trebui executate imediat
ce procesorul întâlnește codul
implicit, procesul de rendering e oprit
până ce codul JavaScript este executat complet

rendering engine
pentru HTML5, script-urile JavaScript
pot fi executate asincron (într-un thread separat),
eventual după ce documentul a fost procesat
https://developer.mozilla.org/docs/Web/HTML/Element/script

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
arbore DOM

arbore de redare (render tree)

relația dintre arborele DOM și
arborele de redare a conținutului (render tree)
conform Hyungwook Lee, 2014

rendering engine
alături de arborele de redare, se va genera și:
render object tree
responsabil cu aranjamentul (layout) & afișarea (paint)
specific conținutului efectiv redat
compus din obiecte de redare (RenderObjects):
RenderBlock, RenderText, RenderInline etc.

rendering engine
style tree
compus din RenderStyles
include valorile calculate ale proprietăților de stil
asociat arborelui obiectelor de redare (render object tree)

rendering engine
render layer tree
folosit pentru elementele ce includ conținuturi externe
(<video>, WebGL via <canvas>) ori manipulate prin CSS
(transformări, scalări, decupări,…)
stabilește coordonatele în spațiu și ordinea (z-index)

relațiile între obiecte de redare (render objects)
și stratele asociate (render layers)
L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012

rendering engine
în arborele de redare nu vor fi incluse
elementele non-vizuale (e.g., <head>, <script>, <title>)
sau nodurile ascunse via proprietatea CSS display: none

Dezvoltare Web
la nivel de client
RenderBlock (p)
RenderText ('Dezvoltare')
RenderInline (strong)
RenderText ('Web')
RenderText ('la nivel de')
RenderInline (em)
RenderText ('client')
RenderBlock (p)
RootLineBox (line 1)
InlineBox (text)
InlineBox (strong)
RootLineBox (line 2)
InlineBox (text)
InlineBox (em)
InlineBox (text)
„cutii” de redare a liniilor de conținut,
conform stilurilor de afișare specificate de CSS
adaptare după Ryan Seddon (2015)
https://speakerdeck.com/ryanseddon/how-the-browser-actually-renders-a-website

rendering engine
arbore de redare (render tree)

generare a aranjamentului vizual (layout)

rendering engine
calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului

rendering engine
calcularea aranjamentului (layout) e dependentă
de zona de afișare – uzual, un tab al navigatorului
se pot lua în considerație coordonatele ferestrei
navigatorului + proprietățile mediului de redare:
rezoluție, orientare (portrait vs. landscape),
suport pentru 3D etc.

rendering engine
calcularea aranjamentului (layout)
global layout (pentru întreg render tree) – recursiv
vs.
incremental

rendering engine
global layout (pentru întreg render tree) – recursiv
vs.
incremental
sincron vs. asincron

rendering engine
calculul lățimii fiecărui bloc de conținut (width calculation)
decizii privind line breaking
plasarea blocurilor flotante – e.g., cele având float: right
determinarea lățimii fiecărei coloane de tabel
…și multe altele

Firefox: vizualizarea datelor privind layout-ul calculat
detalii la https://developer.mozilla.org/docs/Tools

Firefox: vizualizarea 3D a arborelui DOM via arborele de redare
(proiectul Tilt realizat de absolventul FII Victor Porof – GSoC 2011)

rendering engine
generare aranjament vizual (layout)

afișare layout

redări diferite ale aceluiași document HTML
(dependența de platformă și/sau de navigator)

rendering engine
afișarea propriu-zisă (painting)
poate fi realizată la nivel de software
sau pe baza procesorului grafic (accelerată hardware)

redarea conținutului grafic prin compunerea stratelor
folosind o tehnologie precum OpenGL
(Hyungwook Lee, 2014)
http://www.slideshare.net/HyungwookLee/mobilebrowserinternal-20140122

rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare

rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare
la nivel local/global
re-layout și/sau re-paint

rendering engine
exemplificări notabile:
EdgeHTML (Microsoft: Edge)
Gecko (Firefox, SeaMonkey, Thunderbird)
Presto (Opera, Opera Mobile, Opera Mini, Nintendo)
Trident (Microsoft: IE, IE Mobile, Skype)
WebKit (Apple Safari, Chromium/Chrome, Adobe AIR +
multe platforme mobile: Android, Blackberry, iOS)
Blink (Google Chrome, Opera, Amazon Silk – din 2013)

fluxul de activități realizate de Gecko
developer.mozilla.org/Gecko

organizarea codului Gecko – diagramă simplificată
(Robert O’Callahan, 2013)

fluxul de activități realizate de WebKit
www.webkit.org

rendering engine
anumite browser-e pot rula mai multe instanțe
ale procesorului responsabil cu redarea conținutului
exemplu tipic: Google Chrome

procesele din cadrul Chrome (Levi Weintraub, 2012)

arhitectura
multiproces
la
Chromium

arhitectura multi-proces la Gecko (R. O’Callahan, 2013)
http://people.mozilla.org/~roc/Samsung/MozillaArchitectures.pdf
vezi proiectul Electrolysis – wiki.mozilla.org/Electrolysis

rendering engine
procesul de rendering poate fi optimizat
(speculative parsing)
strategii diverse:
încărcare paralelă a resurselor, multi-procesare,
încărcarea directă a arborelui de redare
(pre-procesat la nivel de server),…

networking
responsabil cu transferurile de date de pe Internet

networking
API independent de platformă
+
implementări specifice fiecărui sistem de operare

networking
API independent de platformă
+
implementări specifice fiecărui sistem de operare
exemplificare: Firefox utilizează modulul Necko

efectuarea unei cereri de rețea – cazul Chromium
detalii la www.chromium.org/developers/design-documents/network-stack

networking
protocolul HTTP
standardizat în 1999: RFC 2616
din iunie 2014, e definit de RFC 7230—7235
www.w3.org/Protocols/

networking
HTTPS – asigură comunicații „sigure” HTTP
via TLS (Transport Layer Security):
autentificare pe baza certificatelor digitale
+ criptare bidirecțională
www.slideshare.net/guypod/https-what-why-and-how-smashingconf-freiburg-sep-2015

extensia
HTTPS Everywhere
www.eff.org/https-everywhere

networking
folosit pentru transferuri de date de pe Internet
protocolul SPDY – un experiment Google (retras în 2016)
număr nelimitat de cereri concurente folosind aceeași
conexiune (eventual, via un sistem de priorități)
compresarea anteturilor mesajelor
fluxuri de date în regim push (notificări primite de client)

networking
folosit pentru transferuri de date de pe Internet
protocolul HTTP/2.0 – standardizat în 2015: RFC 7540
extinde ideile SPDY, focalizat asupra performanței
http://royal.pingdom.com/2015/06/11/http2-new-protocol/
http://http2.github.io/

a se studia și capitolul despre HTTP/2 din Ilya Grigorik,
High Performance Browser Networking (O’Reilly, 2014)
hpbn.co/http2

networking
observații:
numărul conexiunilor HTTP paralele realizate
cu un server sau proxy este limitat (uzual: 2—6)
unele navigatoare pot aplica tehnici de optimizare
a încărcării resurselor
detalii într-un
curs viitor

studiu de caz
Firefox: ajustarea parametrilor vizând conexiunile HTTP
via schema URI about:config

display (UI) backend
responsabil cu afișarea componentelor de interfață
ferestre, bare de defilare a conținutului (scroll bars),
tipuri de câmpurilor formularelor Web:
(butoane de tip radio, textarea, liste de selecție,…)

browsershots.org
www.browserstack.com

JavaScript interpreter
interpretează și execută programele JavaScript
la nivel de client

fazele principale ale procesării și rulării codului JavaScript

JavaScript interpreter (engine)
Carakan (Opera)
Chakra (Microsoft)
Nashorn (Oracle)
Nitro (SquirrelFish), JavaScriptCore (Apple)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
Tamarin (Adobe)
V8 (Google, Opera, Node.js)
Chrome include optimizări specifice precum TurboFan (2015)

diferențele de performanță pot fi măsurate
via teste specifice (benchmarking)
exemplificări:
Benchmark.js, Kraken (Mozilla),
Octane (Google), SunSpider (Apple)
combinarea mai multor teste de performanță: JetStream

diferențele de performanță pot fi măsurate
via teste specifice (benchmarking)
diverse statistici la http://arewefastyet.com/
un studiu: JavaScript Parse and Execution Time (2014)
http://timkadlec.com/2014/09/js-parse-and-execution-time/

XML parser
responsabil cu procesarea documentelor XML via DOM
implementarea minimală vizează DOM nivelul 2

XML parser
în unele cazuri, procesarea documentelor XML
poate implica validarea datelor via DTD,
dar nu folosind scheme XML

XML parser
uzual, se poate oferi suport pentru:
spații de nume XML
XPath 1.0 – în mod normal, XPath 2.0 nu-i acceptat
XSLT 1.0 – actualmente nu există suport pentru XSLT 2.0
transferuri asincrone de date via XMLHttpRequest
etc.

XML parser
unele navigatoare ofera facilități pentru alte limbaje XML
fluxuri de știri Atom și RSS (Really Simple Syndication)
MathML
SVG (Scalable Vector Graphics)
etc.

data persistence
modul responsabil cu stocarea datelor
pe calculatorul client

data persistence
cookie-uri
cache
localStorage (HTML5)
SQLite database (HTML5)
…
detalii la alt curs

fluxul de activități realizate de browser-ul Web

(în loc de) pauză

Ce putem afirma despre
particularitățile navigatoarelor Web?

arhitectura inițială a navigatorului Firefox

arhitectura Internet Explorer tradițional (conform MSDN)

arhitectura
multi-proces
la versiunile
moderne
de Internet
Explorer
(Loosely-
Coupled IE)

arhitectura conceptuală a browser-ului Chrome
(Tom Hauser et al., 2009; Ilya Grigorik, 2013)

structura internă a navigatorului Chromium (H. Lee, 2014)

diagrama fluxului de date – cazul Chrome
(Hauser et al., 2009)

arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)

Remarcă
un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)

Remarcă
un navigator Web modern prezintă
o arhitectură modulară
realizată pe baza unui nucleu (browser kernel)
de asemenea, poate permite
includerea de plug-in-uri și extensii

Plug-in
program extern responsabil cu procesarea & redarea
unor date ce nu pot fi prelucrate nativ
de către navigatorul Web
formatul de date este specificat via tipuri MIME
video/quicktime
application/x-shockwave-flash

Plug-in
se bazează pe API-ul oferit de browser
NPAPI (Mozilla), ActiveX (Microsoft), PPAPI (Google)
https://developer.mozilla.org/Gecko_Plugin_API_Reference
https://developers.google.com/native-client/
uzual, se folosește un SDK disponibil pe platforma-țintă
(recurgându-se la limbajele C ori C++)

Plug-in
actualmente, se descurajează utilizarea plug-in-urilor
alternative:
utilizarea bibliotecilor JavaScript

Plug-in
alternative:
utilizarea bibliotecilor JavaScript
exemplificări notabile:
pdf.js – redarea documentelor PDF
https://github.com/mozilla/pdf.js
Shumway – emularea mașinii virtuale Flash (redare SWF)
http://mozilla.github.io/shumway/
JwPlayer, Kaltura, Video.js – redare de conținut video
https://archive.fosdem.org/2015/schedule/event/open_video_players/

Extensie
extinde funcționalitățile navigatorului
poate afecta browser-ul în ansamblu
are acces, de obicei, la arborele DOM
(sau arborele de redare a conținutului)

Extensie
implementare via tehnologii Web (HTML, CSS, JavaScript)
în unele cazuri,
instalarea nu necesită restartarea browser-ului

Extensie
resurse pentru dezvoltatori:
Chrome – http://developer.chrome.com/extensions/
Firefox – https://wiki.mozilla.org/WebExtensions
MSIE – http://tinyurl.com/pnqepat
Opera – https://dev.opera.com/extensions/
Safari – https://developer.apple.com/programs/safari/

Extensie
eventual, pentru dezvoltare poate fi folosit un framework
exemple:
BabelExt – https://github.com/honestbleeps/BabelExt
Crossrider – http://crossrider.com/developers

Extensie
se poate distribui via un sit specific
(e.g., Chrome Web Store)
conform unui format standardizat
Packaged Web Apps (recomandare W3C, 2012)
http://www.w3.org/TR/widgets/

Widget
aplicație – de sine-stătătoare sau inclusă într-o pagină –
ce oferă o funcționalitate specifică
rulează la nivel de client (platformă oferită de
sistemul de operare și/sau navigator Web)

Widget
implementare pe baza standardelor Web: HTML, CSS, JS
eventual, se poate recurge la un API
recomandare W3C din octombrie 2013
www.w3.org/TR/widgets-apis/

Add-on
denumire generică a aplicațiilor asociate unui browser
(extensii, teme vizuale, dicționare,
maniere de căutare pe Web, plug-in-uri etc.)
exemplificare tipică: addons.mozilla.org

Web component
parte a unei aplicații Web
ce încapsulează o suită de funcții înrudite
e.g., calendar, cititor de fluxuri de știri,
buton de partajare a URL-ului în altă aplicație

Web component
dezvoltare bazată pe o bibliotecă/framework JavaScript
soluții „tradiționale”: Dojo Toolkit, jQuery UI,…
una dintre alternativele moderne: React

Web component
cadrul general: Web Components
(în lucru la Consorțiul Web din 2013)
templates, decorators, custom elements,
shadow DOM, imports etc.

Web component
implementări actuale:
Polymer – www.polymer-project.org
X-Tag – http://x-tags.org/
detalii + exemple practice:
http://webcomponents.org/
http://customelements.io/

Web app
o aplicație Web instalabilă
care folosește API-urile oferite de browser
exemplu tipic: Chrome Apps
https://developers.google.com/google-apps/
concept asemănător: pinned site (Internet Explorer)
http://msdn.microsoft.com/library/ie/gg491731%28v=vs.85%29.aspx

Web app
alte exemplificări:
aplicații Windows universale dezvoltate în JavaScript
https://dev.windows.com/en-us/develop/winjs
aplicații (mobile) pentru Firefox/Firefox OS
http://profs.info.uaic.ro/~busaco/teach/labs/firefoxos/
aplicații Web mobile pentru Amazon Fire și altele
developer.amazon.com/appsandservices/solutions/platforms/webapps
aplicații pentru Ubuntu folosind HTML5
https://developer.ubuntu.com/en/apps/html-5/

Aspecte de interes privind navigatorul Web:
toleranța la defecte
securitatea
managementul memoriei
performanța
interacțiunea cu utilizatorul

teste și comparații: www.browserscope.org

Remarcă:
în cadrul unui browser Web
pot fi utilizate procesoare de redare multiple
exemplificări:
Avant Browser – bazat pe Gecko, Trident și WebKit
Lunascape – include Gecko, Trident și WebKit
Maxthon – recurge la WebKit/Blink și Trident
Tungsten – folosește Blink și Trident

Navigatoare Web hibride
unele procese care trebuie realizate de browser
pot fi executate la nivel de server – de pildă, în cloud

Amazon Silk (bazat pe Chromium)
dacă procesul de rendering nu poate fi efectuat la distanță,
se realizează o procesare la nivel local – pe dispozitivul Kindle

unele activități se pot fi realiza în cloud
(în cazul Amazon Silk, se recurge la EC2)
Jon Jenkins, “Amazon Silk”, O’Reilly Velocity EU, 2011
pentru detalii, a se vizita http://amazonsilk.wordpress.com/

Navigatoare Web experimentale
Servo (Mozilla Research, Samsung et al., din 2014)
un nucleu de browser Web (engine) paralel
prototip scris în Rust pentru arhitecturi pe 64 de biți:
OS X, Linux, Android, Firefox OS
https://github.com/servo/servo
https://archive.fosdem.org/2015/schedule/event/servo_and_you/

Navigatoare Web experimentale
Zoomm (Qualcomm Research, 2013)
navigator paralel pentru dispozitive mobile multi-nucleu
http://www.tinmith.net/papers/cascaval-ppopp-2013.pdf

tehnologii Web implementate de un browser actual:
http://platform.html5.org/

Dacă un navigator Web nu are (încă) suport pentru
o anumită tehnologie, se pot adopta soluții alternative
polyfills
uzual, implementate via JavaScript

Dacă un navigator Web nu are (încă) suport pentru
o anumită tehnologie, se pot adopta soluții alternative
polyfills
exemplificare: HTML5 Cross Browser Polyfills
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

alternative la diverse facilități HTML5
http://html5please.com/

Există mai multe
interpretoare (parsers)
în cadrul unui
browser Web? De ce?
Care sunt mai ușor
de implementat:
extensiile sau
plug-in-urile?
întrebări (pentru acasă)

episodul viitor: elemente de design Web

CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to CLIW 2015-2016 (2/13) Arhitectura navigatorului Web

Similar to CLIW 2015-2016 (2/13) Arhitectura navigatorului Web (20)

More from Sabin Buraga

More from Sabin Buraga (20)

CLIW 2015-2016 (2/13) Arhitectura navigatorului Web