Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dezvoltarea aplicațiilor Webla nivel de client

arhitectura unui navigator Web

github.com/alrra/browser-logos

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

“To avoid criticismdo nothing, say nothing, be nothing.”

Elbert Hubbard

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

mediu de execuție(sistem de operare, aplicație nativă,…)

browser Web

funcționalități de bazăprocesare conținut, redare,…

interpretorJavaScript

acces la platformă

rețea, grafică, fonturi, widget-uri native,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Un client (i.e. browser Web) se identifică via valoarea

câmpului-antet User-Agent dintr-o cerere HTTP

www.useragentstring.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1993 – primul browser Web: Mosaic – Mosaic/0.9

1994 – primul browser comercial: Netscape Navigatorinclude 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)

www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1994 – primul browser disponibil pe un dispozitivminiaturizat (PDA – Apple Newton): PocketWeb

www.teco.edu/pocketweb/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1996 – primul navigator produs de Microsoft: MSIEinclude dialectul JScript și propriul BOM

oferă multe facilități, ulterior standardizate de W3CMozilla/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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1996 – primul navigator trialware: Opera 2focalizat 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]

dev.opera.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

1998 – apariția procesorului de redare (rendering engine) Gecko

Mozilla/Versiune (Platformă; Criptare; OS/CPU; Limbă;

VersiuneRevizie) Gecko/Versiune Produs/VersiuneMozilla/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

www.nczonline.net/blog/2010/01/12/history-of-the-user-agent-string/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fundația Mozilla – codul Netscape disponibil open source:Phoenix (2002)Firebird (2003)Firefox (2004)

axat asupra respectării standardelor Webinterfață 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, ReleaseMozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0)

Gecko/20100101 Firefox/62.0

developer.mozilla.org/Mozilla/Firefox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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/VersiuneMozilla/5.0 (Macintosh; U; PPC Mac OS X; en)

AppleWebKit/124 (KHTML, like Gecko) Safari/125.1

Mozilla/5.0 (iPad; CPU OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15

(KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1

developer.apple.com/safari/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2005 – Opera Mini oferă primele facilități de redare a datelor pe ecrane miniaturizate (small screen rendering)

procesare realizată la nivel de server via sisteme de stocare a datelor (data centers)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2008 – Google Chrome folosind WebKit; din 2013: Blinkbazat pe proiectul open source Chromium

focalizare asupra performanței la nivel de client Webinterfață minimalistă + manager de tab-uri

include instrumente avansate pentru dezvoltatoriMozilla/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

developer.chrome.com

www.chromium.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

2015 – Microsoft Edge folosind EdgeHTML(bazat pe Trident de la vechiul IE)

accent asupra suportului standardelor Webrulează exclusiv pe sistemele Windows

(se oferă mașini virtuale pentru testare pe alte platforme)Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,

like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

developer.microsoft.com/microsoft-edge/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Care este arhitectura generalăa unui navigator Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

user interface

browser engine

rendering engine

network

JSinter-preter

datapar-ser

display back-end

da

ta p

ersiste

nce

componentele de bază ale unui navigator Web genericconform (Grosskurth & Godfrey, 2006; Garsiel, 2011)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

cog

etp

ock

et.c

om

/a/r

ead

/173

5724

031

privire de ansamblu asupra proceselor majore efectuate

de browser-ul Web

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

rendering engine

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

user interface

diverse proprietăți și preferințe specifice

unui utilizator pot fi stocate în cadrul unui profil

exemplu tipic: Firefox – http://mzl.la/1BAQULj

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browser engine

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browser engine

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

nucleu (kernel)

plug-ins

extensions

add-ons

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

realizează redarea conținutului solicitat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

o aplicație Web la nivel de client poate fi compusă din diverse componente, încărcate dinamicmanagementul arborilor DOM

(Dimitri Glazkov, 2013)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

conform tipului de document Web – DTD

moduri diferite de interpretare

standards mode – HTML5, CSS3, SVG,…

quirks mode – www.quirksmode.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

pot fi folosite diverse euristici (speculative parsing),

mai ales în cazul codului care nu e bine formatat

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

include un interpretor (parser) HTML

pot fi folosite diverse euristici (speculative parsing),

mai ales în cazul codului care nu e bine formatat

cazul Edge – Modernizing the DOM tree in Microsoft Edge (2017)blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/

cazul Firefox – M. Mihajlija, Building the DOM faster:

speculative parsing, async, defer and preload (2017)hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

proce-sare cod

HTML

arboreDOM

generarearbore

de redare

determi-nare

layout

afișare(rendering)

layout

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

cod sursă HTML – încărcat (a)sincron de pe rețea

arbore DOM (Document Object Model)

de revăzut prelegerea privitoare la DOMprofs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week9

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fazele importante ale procesăriiunui document HTML

în vederea obținerii arborelui DOM

preluare date de pe rețea

procesare (tokeniser)

construire arbore

HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

execuție script-uri JS

document.write()

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

HTMLHtml

Element

HTMLBody

Element

HTMLParagraph

Element

Text

HTMLHead

Element

HTMLTitle

Element

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<p>Salut, lume!</p>

</body>

</html>

DOM Living Standard (21 septembrie 2018)dom.spec.whatwg.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

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

programele JavaScript vor trebui executate imediatce procesorul întâlnește codul

(eventual, extern – încărcat de pe alt sit, dacă e posibil)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

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

programele JavaScript vor trebui executate imediatce procesorul întâlnește codul

implicit, procesul de rendering e opritpână ce codul JavaScript este executat complet

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

pentru HTML5, script-urile JavaScript

pot fi executate asincron (într-un thread separat),

eventual după ce documentul a fost procesat

developer.mozilla.org/docs/Web/HTML/Element/script

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

deoarece – în mod normal – stilurile CSS

nu modifică arborele DOM, procesarea poate avea loc

independent de încărcarea fișierelor CSS

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

arbore DOM

arbore de redare (render tree)

getpocket.com/a/read/1735724031

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

relația dintre arborele DOM șiarborele de redare a conținutului (render tree)

conform Hyungwook Lee, 2014

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

alături de arborele de redare, se va genera și:

style tree

compus din RenderStyles

include valorile calculate ale proprietăților de stil

asociat arborelui obiectelor de redare (render object tree)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

alături de arborele de redare, se va genera și:

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

relațiile între obiecte de redare (render objects) și stratele asociate (render layers)

L. Weintraub, “How WebKit Renders the Web”, Fluent Conference, 2012

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

<p>Dezvoltare <strong>Web</strong>

la nivel de <em>client</em></p>

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)speakerdeck.com/ryanseddon/how-the-browser-actually-renders-a-website

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

arbore de redare (render tree)

generare a aranjamentului vizual (layout)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

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

se pot lua în considerație coordonatele ferestreinavigatorului + proprietățile mediului de redare:

rezoluție, orientare (portrait vs. landscape), suport pentru 3D etc.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) – recursivvs.

incremental

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

global layout (pentru întreg render tree) – recursivvs.

incremental

sincron vs. asincron

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

calcularea aranjamentului (layout)

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

vizualizarea datelor privind layout-ul calculat în Chrome

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

generare aranjament vizual (layout)

afișare layout

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

afișarea propriu-zisă (painting)

poate fi realizată la nivel de software

sau pe baza procesorului grafic (accelerată hardware)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

redarea conținutului grafic prin compunerea stratelorfolosind o tehnologie precum OpenGL

(Hyungwook Lee, 2014)www.slideshare.net/HyungwookLee/mobilebrowserinternal-20140122

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

corendering engine

exemplu real:

procesele de prelucrare grafică 2D

efectuate de componenta WebRender (Mozilla)

mozillagfx.wordpress.com/2017/09/21/introduction-to-webrender-part-1-browsers-today

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

după afișarea propriu-zisă,

pot apărea schimbări de redare

la nivel local/global

re-layout și/sau re-paint

detalii: developers.google.com/web/updates/2018/09/inside-browser-part4

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

corendering 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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fluxul de activități realizate de WebKitwww.webkit.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

navigatoarele Web moderne pot rula mai multe instanțe

ale procesorului responsabil cu redarea conținutului

pentru fiecare tab, câte un proces separat

cazul Google Chromewww.chromium.org/developers/design-documents/process-models

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Mariko Kosaka, Inside look at modern Web browser (2018)developers.google.com/web/updates/2018/09/inside-browser-part1

de la o arhitectură monolitică la una modulară

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Mariko Kosaka, Inside look at modern Web browser (2018)developers.google.com/web/updates/2018/09/inside-browser-part1

fiecare modul intern poate fi considerat ca fiind un serviciu (browser servicification)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura multiproces

la Chromium

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

rendering engine

procesarea conținutului se realizează

de un număr dat de procese – e.g., 4

suplimentar, se recurge la fire de execuție (thread-uri)

exemple:

Chromedevelopers.google.com/web/updates/2018/09/inside-browser-part3

Firefox Quantummedium.com/mozilla-tech/tagged/firefox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

procesul de redare include – Kosaka (2018): firul de execuție principal (main thread)

fire de execuție specifice worker-ilor JS (worker thread)firul de execuție al compunerii grafice (compositor thread)

firul de execuție al generării pixelilor de afișat (raster thread)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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),…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

cow

ww

.bo

nke

rsw

orl

d.n

et/b

est-

soci

al-n

etw

ork

-eve

r/

(în loc de) pauză

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

API independent de platformă

+

implementări specifice fiecărui sistem de operare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

API independent de platformă

+

implementări specifice fiecărui sistem de operare

exemplificare: Firefox utilizează modulul Necko

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

protocolul HTTP

standardizat în 1999: RFC 2616din iunie 2014, e definit de RFC 7230—7235

www.w3.org/Protocols/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

HTTPS – asigură comunicații „sigure” HTTPvia TLS (Transport Layer Security):

autentificare pe baza certificatelor digitale+ criptare bidirecțională

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

networking

responsabil cu transferurile de date de pe Internet

protocolul HTTP/2.0 – standardizat în 2015: RFC 7540

axat asupra performanței: mesaje binare, reutilizarea conexiunii TCP, multiplexare, compresia anteturilor –HPACK, trimiterea mesajelor spre client (server push)

http2.github.io

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 optimizarea încărcării resurselor

detalii într-un curs viitor

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

studiu de caz

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

display (UI) backend

responsabil cu afișarea componentelor de interfață

ferestre, bare de defilare a conținutului (scroll bars),

tipuri ale câmpurilor formularelor Web:

butoane de tip radio, textarea, liste de selecție, date,…

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

browsershots.org www.browserstack.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter

interpretează și execută programele JavaScript

la nivel de client

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fazele principale ale procesării și rulării codului JavaScript(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

Carakan (Opera)

Chakra (Microsoft)

Nashorn (Oracle)

Nitro (SquirrelFish), JavaScriptCore (Apple)

SpiderMonkey, IonMonkey, Rhino (Mozilla)

Tamarin (Adobe)

V8 (Google, Opera, Node.js)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

optimizări specifice – V8 (lansat pe 2 septembrie 2008):

oferă interpretarea + compilarea codului JS

Ignition – interpretor de nivel scăzut bazat pe regiștri

github.com/v8/v8/wiki/Ignition

TurboFan – compilator JIT oferind o paletă de optimizări

github.com/v8/v8/wiki/TurboFan

de consultat și v8.dev

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

JavaScript interpreter (engine)

diferențele de performanță pot fi măsuratevia teste specifice (benchmarking)

exemplificări: Benchmark.js, Kraken (Mozilla),

Octane (Google), SunSpider (Apple)combinarea mai multor teste de performanță: JetStream

browserbench.org arewefastyet.com

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

responsabil cu procesarea documentelor XML via DOM

implementarea minimală vizează DOM nivelul 2

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

XML parser

în unele cazuri, procesarea documentelor XML

poate implica validarea datelor via DTD,

dar nu folosind scheme XML

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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.

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

data persistence

modul responsabil cu stocarea datelor

pe calculatorul client

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

data persistence

cookie-uri

cache

localStorage (HTML5)

database (HTML5)

…

detalii la alt curs

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

fluxul de activități realizate de browser-ul Web(Hyungwook Lee, 2014)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Ce putem afirma despreparticularitățile navigatoarelor Web?

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura inițială a navigatorului Firefox

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

arhitectura Edge recurge la containere rulate cu privilegii reduse, în regim de sandbox (Cowan, 2017)

blogs.windows.com/msedgedev/2017/03/23/strengthening-microsoft-edge-sandbox/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remarcă

un navigator Web modern prezintăo arhitectură modulară

realizată pe baza unui nucleu (browser kernel)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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 (Media Types)

video/quicktime

application/x-shockwave-flash

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Plug-in

bazat pe API-ul oferit de browser,

folosind un SDK disponibil pe platforma-țintă

(recurgându-se la limbajele C ori C++)

actualmente, utilizarea plug-in-urilor e descurajată

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

coPlug-inalternativă: utilizarea bibliotecilor JavaScript

exemplificări notabile:pdf.js – redarea documentelor PDF

github.com/mozilla/pdf.js

Shumway – emularea mașinii virtuale Flash (redare SWF)mozilla.github.io/shumway/

Acorn Media Player, Flow Player, JW Player, Kaltura, MediaElement.js, Video.js – redare de conținut video

studiu comparativ: cloudinary.com/blog/html5_video_player

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

C/C++ alte limbaje

cod binar

compilator JIT (Just-In-Time) / AOT (Ahead-Of-Time)

JS/ES

webassembly.org

alte limbaje

wasmasm.js

platformă de execuție (run-time)navigator Web

emscripten

binaryen

Plug-inalternativă: WebAssembly

cod binar de nivel scăzut, similar limbajului de asamblare

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

implementare via tehnologii Web (HTML, CSS, JavaScript)

specificație în lucru (iulie 2017):

browserext.github.io/browserext/

în unele cazuri,

instalarea nu necesită restartarea browser-ului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

resurse pentru dezvoltatori:

Chrome – developer.chrome.com/extensions/

Firefox – developer.mozilla.org/Add-ons/WebExtensions

Edge – docs.microsoft.com/en-us/microsoft-edge/extensions

Opera – dev.opera.com/extensions/

Safari – developer.apple.com/safari/extensions/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Extensie

se poate distribui via un sit specific

(e.g., Chrome Web Store)

conform unui format standardizat

Packaged Web Apps (recomandare W3C, 2012)

www.w3.org/TR/widgets/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Widget

implementare pe baza standardelor Web: HTML, CSS, JS

eventual, se poate recurge la un API

recomandare W3C (2013)

www.w3.org/TR/widgets-apis/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

parte a unei aplicații Web ce încapsulează

o suită de funcții înrudite ce pot fi reutilizate

e.g., calendar, cititor de fluxuri de știri,

buton de partajare a URL-ului în altă aplicație

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

dezvoltare bazată pe o bibliotecă/framework JavaScript

soluții „tradiționale”: Dojo Toolkit, jQuery UI,…

una dintre alternativele moderne: React

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

cadrul general: Web Components

templates, decorators, custom elements,

shadow DOM, imports etc.

în lucru la Consorțiul Web (octombrie 2018)

github.com/w3c/webcomponents/

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web component

diverse implementări:

Polymer – www.polymer-project.org

X-Tag – x-tag.github.io

detalii + exemple practice:

www.webcomponents.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Web app

o aplicație Web instalabilă

care folosește API-urile oferite de browser

aplicații Windows universale dezvoltate în JavaScriptdocs.microsoft.com/en-us/windows/uwp/

aplicații Web mobile pentru dispozitive Amazon Firedeveloper.amazon.com/webapps

aplicații Web pentru platforma Tizen (mobile, wearable,

TV, IVI – In-Vehicle Infotainment): Web Device APIdeveloper.tizen.org/development/api-references/web-application

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Aspecte de interes privind navigatorul Web:

toleranța la defectesecuritatea

managementul memorieiperformanța (e.g., viteza de procesare)

interacțiunea cu utilizatorulconservarea resurselor (i.e. power consumption)

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Remarcă:în cadrul unui browser Web

pot fi utilizate procesoare de redare multiple

exemplificări:Avant Browser – bazat pe Gecko, Trident și Blink/WebKit

Lunascape – include Gecko, Trident și WebKitMaxthon – recurge la WebKit și Trident

Tungsten – folosește Blink și Trident

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web „speciale”

optimizate pentru dispozitive specifice (smart phone, tabletă, smart TV,…) și platformele aferente

sau pentru anumite sarcini – i.e. dezvoltare Web

pot oferi anumite facilități – e.g., content & ad blockers, sincronizare, interacțiuni naturale și/sau 3D, depanare,…

exemple: Firefox Focus, Firefox Quantum for Developers,Firefox Reality, Opera Touch, Samsung Internet,

UC Browser, Vewd

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web hibride

unele procese care trebuie realizate de browserpot fi executate la nivel de server – de pildă, în cloud

exemplu: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

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

unele activități se pot fi realiza în cloud(în cazul Amazon Silk, se utilizează EC2)

pentru diverse optimizări, recurge la tehnici de învățare automată

docs.aws.amazon.com/silk/latest/developerguide/introduction.html

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Navigatoare Web experimentale

Servo (Mozilla, Samsung et al. – demarat în 2014)

un nucleu de browser Web (engine) paralel prototip scris în Rust pentru arhitecturi pe 64 de bițiasigurarea securității, performanței & modularizării

servo.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Dacă un navigator Web nu are (încă) suport pentru

o anumită tehnologie, se pot adopta soluții alternative

polyfills

uzual, implementate via JavaScript

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Funcționalitățile browser-ului Web pot fi folosite și în lipsa interacțiunii cu utilizatorul (sans UI)

headless browser

scopuri principale: automatizare + testare

exemple: Chromium Embedded Framework, Erik, Splashgithub.com/dhamaniasad/HeadlessBrowsers

developer.mozilla.org/Firefox/Headless_mode

pentru aplicațiile Android, se recurge la clasa WebView(Kotlin, Java) încapsulând o parte dintre funcționalitățile

unui browser Webdeveloper.android.com/guide/webapps/webview

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

valoarea câmpului-antet User-Agent + alte caracteristici ale mediului de rulare a navigatorului Web

– e.g., rezoluția ecranului, platforma hardware/software, date despre font-uri și limbi, cookie-uri,

suportul pentru grafică 3D,… –pot conduce la identificarea utilizatorului/dispozitivului

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

P. Laperdrix, W. Rudametkin, B. Baudry, “Beauty and the Beast: Diverting Modern Web Browsers to Build Unique Browser

Fingerprints”, IEEE Symposium on Security and Privacy, 2016hal.inria.fr/hal-01285470/file/beauty-sp16.pdf

A. Vastel et al., “Privacy Implications of Browser Fingerprint Inconsistencies”, USENIX Security Symposium, 2018

www.usenix.org/system/files/conference/usenixsecurity18/sec18-vastel.pdf

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

impact asupra intimității (privacy) și anonimității

instrumente de testare și raportare:Am I Unique? – amiunique.org

Panopticlick – panopticlick.eff.org

UniqueMachine – uniquemachine.org+

bibliotecă dedicată: ClientJS – clientjs.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

Device fingerprinting

instrumente de asigurare a intimității (privacy tools)

extensii pentru browser-ul Web uBlock Origin, Ghostery, HTTPS Everywhere etc.

de considerat șiDuckDuckGo – the search engine that doesn’t track you

Tor Project – platformă peer-to-peer, oferind Tor Browser, Tails (The Amnesic Incognito Live System),

Orbot (Tor for Android) etc.www.torproject.org

Dr.

Sab

in B

ura

ga

profs.in

fo.uaic.ro/~busa

co

episodul viitor: (re)găsirea resurselor Web