cliw 2014—2015 (12/12): performanța web la nivel de client
Post on 14-Jul-2015
172 Views
Preview:
TRANSCRIPT
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Dezvoltarea aplicațiilor Webla nivel de client
⑇performanța Web
strategii pentru reducerea timpului de încărcare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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 – http://stevesouders.com/talks.php
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Modul în care utilizatorul percepe încărcareapaginii este considerat mai important
decât timpul real de încărcare
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
„viața” unei pagini Web (Stoyan Stefanov)www.bookofspeed.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
timpul de viață a unei pagini WebNavigation Timing (recomandare W3C, 2012)
www.w3.org/TR/navigation-timing/
atributetemporalede interes
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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, plugin-uri,...)
starea cache-uluiplatforma hardware & software la momentul exploatării
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
de experimentat utilitarul în linie de comandă + modulul Node.js: https://github.com/marcelduran/webpagetest-api
statistici privind conexiunile efectuate pentru preluarea resurselor (oferite de situl analizat + cele externe)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
detalii vizând performanța Web atunci când anumite conținuturi sunt deja stocate în cache
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Există reguli de îmbunătățire a performanțeiaplicațiilor Web la nivel de client?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
se recurge la proprietăți CSSprecum background-position, margin-left, margin-right etc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
detalii în articolul Dave Shea,CSS Sprites: Image Slicing’s Kiss of Death, 2004:
www.alistapart.com/articles/sprites
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:CSS sprites
tehnici + exemplificări:http://css-tricks.com/css-sprites/
utilitare disponibile online:csssprites.com spritecow.com spriteme.org
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:imagini stocate direct în URI
data:[tip] [;base64], date
detalii la developer.mozilla.org/docs/Web/HTTP/data_URIs
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:imagini stocate direct în URI
data:[tip] [;base64], date
data:image/png;base64,R02DAAA…EA=
tipulMIME
datelepropriu-zise
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
instrumente Web:http://dataurl.net/
http://dopiaza.org/tools/datauri/
http://duri.me/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
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)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 1: reducerea numărului cererilor HTTP
soluție:reunirea mai multor fișiere CSS/JavaScript
atenție la problemele privind modularizareași refolosirea codului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
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
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
livrarea de conținut static:imagini, script-uri, foi de stiluri, multimedia
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
performanța accesului la anumite biblioteci JavaScriptdisponibile via rețele de distribuție a conținutului:
http://www.cdnperf.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
probleme care nu sunt rezolvate:persistența conexiunilor, tranzacții, autentificare,
optimizări la nivel hardware,...
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 2: folosirea unei rețele de distribuțiea conținutului (Content Distribution Network)
CDN – Content Distribution Network
probleme care nu sunt rezolvate:persistența conexiunilor, tranzacții, autentificare,
optimizări la nivel hardware,...
recurgerea la soluții mai complexe de găzduire Web(inclusiv, cele bazate pe cloud computing)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-uluidacă trebuie reîmprospătat cache-ul
Expires: Sat, 07 Feb 2015 07:33:00 GMT
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:folosirea câmpului Expires în antetul unui mesaj HTTP
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
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
specificarea perioadei de secunde pentru careo componentă e păstrată în cache prin directiva max-age
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție:controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Cache-Control: max-age=315360000
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
soluție alternativă:configurarea serverului Web
e.g., recurgerea la modulul Apache mod_expires
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 3: setarea timpului de expirare a paginii
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)
vezi K. Young, “A Beginner's Guide to HTTP Cache Headers” (2013)www.mobify.com/blog/beginners-guide-to-http-cache-headers/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
– e.g., folosind gzip: http://www.gnu.org/software/gzip/ –clientului Web
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
pot fi compresate în special resursele textuale:documente HTML, foi de stiluri CSS, programe JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
evident, compresarea trebuie să fie oferităde serverul Web utilizat – mod_deflate pentru Apache
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 4: compresarea conținutului resurselor
soluție:mesajul de răspuns HTTP poate fi transmis compresat
pentru navigatoarele Web care nu au suport pentru gzip,decompresia se poate realiza la nivel de proxy
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
context:download-urile paralele
navigatoarele Web limitează numărul de download-uri paralele per domeniu al sitului Web (2—6 transferuri)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
context:download-urile paralele
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
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
cel mai nefavorabil caz:script-urile sunt plasate la începutul documentului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 6: plasarea script-urilor la finalul paginii
cel mai favorabil caz:script-urile sunt inserate la finalul documentului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
www.purl.org/net/busa
co
Regula 7: fișierele JavaScript/CSS externe
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
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
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
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
soluție:
DNS caching
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
constatare:păstrarea în cache-ul DNS local (la nivel de client)
a perechii <domeniu simbolic, adresa IP>depinde de timpul de viață asociat domeniului
(TTL – Time To Live)
valori tipice: minute sau ore
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 8: reducerea cererilor de rezolvarea domeniilor (DNS lookups)
soluție:utilizarea câmpului Keep-Alive într-un antet HTTPpentru minimizarea cererilor de tip DNS lookups
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
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
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
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
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
soluție alternativă:JavaScript obfuscation
pericole:apariția erorilor, dificultatea mentenanței codului,
impedimente privind depanarea programelorreverse engineering
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
alte soluții:
minimizare + compresare (cu gzip)
folosirea script-urilor „scufundate” în pagini Web
modularizarea și/sau minimizarea foilor de stiluri CSS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 9: reducerea mărimii fișierelor JavaScript
pentru detalii, de studiat articolele
N. Zakas, Better JavaScript Minification, 2010:www.alistapart.com/articles/better-javascript-minification/
www.alistapart.com/articles/javascript-minification-part-II/
developers.google.com/speed/docs/insights/MinifyResources
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
soluții clasice:
la nivel de server – via câmpul-antet HTTP Location
la client – folosind elementul HTML <meta http-equiv="refresh" .../>
sau recurgând la document.location în JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
deoarece implică unele cereri HTTP suplimentare,redirecționările au impact asupra timpului de răspuns
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
www.purl.org/net/busa
co
Regula 10: evitarea redirecționărilor
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
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
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
ETag (entity tag)
nu există un mecanism standardizat de specificare,deoarece se bazează pe atribute dependente de server
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
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
www.purl.org/net/busa
co
Regula 12: configurarea ETag-urilor
ETag (entity tag)
sfat (Souders, 2007):reconfigurarea ETag-urilor
astfel încât să recurgă la un format comun sau evitarea folosirii lor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:minimizarea numărului de cereri HTTP asincrone
realizate via obiectul XMLHttpRequest
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:folosirea de formate compacte (XML vs. JSON)
și/sau a tehnicilor de compresie a datelor transferate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
strategie:specificarea timpului de expirare a conținutului
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
se poate recurge la șablonul de proiectareBrowser-Side Cache
http://ajaxpatterns.org/Browser-Side_Cache
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
atenție la problemele vizând confidențialitatea datelor!
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 13: păstrarea în cachea datelor transferate asincron
un exemplu demonstrativ lahttp://www.httpwatch.com/demos/ajax_caching/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 14: folosirea metodei GET pentru cereri Ajax
pentru 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
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 15: 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
www.purl.org/net/busa
co
Regula 15: reducerea numărului de elemente DOM
exemplificări (14 ianuarie 2014 vs. 12 ianuarie 2015):
http://www.ted.com/ 521 959http://www.reddit.com/r/programming 1625 1531http://www.trilulilu.ro/ 1397 1030http://www.microsoft.com/ro-ro/default.aspx 720 809https://mail.google.com/mail/u/0/?shva=1#inbox 1899 2135
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Regula 16: 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
www.purl.org/net/busa
co
Alte reguli – mai ales în contextul Web-ului mobil:
preîncărcarea (condiționată ori anticipată) a resurselor
minimizarea accesului la arborele DOM
mărimea necompresată a unei componente să fie < 25 K
împachetarea componentelor într-un document multipart
de studiat tutorialul oferit de Maximiliano Firtman (2014)http://firtman.github.io/velocity/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care sunt instrumentele softwarepentru analizarea performanței la nivel de client?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Evaluarea performanței aplicațiilor Web
PageSpeed Toolshttps://developers.google.com/speed/pagespeed/
YSlowhttp://developer.yahoo.com/performance/
HTTP Archive – http://httparchive.org/
HttpWatch – www.httpwatch.com
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
instrumentele de analiză oferite de Mozilla Firefoxhttps://developer.mozilla.org/docs/Tools
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Mozilla Firefoxanalizarea performanței redării conținutului grafic WebGL
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Internet Explorer F12 developer toolsinformații privind interacțiunea cu utilizatorul
http://msdn.microsoft.com/library/ie/bg182326%28v=vs.85%29
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
statistici privind arborele DOM oferite de DOM Monsterhttp://mir.aculo.us/dom-monster/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Evaluarea performanței aplicațiilor Web
numeroase alte resurse, incluzând instrumente și tehnici de optimizare Web:
http://is.gd/web_perf_tools
http://www.webperformancetoday.com/
o listă de contra-exemple: http://perf.fail/
de asemenea, a se consulta http://calendar.perfplanet.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
optimizarea transferurilor de date via SSL/TLS
testare cu SSL Server Testhttps://www.ssllabs.com/ssltest/
diverse tehnici de optimizare (Geoffroy Couprie, 2013)http://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
optimizarea (reducerea calității) resurselor multimedia:imagini JPEG și/sau PNG, fișiere audio și/sau video,
fonturi, animații Flash, Silverlight, documente PDF etc.
http://calendar.perfplanet.com/2011/lossy-image-compression/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
folosirea tehnicilor de încărcare asincronăși de streaming
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina
blocarea transferurilor
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina
blocarea transferurilor
instrument de referință: Cuzillionhttp://stevesouders.com/cuzillion/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Asigurarea/evitarea execuției script-urilorîntr-o anumită ordine
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
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
www.purl.org/net/busa
co
Evitarea dispersării script-urilor „scufundate”în documentul HTML (don’t scatter inline scripts)
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Alte strategii
recurgerea la tehnici de optimizare specificeunei anumite biblioteci JavaScript
e.g., de studiat prezentarea lui Paul Irish, jQuery Anti-Patterns for Performance & Compression:
http://slidesha.re/QsQFS
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Optimizarea succede etapa de verificarea corectitudinii codului
Douglas Crockford
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Resurse suplimentare
Steve Souders, High Performance Web Sites, O’Reilly, 2007
Steve Souders, Even Faster Web Sites, O’Reilly, 2009http://stevesouders.com/
Ilya Grigorik, High Performance Browser Networking, O’Reilly, 2013:
http://chimera.labs.oreilly.com/books/1230000000545/
prezentările susținute de Ilya Grigorik:http://lanyrd.com/profile/igrigorik/sessions/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Resurse suplimentare
Browser Technologieshttp://platform.html5.org/
Front-end Code Standards & Best Practiceshttp://isobar-idev.github.io/code-standards/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Aspecte de interes înrudite
testarea aplicațiilor în contextul ingineriei Web
securitatea – e.g., confidențialitatea
performanță versus utilizabilitate
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Care-s principalele aspecte privind performanțaaplicațiilor ce rulează pe dispozitive mobile?
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Standards for Web Applications on Mobilewww.w3.org/standards/techs/mobileapp
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
http://www.slideshare.net/iivanoo/mobile-applications-development-lecture-8
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Timpul de viață a bateriei
dependent de factori precum:utilizarea procesorului, reafișarea conținutului (repainting), interpretarea și rularea codului JS,traficul de rețea – inclusiv aspecte privind GPS
N.Thiagarajan et al., “Who Killed My Battery: AnalyzingMobile Browser Energy Consumption”, WWW2012
www2012.wwwconference.org/proceedings/proceedings/p41.pdf
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Latența rețelei
viteza ~ percepție a încărcării
vitezele de transfer (download + upload) variază
ca și în cazul aplicațiilor Web tradiționale, se vizeazătransferul de reprezentări de resurse HTML, CSS, multimedia, cod JS (al aplicației + adițional), date
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
„Scufundarea” unor resurse direct în HTML
în cazul Web-ului mobil, pot apărea îmbunătățiri de performanță dacă stilurile CSS și programele JavaScript sunt incluse în pagina HTML la prima încărcare a sitului
exemplu notabil: m.bing.com
vezi http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Minimizarea utilizării memoriei
aspect important: programele JavaScript
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Optimizarea imaginilor
posibilă soluție:redimensionarea dinamică a imaginilor
via servicii externe (proxy-uri Web) precum Sencha
www.sencha.com/learn/how-to-use-src-sencha-io/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Optimizarea imaginilor
alternative, unele open-source:Cloudinary – http://cloudinary.com/
Embedly – http://embed.ly/display
OpenRoss – https://github.com/ssaw/openross
Resize – https://resize.ly/
Wordpress Photon – developer.wordpress.com/docs/photon/
inclusiv vizând alte conținuturi:e.g., MapProxy – http://mapproxy.org/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Folosirea facilităților oferite de CSS
uzual, browser-ele dispozitivelor mobileoferă suport pentru CSS nivelul 3
aplicare de proprietăți per dispozitiv (media queries)
efecte grafice realizate exclusiv cu CSS: umbre, animații,…
dezavantaje: memorie + timp de procesare mai marehttps://speakerdeck.com/addyosmani/css-performance-tooling
http://davidwalsh.name/css-js-animation
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Minimizarea arborelui DOM
reducerea numărului și reutilizarea de noduriminimizarea operațiilor de manipulare a arborelui DOM
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Interacțiunea cu utilizatorul
navigatoarele Web mobile folosesc un unic fir de execuție(single threaded)
anumite acțiuni din partea utilizatorului pot conduce la timpi de așteptareoferirea de feedback vizual
se poate recurge la API-uri specifice standardizate:http://www.w3.org/standards/techs/js
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Eterogenitatea browser-elor mobile(Maximiliano Firtman, 2014)
limite, suport privind standardele Web,existența instrumentelor de depanare,
utilizarea de proxy-uri aflate la distanță etc.
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Studii de caz și alte resurse de interes:
R. Fioravanti, Building High Performance Mobile Web Applications (2012): http://rjf-io2012.appspot.com/
A. Davies, Speed is Essential for a Great Web Experience(2014): http://tinyurl.com/mrs37ey
prezentările conferințelor Velocityvelocityconf.com/velocity2014/public/schedule/proceedings
velocityconf.com/velocity2013/public/schedule/proceedings
velocityconf.com/velocity2012/public/schedule/proceedings
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Instrumente vizând dezvoltarea aplicațiilor Web mobile – exemplificări:
W3C mobileOK Checker – http://validator.w3.org/mobile/
jQuery Mobile – http://jquerymobile.com/
Sencha Touch – http://www.sencha.com/products/touch
SproutCore – http://sproutcore.com/
Firefox OS – www.info.uaic.ro/~busaco/teach/labs/firefoxos/
Mobile Web Programming – www.mobilexweb.com/
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
Web Developer Checklist – http://webdevchecklist.com/
vezi și I. Zuzak, “The Web Engineer’s Online Toolbox”:http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html
Dr.
Sab
in B
ura
ga
www.purl.org/net/busa
co
episodul viitor: evaluarea proiectului (P)miercuri, 28 ianuarie, 12:00 – C401
www.info.uaic.ro/~busaco/teach/courses/cliw/web-projects.html#calendar
top related