STAW 05/12: Arhitectura navigatorului Web

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
arhitectura unui browser Web
github.com/alrra/browser-logos
Full-Stack Web Development
Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

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

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

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

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

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

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

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

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

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

fundația Mozilla – codul Netscape disponibil open source:
Phoenix (2002)Firebird (2003)Firefox (2004)
axat asupra respectării standardelor Web
interfață 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, Release
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0)
Gecko/20100101 Firefox/70.0
developer.mozilla.org/Mozilla/Firefox

2003 – Apple Safari cu WebKit bazat pe KHTML (KDE)
accent pus pe inovare (<canvas>, CSS,…) + performanță
Mozilla/5.0 (Platformă; Criptare; OS/CPU; Limbă)
AppleWebKit/Versiune (KHTML, like Gecko) Safari/Versiune
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)
AppleWebKit/124 (KHTML, like Gecko) Safari/125.1
Mozilla/5.0 (iPad; CPU OS 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/

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)

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

2015 – Microsoft Edge folosind EdgeHTML
(bazat pe Trident de la vechiul IE; în tranziție spre Blink)
accent asupra suportului standardelor Web
rulează 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/

Care este arhitectura generală
a unui navigator Web?

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

Dr.SabinBuragaprofs.info.uaic.ro/~busacogetpocket.com/a/read/1735724031
privire de ansamblu asupra
proceselor majore efectuate
de browser-ul Web

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

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

user interface
diverse proprietăți și preferințe specifice
unui utilizator pot fi stocate în cadrul unui profil
exemplu tipic: Firefox – http://mzl.la/1BAQULj

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

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

rendering engine
realizează redarea conținutului solicitat

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

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

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

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

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

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

rendering engine
pot fi folosite diverse euristici (speculative parsing),
mai ales în cazul codului care nu e bine formatat
cazul Firefox
developer.mozilla.org/en-US/docs/Mozilla/Gecko/HTML_parser_threading

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

rendering engine
cod sursă HTML – încărcat (a)sincron de pe rețea

arbore DOM (Document Object Model)
de revăzut prelegerea privitoare la DOM
profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html#week7

fazele importante ale procesării
unui document HTML
în vederea obținerii arborelui DOM
preluare date
de pe rețea
procesare (tokeniser)
construire arbore
HTML
Html
Element
HTML
Body
Element
HTML
Paragraph
Element
Text
HTML
Head
Element
HTML
Title
Element
execuție script-uri JS
document.write()

HTML
Html
Element
HTML
Body
Element
HTML
Paragraph
Element
Text
HTML
Head
Element
HTML
Title
Element
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
Salut, lume!
</body>
</html>
DOM Living Standard (24 septembrie 2019)
dom.spec.whatwg.org

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

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

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

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

rendering engine
deoarece – în mod normal – stilurile CSS
nu modifică arborele DOM, procesarea poate avea loc
independent de încărcarea fișierelor CSS

rendering engine
arbore DOM

arbore de redare (render tree)
getpocket.com/a/read/1735724031

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

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

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

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

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

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

Dezvoltare Web
cu JavaScript
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

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

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

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

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

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

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

vizualizarea datelor privind layout-ul calculat în Chrome

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

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

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

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

rendering 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

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

rendering engine
după afișarea propriu-zisă,
pot apărea schimbări de redare
la nivel local/global
re-layout și/sau re-paint
detalii: developers.google.com/web/updates/2018/09/inside-browser-part4

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)

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

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

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 Chrome
www.chromium.org/developers/design-documents/process-models

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ă

Mariko Kosaka, Inside look at modern Web browser (2018)
fiecare modul intern poate fi considerat ca fiind un serviciu
(browser servicification)

arhitectura
multiproces
la
Chromium

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:
Chrome
Firefox Quantum
medium.com/mozilla-tech/tagged/firefox

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)

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

Dr.SabinBuragaprofs.info.uaic.ro/~busacowww.bonkersworld.net/best-social-network-ever/
(în loc de) pauză

networking
responsabil cu transferurile de date de pe Internet

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

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

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

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

networking
HTTPS – asigură comunicații „sigure” HTTP
via TLS (Transport Layer Security):
autentificare pe baza certificatelor digitale
+ criptare bidirecțională

networking
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

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

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

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

browsershots.org  www.browserstack.com

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

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

JavaScript interpreter (engine)
Carakan (Opera)
Chakra (Microsoft)
Nashorn (Oracle)
Nitro (SquirrelFish), JavaScriptCore (Apple)
SpiderMonkey, IonMonkey, Rhino (Mozilla)
Tamarin (Adobe)
V8 (Google Chrome, Opera, Microsoft Edge, Node.js)

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

începând cu august 2019, V8 6.9 are suport și pentru
procesarea codului WebAssembly (WASM) – Liftoff

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

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

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

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

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

data persistence
modul responsabil cu stocarea datelor
pe calculatorul client

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

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

Ce putem afirma despre
particularitățile navigatoarelor Web?

arhitectura inițială a navigatorului Firefox

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

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

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

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

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

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

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

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ă

Plug-in
alternativă: utilizarea bibliotecilor JavaScript
exemplificări notabile:
pdf.js – redarea documentelor PDF
github.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

Plug-in
alternativă: WebAssembly
cod binar de nivel scăzut, similar limbajului de asamblare
axat asupra performanței
detalii în alt curs

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

Extensie
implementare via tehnologii Web (HTML, CSS, JavaScript)
se poate distribui via un sit specific
(e.g., Chrome Web Store)
specificație în lucru (iulie 2017):
browserext.github.io/browserext/

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/

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

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

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

Web component
dezvoltare bazată pe o bibliotecă/framework JavaScript
soluții „tradiționale”: Dojo Toolkit, jQuery UI,…
alternative moderne: Angular, React, Svelte, Slim.js

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/

Web component
suport pentru implementare oferit de framework-uri:
Polymer – www.polymer-project.org
X-Tag – x-tag.github.io

detalii + exemple practice: www.webcomponents.org

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 JavaScript
docs.microsoft.com/en-us/windows/uwp/
aplicații Web mobile pentru dispozitive Amazon Fire
developer.amazon.com/apps-and-games/
aplicații Web pentru platforma Tizen (mobile, wearable,
TV, IVI – In-Vehicle Infotainment): Web Device API
developer.tizen.org/development/api-references/web-application

Aspecte de interes privind navigatorul Web:
toleranța la defecte
securitatea
managementul memoriei
performanța (e.g., viteza de procesare)
interacțiunea cu utilizatorul
conservarea resurselor (i.e. power consumption)

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

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 WebKit
Maxthon – recurge la WebKit și Trident
Tungsten – folosește Blink și Trident

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

Navigatoare Web hibride
unele procese care trebuie realizate de browser
pot 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

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

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ți
asigurarea securității, performanței & modularizării
servo.org

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

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, Splash
github.com/dhamaniasad/HeadlessBrowsers
developer.mozilla.org/Firefox/Headless_mode

Î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 WKWebView
developer.apple.com/documentation/webkit/wkwebview
www.hackingwithswift.com/articles/112/the-ultimate-guide-to-wkwebview

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

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, 2016
hal.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

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

instrumente de asigurare a intimității (privacy tools)
extensii pentru browser-ul Web
uBlock Origin, Ghostery,
HTTPS Everywhere, Privacy Badger etc.
de considerat și
DuckDuckGo – 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

episodul viitor:
JavaScript în cadrul browser-ului Web

STAW 05/12: Arhitectura navigatorului Web

More Related Content

What's hot (11)

Similar to STAW 05/12: Arhitectura navigatorului Web (20)

More from Sabin Buraga (20)

STAW 05/12: Arhitectura navigatorului Web