Full-Stack Web Developmentbusaco/teach/courses/staw/... · 2020. 1. 13. · ga .org /net/ co...

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Full-Stack Web Development

christmasexperiments.com

Dr. Sabin Corneliu Buraga – profs.info.uaic.ro/~busaco/

performanța aplicațiilor Web la nivel de client

calendar.perfplanet.com

Dr.

Sab

in B

ura

ga


co

“The pushy bird gets the worm.”

Sean Adams

Dr.

Sab

in B

ura

ga


co

Constatareperformance golden rule – 80/20

minim 80% din timpul de răspuns perceputla nivelul clientului este dat de încărcarea

componentelor adiționale ale unei pagini Web

Steve Souders – stevesouders.com/talks

Dr.

Sab

in B

ura

ga


co

Constatareimpactul performanței asupra

experienței utilizatorului + afacerilor

informații, studii de caz și statistici la wpostats.com

Dr.

Sab

in B

ura

ga


co

impactul performanței asupra experienței utilizatorului + afacerilor

“BBC has seen that they lose an additional 10% of users for every additional second it takes for their site to load” (2017)

www.creativebloq.com/features/how-the-bbc-builds-websites-that-scale

“rebuilding Pinterest pages for performance resulted in a 40% decrease in wait time, a 15% increase in SEO traffic and a 15% increase in conversion rate to signup” (2017)

medium.com/@Pinterest_Engineering

“Zalando saw a 0.7% increase in revenue when they shaved 100ms off their load time” (2018)

jobs.zalando.com/tech/blog/loading-time-matters/

Dr.

Sab

in B

ura

ga


co

Modul în care utilizatorul percepe încărcareapaginii este considerat mai important

decât timpul real de încărcare

Stoyan Stefanov, Psychology of Performance (2010)www.slideshare.net/stoyan/psychology-of-performance

www.youtube.com/watch?v=e6Pup6sHH2M

S. Egger et al., “Time is bandwidth”? Narrowing the gap between subjective time perception and Quality of Experience, ICC 2012

Dr.

Sab

in B

ura

ga


co

Modul în care utilizatorul percepe încărcareapaginii este considerat mai important

decât timpul real de încărcare

“Amazon.com, rated as one of the fastest sites by users, was really the slowest.”

Christine Perfetti & Lori Landesmanarticles.uie.com/download_time/

Dr.

Sab

in B

ura

ga


co

Viteza de încărcare a conținutuluifactor major în evaluarea relevanței unui sit Web

backend frontend

„cascada” încărcării resurselor

(waterfall view)

Dr.

Sab

in B

ura

ga


co

Viteza de încărcare a conținutuluifactor major în evaluarea relevanței unui sit Web

dificultăți în găsirea parametrilor potriviți– lungimea codului (HTML, CSS, JS), timpul de execuție

a programelor JS, manipularea arborelui DOM,... –care să asigure o încărcare optimă

Steve Souders

Dr.

Sab

in B

ura

ga


co

Durata interacțiunii cu utilizatorul

o aplicație Web – e.g., în special una cu caracter social –poate persista timp îndelungat în browser

Dr.

Sab

in B

ura

ga


co

Durata interacțiunii cu utilizatorul

necesitatea monitorizarii comportamentului coduluila nivelul navigatorului Web:

reducerea memoriei irosite (memory leaks)dinamica numărului de noduri și structurii arborelui DOM

timpul de execuție a codului Javascriptminimizarea transferului de date preluate de la server(e)

...

Dr.

Sab

in B

ura

ga


co

Care sunt metricile importante în evaluareaperformanței la nivel de client Web?

Dr.

Sab

in B

ura

ga


co

„viața” unei pagini Web (Stoyan Stefanov)www.bookofspeed.com

a se studia și Lara Hogan, The Basics of Page Speed (2014)designingforperformance.com/basics-of-page-speed/

Dr.

Sab

in B

ura

ga


co

time-to-first-byte

start render

above-the-fold time

page load time

developers.google.com/web/fundamentals/performance/critical-rendering-path/

Dr.

Sab

in B

ura

ga


co

Specificații utile: Performance & Tuning

High-Resolution Time – Level 2Performance Timeline

Navigation TimingResource Timing

User Timing – Level 2Paint Timing

Server Timing

Roadmap of Web Applications on Mobile (W3C, noiembrie 2019):www.w3.org/Mobile/roadmap/performance.html

Dr.

Sab

in B

ura

ga


co

Măsurarea cu precizie a timpului: High-Resolution Time – Level 2

(W3C Recommendation, 21 noiembrie 2019)

www.w3.org/TR/hr-time-2/

[Exposed=(Window,Worker)]

interface Performance : EventTarget {

DOMHighResTimeStamp now();

readonly attribute DOMHighResTimeStamp timeOrigin;

[Default] object toJSON();

};

Dr.

Sab

in B

ura

ga


co

Acces + stocare de date referitoare la performanță: Performance Timeline (W3C Working Draft, 24 oct. 2019)

www.w3.org/TR/performance-timeline-2/

Dr.

Sab

in B

ura

ga


co

Informații temporale vizând încărcarea conținutuluiNavigation Timing (recomandare W3C, 2012)

www.w3.org/TR/navigation-timing/

Dr.

Sab

in B

ura

ga


co

atribute temporale privind „viața” unui document Web

Dr.

Sab

in B

ura

ga


co

Informații temporale vizând resursele unui documentResource Timing – Level 2 (W3C Editor’s Draft, nov. 2019)

www.w3.org/TR/resource-timing-2/

Dr.

Sab

in B

ura

ga


co

atribute oferite de interfața PerformanceResourceTimingredirectStart redirectEnd fetchStart domainLookupStart

domainLookupEnd connectStart secureConnectionStart

connectEnd requestStart responseStart responseEnd

Dr.

Sab

in B

ura

ga


co

Suport pentru măsurarea performanței aplicației WebUser Timing – Level 2 (recomandare W3C, feb. 2019)

www.w3.org/TR/user-timing-2/

partial interface Performance {

void mark(DOMString markName);

void clearMarks(optional DOMString markName);

void measure(DOMString measureName,

optional DOMString startMark, optional DOMString endMark);

void clearMeasures(optional DOMString measureName);

};

Dr.

Sab

in B

ura

ga


co

Informații vizând acțiuni de redare a conținutuluiPaint Timing

(în lucru la W3C, 18 octombrie 2019)

w3c.github.io/paint-timing/

Dr.

Sab

in B

ura

ga


co


First Paint (FP) – prima redare efectuată de browser a conținutului documentului după încărcare

Dr.

Sab

in B

ura

ga


co


First Contentful Paint (FCP) – prima afișare care poate fi de folos utilizatorilor finali

(the first time users could start consuming page content)

de studiat și Philip Walton, Leveraging the Performance Metrics that Most Affect User Experience (2017)

developers.google.com/web/updates/2017/06/user-centric-performance-metrics

Dr.

Sab

in B

ura

ga


co

Suport pentru acces la informații temporale (metrici) vizând cererea și răspunsul de la server

Server Timing (în lucru la W3C, 07 martie 2019)

www.w3.org/TR/server-timing/

Dr.

Sab

in B

ura

ga


co

Testarea performanțeidepinde de mai multe condiții:

statutul utilizatorului – autentificat sau nurata de modificare în timp-real a conținutului

prezența reclamelor (ads)configurația browser-ului (profil, extensii,...)

utilizarea certificatelor digitale – context: HTTPS, HTTP/2starea cache-ului

platforma hardware & software la momentul exploatării

Dr.

Sab

in B

ura

ga


co

Testarea performanței

realizată automat via instrumente specifice („sintetică” – synthetic)

determinare facilă a unor probleme de performanță

oferă informații vizând metrici multiple (timpi de transfer, redare, utilizarea procesorului,…)

nu implică direct utilizatorul final

perf.rocks/tools/

Dr.

Sab

in B

ura

ga


co


considerarea utilizatorilor realiRUM (Real User Monitoring)

reflectă un mediu concret (browser)

oferă informații privind interacțiunea efectivă (localizare geografică, starea conectivității,

fluxul de vizitare a paginilor, preferințe specifice,…)

Dr.

Sab

in B

ura

ga


co


considerarea utilizatorilor realiRUM (Real User Monitoring)

context mai larg: interacțiunea om-calculator

Dr.

Sab

in B

ura

ga


co

WebPagetest – www.webpagetest.orgmodul Node pentru API: marcelduran.com/webpagetest-api

Dr.

Sab

in B

ura

ga


co

statistici privind conexiunile efectuate pentru preluarea resurselor (oferite de situl analizat + cele externe)

Dr.

Sab

in B

ura

ga


co

statistici despre acțiunile realizate de navigatorul Web

Dr.

Sab

in B

ura

ga


co

teste + recomandări oferite de Google PageSpeed Insightsdevelopers.google.com/speed/

Dr.

Sab

in B

ura

ga


co

Website Speed Testwww.dotcom-tools.com/website-speed-test.aspx

Dr.

Sab

in B

ura

ga


co

auditarea resurselor necesare pentru prima redare a conținutului – secvența critică de cereri (Critical Request Chain) – cu instrumentul open-source LightHouse: developers.google.com/web/tools/lighthouse/

Dr.

Sab

in B

ura

ga


co

Dr.

Sab

in B

ura

ga


co

factori vizând performanța Web raportați de instrumentul

disponibil la tools.geekflare.com/report/speed-test/

Dr.

Sab

in B

ura

ga


co

Există reguli de îmbunătățire a performanței aplicațiilor Web

(WPO – Web Performance Optimization) la nivel de client?

Dr.

Sab

in B

ura

ga


co

Regula 1: reducerea numărului cererilor HTTP(S)

detalii la httparchive.org/trends.php

Dr.

Sab

in B

ura

ga


co


nu presupune diminuarea componentelor unei pagini(foi de stil, imagini, script-uri,...)

implicații privind funcționalitatea

+ experiența utilizatorului cu aplicația (UX)

Dr.

Sab

in B

ura

ga


co


soluție:CSS sprites

folosirea unei imagini unicece va include mai multe zone grafice ce pot fi „decupate”

și utilizate prin intermediul proprietăților CSS

Dr.

Sab

in B

ura

ga


co


Dr.

Sab

in B

ura

ga


co



se recurge la proprietăți CSSprecum background-position, margin-left, margin-right etc.

Dr.

Sab

in B

ura

ga


co



pentru detalii, a se studia:www.alistapart.com/articles/sprites

developer.mozilla.org/Web/CSS/CSS_Images

Dr.

Sab

in B

ura

ga


co



tehnici + exemplificări:css-tricks.com/css-sprites/

utilitare disponibile online:csssprites.com spritegen.website-performance.org

Dr.

Sab

in B

ura

ga


co



această abordare poate fi considerată demodată în contextul HTTP/2

a se parcurge și CSS and Network Performance (2018)csswizardry.com/2018/11/css-and-network-performance/

Dr.

Sab

in B

ura

ga


co


soluție:imagini stocate direct în URI

utilizarea schemei data (RFC 2397)

“inclusion of small data items as ‘immediate’ data”

Dr.

Sab

in B

ura

ga


co



data:[tip] [;base64], date

detalii la developer.mozilla.org/docs/Web/HTTP/data_URIs

Dr.

Sab

in B

ura

ga


co



data:[tip] [;base64], date

data:image/png;base64,R02DAAA…EA=

date propriu-zise

Dr.

Sab

in B

ura

ga


co

instrumente Web:dataurl.net

dopiaza.org/tools/datauri/

duri.me

Dr.

Sab

in B

ura

ga


co


soluție:reunirea mai multor fișiere CSS/JavaScript

fișierele CSS sau JavaScript multiple pot fi combinateîntr-un singur fișier CSS ori JavaScript, respectiv

(apoi eventual compresate)

raport oferit de tools.pingdom.com

Dr.

Sab

in B

ura

ga


co


soluție:reunirea mai multor fișiere CSS/JavaScript

atenție la problemele privind modularizareași refolosirea codului

această tehnică poate fi considerată demodată în contextul HTTP/2

Dr.

Sab

in B

ura

ga


co

A se considera HTTP/2 față de HTTP/1.1în cazul HTTP/2, de regulă timpul de încărcare

a resurselor este (mult) mai mic

Ragnar Lönn, HTTP/1.1 vs. HTTP/2 (2016)www.slideshare.net/LoadImpact/oreilly-fluent-conference-http11-vs-http2

Dr.

Sab

in B

ura

ga


co

studii de caz:css-tricks.com/http2-real-world-performance-test-analysis/

gokulkrishh.github.io/performance/2017/04/30/comparison-of-http-and-http2.html

HTTP/2

HTTP/1.1

Dr.

Sab

in B

ura

ga


co

Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)

CDN – Content Distribution Network

colecție de servere Web distribuite geografic pentru aasigura mai eficient rezolvarea cererilor de acces la date

Web farms, clusters, cloud computing

Dr.

Sab

in B

ura

ga


co



arhitectura client-server vs. peer-to-peer vs. hibridă

soluții (comerciale) disponibile: Akamai, Bitgravity, Cachefly, CDNify, EdgeCast, Incapsula, Telefónica, XCDN

www.cdnplanet.com

Dr.

Sab

in B

ura

ga


co



livrarea de conținut static:imagini, script-uri, foi de stiluri, multimedia

Dr.

Sab

in B

ura

ga


co

soluții CDN vizând livrarea codului bibliotecilor JS:

CDNJSgithub.com/cdnjs/cdnjs

jsDelivrgithub.com/jsdelivr/jsdelivr

Dr.

Sab

in B

ura

ga


co

Regula 3: setarea timpului de expirare a paginii

context: managementul cache-ului

considerații de interes în articolul Y. Ma et al., Measurement and Analysis of Mobile Web Cache Performance, WWW 2015

taoxie.cs.illinois.edu/publications/www15-webcache.pdf

Dr.

Sab

in B

ura

ga


co


soluție:folosirea câmpului Expires în antetul unui mesaj HTTP

Dr.

Sab

in B

ura

ga


co



indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul

Dr.

Sab

in B

ura

ga


co



indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul

Expires: Sat, 25 Jan 2020 07:33:00 GMT

Dr.

Sab

in B

ura

ga


co



stabilirea unui timp în viitor va determina păstrareape perioadă îndelungată a conținutului paginii Web

în cache-ul local

Dr.

Sab

in B

ura

ga


co


soluție:controlul politicii de actualizare a cache-ului

via Cache-Control – câmp în antetul HTTP

Dr.

Sab

in B

ura

ga


co




specificarea perioadei de secunde pentru careo componentă e păstrată în cache prin directiva max-age

Dr.

Sab

in B

ura

ga


co




Cache-Control: max-age=315360000

Dr.

Sab

in B

ura

ga


co


soluție alternativă:configurarea serverului Web

e.g., recurgerea la modulul Apache mod_expires

Dr.

Sab

in B

ura

ga


co


observație:valoarea campului Expires e absolută (dată de calendar),

iar timpul max-age de păstrare în cache este relativ(număr de secunde față de momentul curent)

Dr.

Sab

in B

ura

ga


co

Regula 4: compresarea conținutului resurselor

Dr.

Sab

in B

ura

ga


co


soluție:mesajul de răspuns HTTP poate fi transmis compresat

clientului Web

abordare tradițională: gzip – www.gzip.orgabordare modernă: Brotli – tools.ietf.org/html/rfc7932

Dr.

Sab

in B

ura

ga


co

considerații practice (Barry Pollard, 2018): www.tunetheweb.com/performance/brotli/

Dr.

Sab

in B

ura

ga


co



pot fi compresate în special resursele textuale:documente HTML, foi de stiluri CSS, programe JavaScript

Dr.

Sab

in B

ura

ga


co



evident, compresarea trebuie să fie oferităde serverul Web utilizat – mod_deflate pentru Apache

Dr.

Sab

in B

ura

ga


co



pentru navigatoarele Web fără suport,decompresia se poate realiza la nivel de proxy

Dr.

Sab

in B

ura

ga


co

REDbotredbot.org

Dr.

Sab

in B

ura

ga


co

Regula 5: plasarea foilor CSS în antetul paginii

uzual, componentele sunt transferate de pe serverîn ordinea specificării lor în documentul HTML

proprietățile CSS trebuie încărcate primele

pentru ca browser-ul să poată reda conținutulconform stilurilor precizate

progressive rendering

Dr.

Sab

in B

ura

ga


co

Regula 6: plasarea script-urilor la finalul paginii

context:download-urile paralele

timpul de răspuns este dat de numărul de componentedintr-o pagină (fiecare generând o cerere HTTP

dacă nu e disponibilă în cache)

Dr.

Sab

in B

ura

ga


co



navigatoarele Web limitează numărul de download-uri paralele per domeniu al sitului Web (2—6 transferuri)

Dr.

Sab

in B

ura

ga


co



script-urile JavaScript blocheazătransferul paralel al altor resurse

(programul ar putea schimba conținutul paginii,deci navigatorul va încerca să nu altereze arborele DOM)

Dr.

Sab

in B

ura

ga


co


cel mai nefavorabil caz:script-urile sunt plasate la începutul documentului

cel mai favorabil caz:script-urile sunt inserate la finalul documentului

Dr.

Sab

in B

ura

ga


co

Regula 7: fișierele JavaScript/CSS externe

1 ian. 2013(CSS: 35 KB, JS: 207 KB)

15 dec. 2015(CSS: 76 KB, JS: 363 KB)

statistici pentru desktop: httparchive.org/compare.php

1 oct. 2016(CSS: 76 KB, JS: 410 KB)

15 dec. 2017(CSS: 98 KB, JS: 504 KB)

Dr.

Sab

in B

ura

ga


co


deși programele/stilurile specificate direct (inline)în cadrul documentului HTML sunt procesate mai rapid,fișierele externe pot fi stocate în cache-ul navigatorului

Dr.

Sab

in B

ura

ga


co


deși programele/stilurile specificate direct (inline)în cadrul documentului HTML sunt procesate mai rapid,fișierele externe pot fi stocate în cache-ul navigatorului

refolosirea lor pentru mai multe pagini sau situri Web

Dr.

Sab

in B

ura

ga


co


soluția „optimă” depinde de context:

totalul vizualizărilor paginii (page views)

starea cache-ului – empty cache vs. primed cache

gradul de reutilizare a componentelor

Dr.

Sab

in B

ura

ga


co


tehnici:post-onload download

dacă pagina principală are cele mai multe vizite, programele JavaScript și stilurile CSS se pot „scufunda”

direct în documentul HTML, urmând ca alte componente adiționale să fie încărcate – asincron – via fișiere externe

Dr.

Sab

in B

ura

ga


co


tehnici:dynamic inlining

dacă detectăm că o componentă există deja în cache-ul browser-ului, putem stabili care fragmente de cod

să fie stocate intern și care să fie transferate (externe)

Dr.

Sab

in B

ura

ga


co

(în loc de) pauză

Dr.

Sab

in B

ura

ga


co

Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)

realitate:fiecare cerere realizată de navigatorul Web

pentru rezolvarea unui nume simbolic de domeniuîn vederea obținerii adresei IP a acestuia consumă timp

Dr.

Sab

in B

ura

ga


co


timpul de răspuns depinde de: resolver-ul DNS

numărul de cereriproximitatea domeniului interogat

lărgimea de bandăetc.

Dr.

Sab

in B

ura

ga


co


soluție:

DNS caching

Dr.

Sab

in B

ura

ga


co


constatare:păstrarea în cache-ul DNS local (la nivel de client)

a perechii depinde de timpul de viață asociat domeniului

(TTL – Time To Live)

valori tipice: minute sau ore

Dr.

Sab

in B

ura

ga


co


soluție:utilizarea câmpului Keep-Alive într-un antet HTTPpentru minimizarea cererilor de tip DNS lookups

Dr.

Sab

in B

ura

ga


co

Regula 9: reducerea mărimii fișierelor JavaScript

soluție:JavaScript minification

algoritmi de reducere a caracterelor inutile(e.g., spații albe) din codul-sursă JavaScript

pentru a reduce dimensiunea fisierului text ce-l stochează

Dr.

Sab

in B

ura

ga


co


soluție:JavaScript minification

exemple de instrumente – unele, disponibile online:JavaScript Optimizer, JSCompress, JSMin, Minify, Packer,

ShrinkSafe, YUI Compressor, UglifyJS

Dr.

Sab

in B

ura

ga


co


soluție alternativă:JavaScript obfuscation

tehnică de optimizare care elimină atât comentariile și spațiile albe, cât rescrie codul în vederea reducerii

dimensiunii fișierului (modificarea numelui variabilelor, ori funcțiilor, compactarea șirurilor de caractere,...)

Dr.

Sab

in B

ura

ga


co


soluție alternativă:JavaScript obfuscation

pericole:apariția erorilor, dificultatea mentenanței codului,

impedimente privind depanarea programelorreverse engineering

Dr.

Sab

in B

ura

ga


co


alte soluții:

minimizare + compresare (cu Brotli sau gzip)

folosirea script-urilor „scufundate” în pagini Web

modularizarea și/sau minimizarea foilor de stiluri CSS

Dr.

Sab

in B

ura

ga


co

Regula 10: evitarea redirecționărilor

realitate:existența mai multor tehnici de redirecționare

a browser-ului spre alt URL via HTTP

Dr.

Sab

in B

ura

ga


co


300 Multiple Choices (pe baza câmpului Content-Type)301 Moved Permanently

302 Moved Temporarily

303 See Other (clarificare a mesajului 302)304 Not Modified (datele sunt deja în cache)

307 Temporary Redirect (clarificare a mesajului 302)

Dr.

Sab

in B

ura

ga


co


soluții clasice:

la nivel de server – via câmpul-antet HTTP Location

la client – folosind elementul HTML

sau recurgând la document.location în JavaScript

Dr.

Sab

in B

ura

ga


co


deoarece implică unele cereri HTTP suplimentare,redirecționările au impact asupra timpului de răspuns

Dr.

Sab

in B

ura

ga


co


rezolvări:adăugarea caracterului / la finalul unui URL

pentru a preîntâmpina redirecționările de tip 301

soluții tehnologice:Alias și/sau DirectorySlash pentru serverul Apache

Dr.

Sab

in B

ura

ga


co


rezolvări:folosirea mod_rewrite (Apache) saualias-urilor de domenii simbolice

pentru transferul cererilor de la un sit Web vechila unul actualizat

Dr.

Sab

in B

ura

ga


co


rezolvări:monitorizarea traficului,

pentru a detecta redirecționările frecvente(inclusiv cele via servicii de scurtare a adreselor Web

precum bit.ly, tinyurl.com etc.)

Dr.

Sab

in B

ura

ga


co

Regula 11: eliminarea script-urilor duplicate

soluție:implementarea unui mecanism de management

al încărcării programelor JavaScript

Dr.

Sab

in B

ura

ga


co

Regula 11: eliminarea script-urilor duplicate

soluție:implementarea unui mecanism de management

al încărcării programelor JavaScript

de exemplu, via sistemul de aplicarea machetelor de redare – templating system

Dr.

Sab

in B

ura

ga


co

Regula 12: configurarea ETag-urilor

ETag (entity tag)

mecanism HTTP ce permite serverelor și clienților Websă valideze componentele stocate în cache

Dr.

Sab

in B

ura

ga


co


ETag (entity tag)

versiunea (starea) unei componente – aici, entitate –a paginii Web este identificată unic via un ETag

pentru a se putea aplica o anumită politicăde eliminare/păstrare (d)in cache

Dr.

Sab

in B

ura

ga


co


ETag (entity tag)

nu există un mecanism standardizat de specificare,deoarece se bazează pe atribute dependente de server

ETag-urile generate de Apache nu au același formatcu cele create de IIS

Dr.

Sab

in B

ura

ga


co

Regula 13: păstrarea în cachea datelor transferate asincron

strategie:minimizarea numărului de cereri HTTP asincrone

Dr.

Sab

in B

ura

ga


co


strategie:folosirea de formate compacte (XML vs. JSON vs. CSV)și/sau a tehnicilor de compresie a datelor transferate

Dr.

Sab

in B

ura

ga


co


strategie:politici de păstrare în cache a datelor în funcție de tipul

resurselor Web

exemplu în contextul service worker-ilor:medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c

Dr.

Sab

in B

ura

ga


co


strategie:specificarea timpului de expirare a conținutului

Dr.

Sab

in B

ura

ga


co


Atenție la problemele vizând confidențialitatea datelor!

Dr.

Sab

in B

ura

ga


co

Alte reguli de bună practică?

Dr.

Sab

in B

ura

ga


co

Preîncărcarea resurselor

indicarea via a resurselor de tip audio, document, fetch, font, image, script, style, track, worker, video

ce pot fi preîncărcate de către navigatorul Web

Preload (în lucru la W3C, 30 decembrie 2019)w3c.github.io/preload/

Dr.

Sab

in B

ura

ga


co

developer.mozilla.org/Web/HTML/Preloading_content

Dr.

Sab

in B

ura

ga


co

Folosirea metodei GET pentru cereri Ajax

în cazul metodei POST, browser-ul recurge la 2 etape:trimiterea câmpurilor din antet,

apoi transmiterea efectivă a datelor

pentru a prelua de pe server date, vom utiliza GET(starea aplicației la nivel de server nu se modifică)

Dr.

Sab

in B

ura

ga


co

Reducerea numărului de elemente DOM

determinarea elementelor dintr-un document HTML cudocument.getElementsByTagName('*').length

și compararea cu alte pagini Web

Dr.

Sab

in B

ura

ga


co

Reducerea numărului de elemente DOM

exemple (14.01.14 vs. 12.01.15 vs. 04.01.16 vs. 08.01.18):

www.ted.com/ 521 959 922 1338www.reddit.com/r/programming 1625 1531 1364 1517www.trilulilu.ro/ 1397 1030 1102 1651www.microsoft.com/ro-ro/default.aspx 720 809 684 487

Dr.

Sab

in B

ura

ga


co

Divizarea componentelor între domenii

efect: maximizarea transferurilor paralele

nu vor fi folosite mai mult de 2—4 domenii diferite, pentru a nu apărea penalități vizând interogările DNS

Dr.

Sab

in B

ura

ga


co

Grafica 2D folosind SVG vs.

performanță ridicată(filtre, ray tracing)

conținut complex, animații în timp-real

manipulare video

imagini statice/animate(eventual, beneficiind de CSS)

fidelitate ridicată vizualizare + listare

conținut indexat de motoare de căutare

Dr.

Sab

in B

ura

ga


co

Alte strategii

optimizarea transferurilor de date via SSL/TLS

SSL and TLS Deployment Best Practices (2017)github.com/ssllabs/research/wiki/SSL-and-TLS-Deployment-Best-Practices

instrumente dedicate: www.ssllabs.com/projects/

Dr.

Sab

in B

ura

ga


co

Alte strategii

reducerea numărului de cookie-uri

exemplu:“Evite’s gallery page makes over 400 requests

(~200 redirects), over 180 distinct connections, and fetches over 2MB of data, ~1MB of which is in cookies!”

perf.fail/post/105638623464/evites-gallery-ads-targeting-gone-wrong

Dr.

Sab

in B

ura

ga


co

Alte strategii

optimizarea – eventual, reducerea calității –resurselor multimedia:

imagini JPEG și/sau PNG, fișiere audio și/sau video,fonturi, documente PDF etc.

Addy Osmani, Essential Image Optimization (2018)images.guide

instrumente la css-tricks.com/performance-tools/

Dr.

Sab

in B

ura

ga


co

sugestii de optimizare a imaginilor: Image Analysis Toolwebspeedtest.cloudinary.com

Dr.

Sab

in B

ura

ga


co

de parcurs și Maciej Cegłowski, The Website Obesity Crisis (2015)idlewords.com/talks/website_obesity.htm

Dr.

Sab

in B

ura

ga


co

Alte strategii

recurgerea la streaming pentru a prelua date (e.g., JSON, fluxuri multimedia)

(re)vezi cursurile anterioare

Dr.

Sab

in B

ura

ga


co

Ce aspecte vizează performanțaprogramelor JavaScript?

Dr.

Sab

in B

ura

ga


co

Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpinablocarea transferurilor sau redării conținutului

Dr.

Sab

in B

ura

ga


co

fenomenul render-blocking JavaScript

script-urile necesare a reda conținutul paginii pot fi incluse în document pentru a evita cereri HTTP suplimentare

Dr.

Sab

in B

ura

ga


co

codul JS neesențial poate fi încărcat asincroncode splitting

Reduce JavaScript Payloads with Code Splitting (2018)developers.google.com/web/fundamentals/performance/optimizing-

javascript/code-splitting/

Dr.

Sab

in B

ura

ga


co

sfat: utilizarea atributului defer pentru

execuția începe după ce procesarea codului a avut loc, dar înainte de apariția evenimentului DOMContentLoad

garantează ordinea execuției script-urilor, iar procesarea nu e blocată

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

construire arbore DOM… gata!

preluare script (fetch) execuție

HTML

JS

Dr.

Sab

in B

ura

ga


co

sfat: utilizarea atributului async pentru

execuția începe când e posibil, după terminarea încărcării (cu prioritate scăzută), înainte de evenimentul load

ordinea execuției nu e garantată, iar crearea arborelui DOM poate fi blocată

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

construire DOM…

preluare script execuție

HTML

JS

blocare construire DOM…

Dr.

Sab

in B

ura

ga


co

Asigurarea/evitarea execuției script-urilorîntr-o anumită ordine

aspect de interes atunci când programele JavaScriptsunt interdependente

Dr.

Sab

in B

ura

ga


co

Evitarea dispersării script-urilor „scufundate”în documentul HTML (don’t scatter inline scripts)

Dr.

Sab

in B

ura

ga


co

Plasarea într-o coadă de așteptare a execuției codului JS ce va fi rulat atunci când browser-ul

se află în starea idle (i.e. utilizatorul e inactiv sau la finalul unui cadru de redare – frame)

Cooperative Scheduling of Background Tasks(în lucru, 30 decembrie 2019)

w3c.github.io/requestidlecallback/

Dr.

Sab

in B

ura

ga


co

de studiat și articolul:developer.mozilla.org/Web/API/Window/requestIdleCallback

Dr.

Sab

in B

ura

ga


co

Alte strategii

recurgerea la tehnici de optimizare specificeunei anumite biblioteci JavaScript

exemplificări – la nivel de client:jQuery – learn.jquery.com/performance/

React.js – reactjs.org/docs/optimizing-performance.html

Dr.

Sab

in B

ura

ga


co

Alte strategii

recurgerea la tehnici de optimizare specificeunei anumite biblioteci JavaScript

exemplificări – pe server (Node.js):Performance Hooks – nodejs.org/api/perf_hooks.html

bune practici la framework-ul Express –expressjs.com/en/advanced/best-practice-performance.html

Dr.

Sab

in B

ura

ga


co

Optimizarea succede etapa de verificarea corectitudinii codului

Douglas Crockford

Dr.

Sab

in B

ura

ga


co

Aspecte de interes înruditetestarea aplicațiilor în contextul ingineriei Web

performanță versus utilizabilitateperformanța în contextul robustețeisecuritatea – e.g., confidențialitatea

www.igvita.com/2016/05/20/building-fast-and-resilient-web-applications/

performancerobust

res-

ponsive

ilient

Dr.

Sab

in B

ura

ga


co

RAIL (Response, Animation, Idle and Load)

Paul Irish, Paul Lewis, Introducing RAIL: A User-Centric Model For Performance (2015):

www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/

developers.google.com/web/fundamentals/performance/rail

metodologia RAIL

considerarea utilizatorului în contextul performanței Web

Dr.

Sab

in B

ura

ga


co

Reguli în contextul Web-ului mobil:

Max Firtman, Mobile Web Performance Checklist (2016)www.oreilly.com/ideas/mobile-web-performance-checklist

Mobile Analysis in PageSpeed Insights (Google, 2018)developers.google.com/speed/docs/insights/v5/get-started

Dr.

Sab

in B

ura

ga


co

Studii de caz și alte resurse de interes:

Web Performance Matters – perf.rocks

Web Performance Docs from Google – web.dev

Web Performance Blogosphere – www.perfplanet.com

Ilya Grigorik, High Performance Browser Networking, O’Reilly, 2013: hpbn.co

Mathias Schäfer, Robust Client-Side JavaScript, 2017molily.de/robust-javascript/

Vitaly Friedman, Front-End Performance Checklist, 2020www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/

Dr.

Sab

in B

ura

ga


co

Instrumente specifice (pentru platforme mobile):

Accelerated Mobile Pages (Google)amp.dev

critici: A letter about Google AMP (ianuarie 2018): ampletter.org

Dr.

Sab

in B

ura

ga


co

Instrumente specifice:

Progressive Web Appsdevelopers.google.com/web/progressive-web-apps/

studii de caz: pwa.rocks

Dr.

Sab

in B

ura

ga


co

Instrumente specifice:

dedicate livrării de știri:

Apple News Formatdeveloper.apple.com/news-publisher/

Instant Articles (Facebook)instantarticles.fb.com

Dr.

Sab

in B

ura

ga


co

Posibile acțiuni realizate de utilizatoriuzual, pe baza extensiilor instalate în browser

blocarea reclamelor (ad blocking)

anularea încărcării anumitor tipuri de resurse (e.g., foi CSS, fonturi externe)

suprimarea execuției anumitor script-uri JSvezi inițiativa LibreJS – www.gnu.org/software/librejs/

Dr.

Sab

in B

ura

ga


co

Observații de final:

performanța aplicațiilor Web la nivel de client are un caracter dinamic

Dr.

Sab

in B

ura

ga


co


performanța aplicațiilor Web la nivel de client are un caracter dinamic

monitorizarea performanței trebuie realizată în timpul rulării

WebDriver (W3C Living Document, 31 dec. 2019) a remote control interface that enables introspection

and control of user agentsw3c.github.io/webdriver/

developer.mozilla.org/docs/Web/API/Navigator/webdriver

Dr.

Sab

in B

ura

ga


co


aplicația Web trebuie să se adapteze caracteristicilor dispozitivului pe care rulează

procesor, memorie, rețea, afișaj, senzori,…adaptive loading

A. Osmani, Adaptive Loading: Improving Web Performance on low-end devices, 2019dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69

Dr.

Sab

in B

ura

ga


co

episodul viitor: (re)găsirea resurselor Web

Full-Stack Web Developmentbusaco/teach/courses/staw/... · 2020. 1. 13. · ga .org /net/ co...

Documents

Transcript of Full-Stack Web Developmentbusaco/teach/courses/staw/... · 2020. 1. 13. · ga .org /net/ co...