![Page 1: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/1.jpg)
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
![Page 2: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/2.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
“To avoid criticismdo nothing, say nothing, be nothing.”
Elbert Hubbard
![Page 3: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/3.jpg)
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,…
![Page 4: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/4.jpg)
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
![Page 5: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/5.jpg)
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/
![Page 6: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/6.jpg)
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/
![Page 7: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/7.jpg)
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
![Page 8: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/8.jpg)
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
![Page 9: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/9.jpg)
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/
![Page 10: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/10.jpg)
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
![Page 11: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/11.jpg)
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
![Page 12: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/12.jpg)
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/
![Page 13: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/13.jpg)
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)
![Page 14: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/14.jpg)
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
![Page 15: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/15.jpg)
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/
![Page 16: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/16.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Care este arhitectura generalăa unui navigator Web?
![Page 17: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/17.jpg)
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)
![Page 18: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/18.jpg)
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
![Page 19: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/19.jpg)
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
![Page 20: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/20.jpg)
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
…
![Page 21: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/21.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
![Page 22: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/22.jpg)
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
![Page 23: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/23.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
browser engine
„punte” între interfața cu utilizatorul și rendering engine
![Page 24: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/24.jpg)
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
![Page 25: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/25.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
rendering engine
realizează redarea conținutului solicitat
![Page 26: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/26.jpg)
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,…
![Page 27: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/27.jpg)
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
![Page 28: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/28.jpg)
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)
![Page 29: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/29.jpg)
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
![Page 30: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/30.jpg)
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
![Page 31: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/31.jpg)
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
![Page 32: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/32.jpg)
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/
![Page 33: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/33.jpg)
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
![Page 34: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/34.jpg)
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
![Page 35: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/35.jpg)
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()
![Page 36: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/36.jpg)
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
![Page 37: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/37.jpg)
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
![Page 38: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/38.jpg)
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)
![Page 39: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/39.jpg)
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
![Page 40: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/40.jpg)
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
![Page 41: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/41.jpg)
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
![Page 42: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/42.jpg)
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
![Page 43: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/43.jpg)
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
![Page 44: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/44.jpg)
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.
![Page 45: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/45.jpg)
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)
![Page 46: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/46.jpg)
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)
![Page 47: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/47.jpg)
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
![Page 48: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/48.jpg)
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
![Page 49: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/49.jpg)
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
![Page 50: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/50.jpg)
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)
![Page 51: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/51.jpg)
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
![Page 52: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/52.jpg)
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.
![Page 53: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/53.jpg)
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
![Page 54: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/54.jpg)
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
![Page 55: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/55.jpg)
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
![Page 56: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/56.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
vizualizarea datelor privind layout-ul calculat în Chrome
![Page 57: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/57.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
rendering engine
generare aranjament vizual (layout)
afișare layout
![Page 58: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/58.jpg)
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)
![Page 59: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/59.jpg)
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)
![Page 60: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/60.jpg)
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
![Page 61: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/61.jpg)
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
![Page 62: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/62.jpg)
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
![Page 63: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/63.jpg)
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
![Page 64: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/64.jpg)
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)
![Page 65: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/65.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
fluxul de activități realizate de Geckodeveloper.mozilla.org/Gecko
![Page 66: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/66.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
fluxul de activități realizate de WebKitwww.webkit.org
![Page 67: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/67.jpg)
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
![Page 68: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/68.jpg)
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ă
![Page 69: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/69.jpg)
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)
![Page 70: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/70.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
arhitectura multiproces
la Chromium
![Page 71: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/71.jpg)
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
![Page 72: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/72.jpg)
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)
![Page 73: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/73.jpg)
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),…
![Page 74: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/74.jpg)
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ă
![Page 75: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/75.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
networking
responsabil cu transferurile de date de pe Internet
![Page 76: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/76.jpg)
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
![Page 77: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/77.jpg)
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
![Page 78: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/78.jpg)
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
![Page 79: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/79.jpg)
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/
![Page 80: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/80.jpg)
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ă
![Page 81: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/81.jpg)
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
![Page 82: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/82.jpg)
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
![Page 83: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/83.jpg)
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
![Page 84: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/84.jpg)
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,…
![Page 85: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/85.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
browsershots.org www.browserstack.com
![Page 86: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/86.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
JavaScript interpreter
interpretează și execută programele JavaScript
la nivel de client
![Page 87: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/87.jpg)
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)
![Page 88: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/88.jpg)
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)
![Page 89: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/89.jpg)
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
![Page 90: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/90.jpg)
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
![Page 91: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/91.jpg)
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
![Page 92: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/92.jpg)
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
![Page 93: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/93.jpg)
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.
![Page 94: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/94.jpg)
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.
![Page 95: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/95.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
data persistence
modul responsabil cu stocarea datelor
pe calculatorul client
![Page 96: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/96.jpg)
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
![Page 97: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/97.jpg)
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)
![Page 98: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/98.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Ce putem afirma despreparticularitățile navigatoarelor Web?
![Page 99: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/99.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
arhitectura inițială a navigatorului Firefox
![Page 100: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/100.jpg)
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/
![Page 101: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/101.jpg)
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)
![Page 102: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/102.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
structura internă a navigatorului Chromium (H. Lee, 2014)
![Page 103: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/103.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
diagrama fluxului de date – cazul Chrome(Hauser et al., 2009)
![Page 104: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/104.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
arhitectura browser-ului Lynx (Grosskurth & Godfrey, ‘06)
![Page 105: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/105.jpg)
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)
![Page 106: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/106.jpg)
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
![Page 107: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/107.jpg)
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
![Page 108: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/108.jpg)
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ă
![Page 109: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/109.jpg)
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
![Page 110: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/110.jpg)
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
![Page 111: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/111.jpg)
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)
![Page 112: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/112.jpg)
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
![Page 113: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/113.jpg)
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/
![Page 114: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/114.jpg)
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/
![Page 115: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/115.jpg)
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)
![Page 116: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/116.jpg)
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/
![Page 117: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/117.jpg)
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
![Page 118: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/118.jpg)
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
![Page 119: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/119.jpg)
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
![Page 120: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/120.jpg)
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/
![Page 121: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/121.jpg)
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
![Page 122: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/122.jpg)
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
![Page 123: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/123.jpg)
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)
![Page 124: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/124.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
tehnologii Web implementate de un browser actual: platform.html5.org
![Page 125: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/125.jpg)
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
![Page 126: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/126.jpg)
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
![Page 127: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/127.jpg)
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
![Page 128: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/128.jpg)
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
![Page 129: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/129.jpg)
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
![Page 130: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/130.jpg)
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
![Page 131: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/131.jpg)
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
![Page 132: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/132.jpg)
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
![Page 133: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/133.jpg)
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
![Page 134: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/134.jpg)
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
![Page 135: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/135.jpg)
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
![Page 136: la nivel de client co - profs.info.uaic.robusaco/teach/courses/cliw/... · ga .ro / ~ co 2008 –Google Chrome folosind WebKit; din 2013: Blink bazat pe proiectul open source Chromium](https://reader031.vdocuments.us/reader031/viewer/2022022112/5c65d71c09d3f2e4308b5078/html5/thumbnails/136.jpg)
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
episodul viitor: (re)găsirea resurselor Web