Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Dezvoltarea sistemelor Web
🌐arhitectura unui browser Web
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/
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 4 săptămâni – inițial, 6:
Nightly, Aurora, Beta, ReleaseMozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0)
Gecko/20100101 Firefox/70.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; în tranziție spre Blink)
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/70.0.3538.102 Safari/537.36 Edge/18.18362
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
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 Firefoxdeveloper.mozilla.org/en-US/docs/Mozilla/Gecko/HTML_parser_threading
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)
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 (6 decembrie 2019)dom.spec.whatwg.org
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>
cu <em>JavaScript</em></p>
RenderBlock (p)
RenderText ('Dezvoltare')
RenderInline (strong)
RenderText ('Web')
RenderText ('cu')
RenderInline (em)
RenderText ('JavaScript')
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
co
rendering engine
exemplificări notabile:
EdgeHTML (Microsoft: Edge – până în 2019)
Gecko (Firefox, Thunderbird, GNU IceCat, Waterfox)
Goanna (fork Gecko inclus în Pale Moon și Basilisk)
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,
Microsoft Edge – din 2019)
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
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
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
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 Chrome, Opera, Microsoft Edge, 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
începând cu august 2019, V8 6.9 are suport și pentru procesarea codului WebAssembly (WASM) – Liftoff
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)
…
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 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 PDFgithub.com/mozilla/pdf.js
Afterglow, 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
Plug-inalternativă: WebAssembly
cod binar de nivel scăzut, similar limbajului de asamblare
axat asupra performanței
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)
se poate distribui via un sit specific
(e.g., Chrome Web Store)
specificație în lucru (iulie 2017):
browserext.github.io/browserext/
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
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)
implementare pe baza standardelor Web: HTML, CSS, JS
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,…
alternative moderne: Angular, React, Svelte, Slim.js
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 etc.
în lucru la Consorțiul Web (octombrie 2019)
github.com/w3c/webcomponents/
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Web component
suport pentru implementare oferit de framework-uri:
Polymer – www.polymer-project.org
X-Tag – x-tag.github.io
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
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 (PC, XBox One, HoloLens)
dezvoltate în JavaScriptdocs.microsoft.com/en-us/windows/uwp/
aplicații Web mobile pentru dispozitive Amazon Firedeveloper.amazon.com/apps-and-games/
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: Brave, Firefox Focus, Firefox Developer Edition,Firefox Reality, Opera Touch, Samsung Internet Browser,
UC Browser, Vewd Browser, Vivaldi, Waterfox
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
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
Încapsularea browser-ului Web în aplicații mobile
Android: clasa WebView (Kotlin, Java)developer.android.com/guide/webapps/webview
Apple (iOS, macOS, Mac Catalyst): clasa WKWebViewdeveloper.apple.com/documentation/webkit/wkwebview
www.hackingwithswift.com/articles/112/the-ultimate-guide-to-wkwebview
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, Privacy Badger etc.
de considerat șiDuckDuckGo – the search engine that doesn’t track you
Tor Project – platformă peer-to-peer, oferind Tor Browser (bazat pe Gecko), Tails (The Amnesic Incognito Live System)
www.torproject.org
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
rezumat
🌐arhitectura unui browser Webcomponente principale + cazuri concrete
Dr.
Sab
in B
ura
ga
profs.in
fo.uaic.ro/~busa
co
episodul viitor: securitatea sistemelor Web