Dezvoltarea aplicaţiilor Web la nivel de client (cursul #13): Performanţa aplicaţiilor Web la nivel de client
1. strategii pentru reducerea timpului de încărcare
Dr. Sabin Buragawww.purl.org/net/busaco
performanța aplicațiilor Web
la nivel de client
2. Sean Adams
Dr. Sabin Buragawww.purl.org/net/busaco
“The pushy bird gets the worm.”
3. minim 80% din timpul de răspuns perceput
la nivelul clientului este dat de încărcarea
componentelor adiționale ale unei pagini Web
Steve Souders, 2007
Dr. Sabin Buragawww.purl.org/net/busaco
Constatare
performance golden rule – 80/20
5. 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. Sabin Buragawww.purl.org/net/busaco
Viteza de încărcare a conținutului – factor major
în evaluarea relevanței unui sit Web
6. o aplicație Web – e.g., în special una cu caracter social –
poate persista timp îndelungat în browser
Dr. Sabin Buragawww.purl.org/net/busaco
Durata interacțiunii cu utilizatorul
necesitatea monitorizarii comportamentului codului
la nivelul navigatorului Web:
reducerea memoriei irosite (memory leaks),
dinamica numărului de noduri și structurii arborelui DOM,
timpul de execuție a codului Javascript,
minimizarea transferului de date provenite de la server,
...
9. Navigation Timing (recomandare W3C, decembrie 2012)
www.w3.org/TR/navigation-timing/
Dr. Sabin Buragawww.purl.org/net/busaco
timpul de viață a unei pagini Web
și atributele temporale de interes
10. depinde de mai multe conditii:
statutul utilizatorului – autentificat sau nu
rata de modificare în timp-real a conținutului
prezența reclamelor (ads)
configurația browser-ului (profil, extensii,...)
starea cache-ului
platforma hardware & software la momentul exploatării
Dr. Sabin Buragawww.purl.org/net/busaco
Testarea performanței
14. nu presupune diminuarea componentelor unei pagini
(foi de stil, imagini, script-uri,...)
implicații privind funcționalitatea + UX
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
15. soluție:
CSS sprites
folosirea unei imagini unice
ce va include mai multe zone grafice ce pot fi “decupate”
și utilizate prin intermediul proprietăților CSS
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
17. soluție:
CSS sprites
se recurge la proprietăți CSS
precum background-position, margin-left, margin-right etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
18. soluție:
CSS sprites
detalii în articolul Dave Shea,
CSS Sprites: Image Slicing’s Kiss of Death, 2004:
www.alistapart.com/articles/sprites
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
20. soluție:
imagini stocate direct în URI
utilizarea schemei data (RFC 2397)
“inclusion of small data items as ‘immediate’ data”
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
21. soluție:
imagini stocate direct în URI
data:[tip] [;base64], date
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
22. soluție:
imagini stocate direct în URI
data:[tip] [;base64], date
data:image/png;base64,R02DAAA…EA=
tipul
MIME
datele
propriu-zise
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
23. 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. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
24. soluție:
reunirea mai multor fișiere CSS/JavaScript
atenție la problemele privind modularizarea
și refolosirea codului
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 1: reducerea numărului cererilor HTTP
26. CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea cererilor de acces la date
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
27. CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea cererilor de acces la date
Web farms, clusters, cloud computing
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
29. CDN – Content Distribution Network
arhitectura client-server vs. peer-to-peer vs. hibridă
www.cdnplanet.com
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
30. CDN – Content Distribution Network
livrarea de conținut static:
imagini, script-uri, foi de stiluri, multimedia
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
31. CDN – Content Distribution Network
probleme care nu sunt rezolvate:
persistența conexiunilor, tranzacții, autentificare,
optimizări la nivel hardware,...
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
32. 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. Sabin Buragawww.purl.org/net/busaco
Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribution Network)
34. soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
35. soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat cache-ul
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
36. soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat cache-ul
Expires: Sat, 01 Feb 2014 09:33:00 GMT
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
37. soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
stabilirea unui timp în viitor va determina păstrarea
pe perioadă îndelungată a conținutului paginii Web
în cache-ul local
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
38. soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
39. soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
specificarea perioadei de secunde pentru care
o componentă e păstrată în cache prin directiva max-age
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
40. soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
Cache-Control: max-age=315360000
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
41. soluție alternativă:
configurarea serverului Web
e.g., recurgerea la modulul Apache mod_expires
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
42. 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. Sabin Buragawww.purl.org/net/busaco
Regula 3: setarea timpului de expirare a paginii
44. soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 4: compresarea conținutului resurselor
45. soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client
pot fi compresate în special resursele textuale:
documente HTML, foi de stiluri CSS, programe JavaScript
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 4: compresarea conținutului resurselor
46. soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client
evident, compresarea trebuie să fie oferită
de serverul Web utilizat – mod_deflate pentru Apache
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 4: compresarea conținutului resurselor
47. soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client
pentru navigatoarele Web care nu au suport pentru gzip,
decompresia se poate realiza la nivel de proxy
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 4: compresarea conținutului resurselor
49. 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ținutul
conform stilurilor precizate
progressive rendering
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 5: plasarea foilor CSS în antetul paginii
51. context:
download-urile paralele
timpul de răspuns este dat de numărul de componente
dintr-o pagină (fiecare generând o cerere HTTP
dacă nu e disponibilă în cache)
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 6: plasarea script-urilor la finalul paginii
52. context:
download-urile paralele
navigatoarele Web limitează numărul de download-uri
paralele per domeniu al sitului Web (2—6 transferuri)
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 6: plasarea script-urilor la finalul paginii
53. 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. Sabin Buragawww.purl.org/net/busaco
Regula 6: plasarea script-urilor la finalul paginii
54. cel mai nefavorabil caz:
script-urile sunt plasate la începutul documentului
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 6: plasarea script-urilor la finalul paginii
55. cel mai favorabil caz:
script-urile sunt inserate la finalul documentului
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 6: plasarea script-urilor la finalul paginii
57. 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. Sabin Buragawww.purl.org/net/busaco
Regula 7: fișierele JavaScript/CSS externe
58. 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. Sabin Buragawww.purl.org/net/busaco
Regula 7: fișierele JavaScript/CSS externe
59. 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. Sabin Buragawww.purl.org/net/busaco
Regula 7: fișierele JavaScript/CSS externe
60. 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 ulterior via fișiere externe
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 7: fișierele JavaScript/CSS externe
61. 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. Sabin Buragawww.purl.org/net/busaco
Regula 7: fișierele JavaScript/CSS externe
63. 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. Sabin Buragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
64. timpul de răspuns depinde de:
resolver-ul DNS
numărul de cereri
proximitatea domeniului interogat
lărgimea de bandă
etc.
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
65. soluție:
DNS caching
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
66. 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. Sabin Buragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
67. soluție:
utilizarea câmpului Keep-Alive într-un antet HTTP
pentru minimizarea cererilor de tip DNS lookups
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
70. soluție:
JavaScript minification
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
algoritmi de reducere a caracterelor inutile
(e.g., spații albe) din codul-sursă JavaScript
pentru a reduce dimensiunea fisierului text ce-l stochează
71. soluție:
JavaScript minification
exemple de instrumente:
JavaScript Optimizer, JSMin, Minify, Packer,
ShrinkSafe, YUI Compressor, UglifyJS
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
72. 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. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
73. soluție alternativă:
JavaScript obfuscation
pericole:
apariția erorilor, dificultatea mentenanței codului,
impedimente privind depanarea programelor
reverse engineering
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
74. alte soluții:
compresare (e.g., gzip) + minimizare
folosirea script-urilor “scufundate” în pagini Web
modularizarea și/sau minimizarea foilor de stiluri CSS
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
75. 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/
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 9: reducerea mărimii fișierelor JavaScript
77. realitate:
existența mai multor tehnici de redirecționare
a browser-ului spre alt URL via HTTP
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
78. 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. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
79. 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. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
80. deoarece implică unele cereri HTTP suplimentare,
redirecționările au impact asupra timpului de răspuns
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
81. 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. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
82. rezolvări:
folosirea mod_rewrite (Apache) sau
alias-urilor de domenii simbolice
pentru transferul cererilor de la un sit Web vechi
la unul actualizat
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
83. 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. Sabin Buragawww.purl.org/net/busaco
Regula 10: evitarea redirecționărilor
85. soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 11: eliminarea script-urilor duplicate
86. soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript
de exemplu, via sistemul de aplicare
a șabloanelor de redare – templating system
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 11: eliminarea script-urilor duplicate
88. ETag (entity tag)
mecanism HTTP ce permite serverelor și clienților Web
să valideze componentele stocate în cache
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 12: configurarea ETag-urilor
89. 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. Sabin Buragawww.purl.org/net/busaco
Regula 12: configurarea ETag-urilor
90. ETag (entity tag)
nu există un mecanism standardizat de specificare,
deoarece se bazează pe atribute dependente de server
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 12: configurarea ETag-urilor
91. 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 format
cu cele create de IIS
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 12: configurarea ETag-urilor
92. ETag (entity tag)
sfat (Souders, 2007):
reconfigurarea ETag-urilor
astfel încât să recurgă la un format comun
sau evitarea folosirii lor
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 12: configurarea ETag-urilor
94. strategie:
minimizarea numărului de cereri HTTP asincrone
realizate via obiectul XMLHttpRequest
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
95. strategie:
folosirea de formate compacte (XML vs. JSON)
și/sau a tehnicilor de compresie a datelor transferate
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
96. strategie:
specificarea timpului de expirare a conținutului
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
97. se poate recurge la șablonul de proiectare
Browser-Side Cache
http://ajaxpatterns.org/Browser-Side_Cache
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
98. atenție la problemele vizând confidențialitatea datelor!
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
99. un exemplu demonstrativ la
http://www.httpwatch.com/demos/ajax_caching/
Dr. Sabin Buragawww.purl.org/net/busaco
Regula 13: păstrarea în cache
a datelor transferate asincron
102. 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. Sabin Buragawww.purl.org/net/busaco
Regula 14: folosirea metodei GET
pentru cereri Ajax
104. Dr. Sabin Buragawww.purl.org/net/busaco
Regula 15: reducerea numărului de elemente DOM
determinarea elementelor dintr-un document HTML cu
document.getElementsByTagName('*').length
și compararea cu alte pagini Web
105. Dr. Sabin Buragawww.purl.org/net/busaco
Regula 15: reducerea numărului de elemente DOM
câteva exemple (statistici la 14 ianuarie 2014):
https://mail.google.com/mail/u/0/?shva=1#inbox
http://www.ted.com/
http://www.reddit.com/r/programming
http://www.trilulilu.ro/
http://www.microsoft.com/ro-ro/default.aspx
1899
521
1625
1397
720
107. Dr. Sabin Buragawww.purl.org/net/busaco
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
108. 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
Dr. Sabin Buragawww.purl.org/net/busaco
Alte reguli – mai ales în contextul Web-ului mobil:
115. o listă de numeroase alte instrumente și
tehnici de optimizare Web (Sam Saffron, 2012)
http://is.gd/web_perf_tools
de asemenea, a se consulta http://calendar.perfplanet.com/
Dr. Sabin Buragawww.purl.org/net/busaco
Evaluarea performanței aplicațiilor Web
116. optimizarea transferurilor de date via SSL/TLS
testare cu SSL Server Test
https://www.ssllabs.com/ssltest/
diverse tehnici de optimizare (Geoffroy Couprie, 2013)
Dr. Sabin Buragawww.purl.org/net/busaco
Alte strategii
http://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/
117. reducerea numărului de cookie-uri
Dr. Sabin Buragawww.purl.org/net/busaco
Alte strategii
118. 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.
Dr. Sabin Buragawww.purl.org/net/busaco
Alte strategii
http://calendar.perfplanet.com/2011/lossy-image-compression/
119. folosirea tehnicilor de încărcare asincronă
și de streaming
Dr. Sabin Buragawww.purl.org/net/busaco
Alte strategii
122. instrument de referință: Cuzillion
http://stevesouders.com/cuzillion/
Dr. Sabin Buragawww.purl.org/net/busaco
Studierea interacțiunii dintre componentele
JavaScript dintr-o pagină pentru a preîntâmpina
blocarea transferurilor
124. aspect de interes atunci când programele JavaScript
sunt interdependente
Dr. Sabin Buragawww.purl.org/net/busaco
Asigurarea/evitarea execuției script-urilor
într-o anumită ordine
126. recurgerea la tehnici de optimizare specifice
unei anumite biblioteci JavaScript
e.g., de studiat prezentarea lui Paul Irish,
jQuery Anti-Patterns for Performance & Compression:
http://slidesha.re/QsQFS
Dr. Sabin Buragawww.purl.org/net/busaco
Alte strategii
127. Douglas Crockford
Dr. Sabin Buragawww.purl.org/net/busaco
Optimizarea succede etapa de verificare
a corectitudinii codului
128. Dr. Sabin Buragawww.purl.org/net/busaco
Resurse suplimentare
Steve Souders, High Performance Web Sites, O’Reilly, 2007
Steve Souders, Even Faster Web Sites, O’Reilly, 2009
http://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/
130. testarea aplicațiilor în contextul ingineriei Web
securitatea – e.g., confidențialitatea
performanță versus utilizabilitate
Dr. Sabin Buragawww.purl.org/net/busaco
Aspecte de interes înrudite
134. dependent de factori precum:
utilizarea procesorului, reafișarea conținutului
(repainting), interpretarea și rularea codului JS,
traficul de rețea – inclusiv aspecte privind GPS
Dr. Sabin Buragawww.purl.org/net/busaco
Timpul de viață a bateriei
N.Thiagarajan et al., “Who Killed My Battery: Analyzing
Mobile Browser Energy Consumption”, WWW2012
www2012.wwwconference.org/proceedings/proceedings/p41.pdf
135. 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, script-uri JS (ale aplicației + adiționale), date
Dr. Sabin Buragawww.purl.org/net/busaco
Latența rețelei
136. î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
Dr. Sabin Buragawww.purl.org/net/busaco
“Scufundarea” unor resurse direct în HTML
vezi http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/
138. 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. Sabin Buragawww.purl.org/net/busaco
Optimizarea imaginilor
139. Dr. Sabin Buragawww.purl.org/net/busaco
Folosirea facilităților oferite de CSS
uzual, browser-ele dispozitivelor mobile
oferă 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 mare
140. reducerea numărului și reutilizarea de noduri
minimizarea operațiilor de manipulare a arborelui DOM
Dr. Sabin Buragawww.purl.org/net/busaco
Minimizarea arborelui DOM
141. Dr. Sabin Buragawww.purl.org/net/busaco
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
142. (Maximiliano Firtman, 2011)
limite, suport privind standardele Web,
existența instrumentelor de depanare,
utilizarea de proxy-uri aflate la distanță etc.
http://mobilehtml5.org/
Dr. Sabin Buragawww.purl.org/net/busaco
Eterogenitatea browser-elor mobile
143. R. Fioravanti, Building High Performance Mobile Web
Applications (2012): http://rjf-io2012.appspot.com/
prezentările conferințelor Velocity
velocityconf.com/velocity2013/public/schedule/proceedings
velocityconf.com/velocity2012/public/schedule/proceedings
Web Performance Today
www.webperformancetoday.com
Dr. Sabin Buragawww.purl.org/net/busaco
Studii de caz și alte resurse de interes:
144. 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/
Mobile Web Programming – www.mobilexweb.com/
Dr. Sabin Buragawww.purl.org/net/busaco
Instrumente vizând dezvoltarea
aplicațiilor Web mobile – exemplificări:
145. vezi și I. Zuzak, “The Web Engineer’s Online Toolbox”:
http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html
Dr. Sabin Buragawww.purl.org/net/busaco
Web Developer Checklist
http://webdevchecklist.com/