strategii pentru reducerea timpului de încărcare

Dr. Sabin Buragawww.purl.org/net/busaco

performanța aplicațiilor Web
l...
Sean Adams

Dr. Sabin Buragawww.purl.org/net/busaco

“The pushy bird gets the worm.”
minim 80% din timpul de răspuns perceput
la nivelul clientului este dat de încărcarea
componentelor adiționale ale unei pa...
Dr. Sabin Buragawww.purl.org/net/busaco

Modul în care utilizatorul percepe încărcarea
paginii este considerat mai import...
dificultăți în găsirea parametrilor potriviți
– lungimea codului (HTML, CSS, JS), timpul de execuție
a programelor JS, man...
o aplicație Web – e.g., în special una cu caracter social –
poate persista timp îndelungat în browser

Dr. Sabin Buragaww...
Dr. Sabin Buragawww.purl.org/net/busaco

Care este timpul de încărcare a unei pagini Web?
Dr. Sabin Buragawww.purl.org/net/busaco

“viața” unei pagini Web (Stoyan Stefanov)
www.bookofspeed.com
Navigation Timing (recomandare W3C, decembrie 2012)
www.w3.org/TR/navigation-timing/

Dr. Sabin Buragawww.purl.org/net/bu...
depinde de mai multe conditii:
statutul utilizatorului – autentificat sau nu
rata de modificare în timp-real a conținutulu...
Dr. Sabin Buragawww.purl.org/net/busaco

teste concrete:
www.webpagetest.org
Dr. Sabin Buragawww.purl.org/net/busaco

Există reguli de îmbunătățire a performanței
aplicațiilor Web la nivel de client...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 1: reducerea numărului cererilor HTTP
nu presupune diminuarea componentelor unei pagini
(foi de stil, imagini, script-uri,...)

implicații privind funcționalit...
soluție:
CSS sprites
folosirea unei imagini unice
ce va include mai multe zone grafice ce pot fi “decupate”
și utilizate p...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 1: reducerea numărului cererilor HTTP
soluție:
CSS sprites
se recurge la proprietăți CSS
precum background-position, margin-left, margin-right etc.

Dr. Sabin B...
soluție:
CSS sprites
detalii în articolul Dave Shea,
CSS Sprites: Image Slicing’s Kiss of Death, 2004:
www.alistapart.com/...
soluție:
CSS sprites
tehnici + exemplificări:
http://css-tricks.com/css-sprites/

Dr. Sabin Buragawww.purl.org/net/busaco...
soluție:
imagini stocate direct în URI
utilizarea schemei data (RFC 2397)

“inclusion of small data items as ‘immediate’ d...
soluție:
imagini stocate direct în URI
data:[tip] [;base64], date

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 1: red...
soluție:
imagini stocate direct în URI
data:[tip] [;base64], date

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

datele
pr...
soluție:
reunirea mai multor fișiere CSS/JavaScript
fișierele CSS sau JavaScript multiple pot fi combinate
într-un singur ...
soluție:
reunirea mai multor fișiere CSS/JavaScript
atenție la problemele privind modularizarea
și refolosirea codului

Dr...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 2: folosirea unei rețele de distribuție
a conținutului (Content Distribut...
CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea ...
CDN – Content Distribution Network
colecție de servere Web distribuite geografic pentru a
asigura mai eficient rezolvarea ...
Dr. Sabin Buragawww.purl.org/net/busaco

CDN – arhitectura clasică (Akamai Technologies, 2007)
CDN – Content Distribution Network
arhitectura client-server vs. peer-to-peer vs. hibridă
www.cdnplanet.com

Dr. Sabin Bur...
CDN – Content Distribution Network
livrarea de conținut static:
imagini, script-uri, foi de stiluri, multimedia

Dr. Sabin...
CDN – Content Distribution Network
probleme care nu sunt rezolvate:
persistența conexiunilor, tranzacții, autentificare,
o...
CDN – Content Distribution Network
probleme care nu sunt rezolvate:
persistența conexiunilor, tranzacții, autentificare,
o...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 3: setarea timpului de expirare a paginii
soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 3: setare...
soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat c...
soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
indică browser-ului/proxy-ului
dacă trebuie reîmprospătat c...
soluție:
folosirea câmpului Expires în antetul unui mesaj HTTP
stabilirea unui timp în viitor va determina păstrarea
pe pe...
soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP

Dr. Sabin Buragawww.pu...
soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP
specificarea perioadei d...
soluție:
controlul politicii de actualizare a cache-ului
via Cache-Control – câmp în antetul HTTP

Cache-Control: max-age=...
soluție alternativă:
configurarea serverului Web
e.g., recurgerea la modulul Apache mod_expires

Dr. Sabin Buragawww.purl...
observație:
valoarea campului Expires e absolută (dată de calendar),
iar timpul max-age de păstrare în cache este relativ
...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 4: compresarea conținutului resurselor
soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client

Dr. Sabin Buragawww.p...
soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client

pot fi compresate în s...
soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client

evident, compresarea t...
soluție:
mesajul de răspuns HTTP poate fi transmis compresat
(de pildă, folosind gzip) spre client

pentru navigatoarele W...
Dr. Sabin Buragawww.purl.org/net/busaco

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 trebu...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 6: plasarea script-urilor la finalul paginii
context:
download-urile paralele
timpul de răspuns este dat de numărul de componente
dintr-o pagină (fiecare generând o ce...
context:
download-urile paralele
navigatoarele Web limitează numărul de download-uri
paralele per domeniu al sitului Web (...
context:
download-urile paralele
script-urile JavaScript blochează
transferul paralel al altor resurse
(programul ar putea...
cel mai nefavorabil caz:
script-urile sunt plasate la începutul documentului

Dr. Sabin Buragawww.purl.org/net/busaco

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

Dr. Sabin Buragawww.purl.org/net/busaco

Regul...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 7: fișierele JavaScript/CSS externe
deși programele/stilurile specificate direct (inline)
în cadrul documentului HTML sunt procesate mai rapid,
fișierele exte...
deși programele/stilurile specificate direct (inline)
în cadrul documentului HTML sunt procesate mai rapid,
fișierele exte...
soluția “optimă” depinde de context:
totalul vizualizărilor paginii (page views)
starea cache-ului – empty cache vs. prime...
tehnici:
post-onload download
dacă pagina principală are cele mai multe vizite,
programele JavaScript și stilurile CSS se ...
tehnici:
dynamic inlining
dacă detectăm că o componentă există deja în cache-ul
browser-ului, putem stabili care fragmente...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 8: reducerea cererilor de rezolvare
a domeniilor (DNS lookups)
realitate:
fiecare cerere realizată de navigatorul Web
pentru rezolvarea unui nume simbolic de domeniu
în vederea obțineri...
timpul de răspuns depinde de:
resolver-ul DNS
numărul de cereri
proximitatea domeniului interogat
lărgimea de bandă
etc.

...
soluție:

DNS caching

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 8: reducerea cererilor de rezolvare
a domeniilor (...
constatare:
păstrarea în cache-ul DNS local (la nivel de client)
a perechii <domeniu simbolic, adresa IP>
depinde de timpu...
soluție:
utilizarea câmpului Keep-Alive într-un antet HTTP
pentru minimizarea cererilor de tip DNS lookups

Dr. Sabin Bura...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 9: reducerea mărimii fișierelor JavaScript
soluție:
JavaScript minification

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 9: reducerea mărimii fișierelor JavaScr...
soluție:
JavaScript minification

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 9: reducerea mărimii fișierelor JavaScr...
soluție:
JavaScript minification
exemple de instrumente:
JavaScript Optimizer, JSMin, Minify, Packer,
ShrinkSafe, YUI Comp...
soluție alternativă:
JavaScript obfuscation
tehnică de optimizare care elimină atât comentariile și
spațiile albe, cât res...
soluție alternativă:
JavaScript obfuscation
pericole:
apariția erorilor, dificultatea mentenanței codului,
impedimente pri...
alte soluții:
compresare (e.g., gzip) + minimizare
folosirea script-urilor “scufundate” în pagini Web

modularizarea și/sa...
pentru detalii, de studiat articolele
N. Zakas, Better JavaScript Minification, 2010:
www.alistapart.com/articles/better-j...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 10: evitarea redirecționărilor
realitate:
existența mai multor tehnici de redirecționare
a browser-ului spre alt URL via HTTP

Dr. Sabin Buragawww.purl....
300 Multiple Choices (pe baza câmpului Content-Type)
301 Moved Permanently
302 Moved Temporarily
303 See Other (clarificar...
soluții clasice:
la nivel de server – via câmpul-antet HTTP Location
la client – folosind elementul HTML
<meta http-equiv=...
deoarece implică unele cereri HTTP suplimentare,
redirecționările au impact asupra timpului de răspuns

Dr. Sabin Buragaw...
rezolvări:
adăugarea caracterului / la finalul unui URL
pentru a preîntâmpina redirecționările de tip 301
soluții tehnolog...
rezolvări:
folosirea mod_rewrite (Apache) sau
alias-urilor de domenii simbolice
pentru transferul cererilor de la un sit W...
rezolvări:
monitorizarea traficului,
pentru a detecta redirecționările frecvente
(inclusiv cele via servicii de scurtare a...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 11: eliminarea script-urilor duplicate
soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript

Dr. Sabin Buragawww.purl.org/net...
soluție:
implementarea unui mecanism de management
al încărcării programelor JavaScript

de exemplu, via sistemul de aplic...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 12: configurarea ETag-urilor
ETag (entity tag)
mecanism HTTP ce permite serverelor și clienților Web
să valideze componentele stocate în cache

Dr. Sab...
ETag (entity tag)
versiunea (starea) unei componente – aici, entitate –
a paginii Web este identificată unic via un ETag
p...
ETag (entity tag)
nu există un mecanism standardizat de specificare,
deoarece se bazează pe atribute dependente de server
...
ETag (entity tag)
nu există un mecanism standardizat de specificare,
deoarece se bazează pe atribute dependente de server
...
ETag (entity tag)
sfat (Souders, 2007):
reconfigurarea ETag-urilor
astfel încât să recurgă la un format comun
sau evitarea...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 13: păstrarea în cache
a datelor transferate asincron
strategie:
minimizarea numărului de cereri HTTP asincrone
realizate via obiectul XMLHttpRequest

Dr. Sabin Buragawww.purl...
strategie:
folosirea de formate compacte (XML vs. JSON)
și/sau a tehnicilor de compresie a datelor transferate

Dr. Sabin ...
strategie:
specificarea timpului de expirare a conținutului

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 13: păstrare...
se poate recurge la șablonul de proiectare
Browser-Side Cache
http://ajaxpatterns.org/Browser-Side_Cache

Dr. Sabin Buraga...
atenție la problemele vizând confidențialitatea datelor!

Dr. Sabin Buragawww.purl.org/net/busaco

Regula 13: păstrarea î...
un exemplu demonstrativ la
http://www.httpwatch.com/demos/ajax_caching/

Dr. Sabin Buragawww.purl.org/net/busaco

Regula ...
Dr. Sabin Buragawww.purl.org/net/busaco

Alte reguli de bună practică?
Dr. Sabin Buragawww.purl.org/net/busaco

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...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 15: reducerea numărului de elemente DOM
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 15: reducerea numărului de elemente DOM
determinarea elementelor dintr-un...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 15: reducerea numărului de elemente DOM
câteva exemple (statistici la 14 ...
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 16: divizarea componentelor între domenii
Dr. Sabin Buragawww.purl.org/net/busaco

Regula 16: divizarea componentelor între domenii
efect: maximizarea transferuril...
preîncărcarea (condiționată ori anticipată) a resurselor
minimizarea accesului la arborele DOM
mărimea necompresată a unei...
Dr. Sabin Buragawww.purl.org/net/busaco

Care sunt instrumentele software
pentru analizarea performanței la nivel de clie...
PageSpeed Tools
https://developers.google.com/speed/pagespeed/
YSlow
http://developer.yahoo.com/performance/

HTTP Archive...
Dr. Sabin Buragawww.purl.org/net/busaco

Chrome
Developer
Tools
Dr. Sabin Buragawww.purl.org/net/busaco

instrumentele de analiză oferite de Mozilla Firefox
Dr. Sabin Buragawww.purl.org/net/busaco

Firebug – raport privitor la timpii de încărcare
Dr. Sabin Buragawww.purl.org/net/busaco

statistici privind arborele DOM oferite de DOM Monster
http://mir.aculo.us/dom-m...
o listă de numeroase alte instrumente și
tehnici de optimizare Web (Sam Saffron, 2012)
http://is.gd/web_perf_tools
de asem...
optimizarea transferurilor de date via SSL/TLS
testare cu SSL Server Test
https://www.ssllabs.com/ssltest/
diverse tehnici...
reducerea numărului de cookie-uri

Dr. Sabin Buragawww.purl.org/net/busaco

Alte strategii
optimizarea (reducerea calității) resurselor multimedia:
imagini JPEG și/sau PNG, fișiere audio și/sau video,
fonturi, ani...
folosirea tehnicilor de încărcare asincronă
și de streaming

Dr. Sabin Buragawww.purl.org/net/busaco

Alte strategii
Dr. Sabin Buragawww.purl.org/net/busaco

Ce aspecte vizează performanța
programelor JavaScript?
Dr. Sabin Buragawww.purl.org/net/busaco

Studierea interacțiunii dintre componentele
JavaScript dintr-o pagină pentru a p...
instrument de referință: Cuzillion
http://stevesouders.com/cuzillion/

Dr. Sabin Buragawww.purl.org/net/busaco

Studierea...
Dr. Sabin Buragawww.purl.org/net/busaco

Asigurarea/evitarea execuției script-urilor
într-o anumită ordine
aspect de interes atunci când programele JavaScript
sunt interdependente

Dr. Sabin Buragawww.purl.org/net/busaco

Asigur...
Dr. Sabin Buragawww.purl.org/net/busaco

Evitarea dispersării script-urilor “scufundate”
în documentul HTML (don’t scatte...
recurgerea la tehnici de optimizare specifice
unei anumite biblioteci JavaScript

e.g., de studiat prezentarea lui Paul Ir...
Douglas Crockford

Dr. Sabin Buragawww.purl.org/net/busaco

Optimizarea succede etapa de verificare
a corectitudinii codu...
Dr. Sabin Buragawww.purl.org/net/busaco

Resurse suplimentare

Steve Souders, High Performance Web Sites, O’Reilly, 2007
...
Browser Technologies
http://platform.html5.org/
Front-end Code Standards & Best Practices
http://na.isobar.com/standards/
...
testarea aplicațiilor în contextul ingineriei Web

securitatea – e.g., confidențialitatea
performanță versus utilizabilita...
Dr. Sabin Buragawww.purl.org/net/busaco

Care-s principalele aspecte privind performanța
aplicațiilor ce rulează pe dispo...
Dr. Sabin Buragawww.purl.org/net/busaco

Standards for Web Applications on Mobile
www.w3.org/standards/techs/mobileapp
Dr. Sabin Buragawww.purl.org/net/busaco

http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/
dependent de factori precum:
utilizarea procesorului, reafișarea conținutului
(repainting), interpretarea și rularea codul...
viteza ~ percepție a încărcării

vitezele de transfer (download + upload) variază
ca și în cazul aplicațiilor Web tradițio...
în cazul Web-ului mobil, pot apărea îmbunătățiri de
performanță dacă stilurile CSS și programele JavaScript
sunt incluse î...
Minimizarea utilizării memoriei
Dr. Sabin Buragawww.purl.org/net/busaco

aspect important: programele JavaScript
posibilă soluție:
redimensionarea dinamică a imaginilor
via servicii externe (proxy-uri Web) precum Sencha

www.sencha.com...
Dr. Sabin Buragawww.purl.org/net/busaco

Folosirea facilităților oferite de CSS

uzual, browser-ele dispozitivelor mobile...
reducerea numărului și reutilizarea de noduri
minimizarea operațiilor de manipulare a arborelui DOM

Dr. Sabin Buragawww....
Dr. Sabin Buragawww.purl.org/net/busaco

Interacțiunea cu utilizatorul

navigatoarele Web mobile folosesc un unic fir de ...
(Maximiliano Firtman, 2011)
limite, suport privind standardele Web,
existența instrumentelor de depanare,
utilizarea de pr...
R. Fioravanti, Building High Performance Mobile Web
Applications (2012): http://rjf-io2012.appspot.com/
prezentările confe...
W3C mobileOK Checker – http://validator.w3.org/mobile/
jQuery Mobile – http://jquerymobile.com/
Sencha Touch – http://www....
vezi și I. Zuzak, “The Web Engineer’s Online Toolbox”:
http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.h...
Dr. Sabin Buragawww.purl.org/net/busaco

episodul viitor: evaluarea proiectului (P)
marți, 28 ianuarie, 09:00 – C308
Mult succes!
Dr. Sabin Buragawww.purl.org/net/busaco


Upcoming SlideShare
Loading in …5
×

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #13): Performanţa aplicaţiilor Web la nivel de client

675 views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
675
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #13): Performanţa aplicaţiilor Web la nivel de client

  1. 1. strategii pentru reducerea timpului de încărcare Dr. Sabin Buragawww.purl.org/net/busaco performanța aplicațiilor Web la nivel de client
  2. 2. Sean Adams Dr. Sabin Buragawww.purl.org/net/busaco “The pushy bird gets the worm.”
  3. 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 Buragawww.purl.org/net/busaco Constatare performance golden rule – 80/20
  4. 4. Dr. Sabin Buragawww.purl.org/net/busaco Modul în care utilizatorul percepe încărcarea paginii este considerat mai important decât timpul real de încărcare
  5. 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 Buragawww.purl.org/net/busaco Viteza de încărcare a conținutului – factor major în evaluarea relevanței unui sit Web
  6. 6. o aplicație Web – e.g., în special una cu caracter social – poate persista timp îndelungat în browser Dr. Sabin Buragawww.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, ...
  7. 7. Dr. Sabin Buragawww.purl.org/net/busaco Care este timpul de încărcare a unei pagini Web?
  8. 8. Dr. Sabin Buragawww.purl.org/net/busaco “viața” unei pagini Web (Stoyan Stefanov) www.bookofspeed.com
  9. 9. Navigation Timing (recomandare W3C, decembrie 2012) www.w3.org/TR/navigation-timing/ Dr. Sabin Buragawww.purl.org/net/busaco timpul de viață a unei pagini Web și atributele temporale de interes
  10. 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 Buragawww.purl.org/net/busaco Testarea performanței
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco teste concrete: www.webpagetest.org
  12. 12. Dr. Sabin Buragawww.purl.org/net/busaco Există reguli de îmbunătățire a performanței aplicațiilor Web la nivel de client?
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  14. 14. nu presupune diminuarea componentelor unei pagini (foi de stil, imagini, script-uri,...)  implicații privind funcționalitatea + UX Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  15. 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 Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  16. 16. Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  17. 17. soluție: CSS sprites se recurge la proprietăți CSS precum background-position, margin-left, margin-right etc. Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  18. 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 Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  19. 19. soluție: CSS sprites tehnici + exemplificări: http://css-tricks.com/css-sprites/ Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  20. 20. soluție: imagini stocate direct în URI utilizarea schemei data (RFC 2397) “inclusion of small data items as ‘immediate’ data” Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  21. 21. soluție: imagini stocate direct în URI data:[tip] [;base64], date Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  22. 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 Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  23. 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 Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  24. 24. soluție: reunirea mai multor fișiere CSS/JavaScript atenție la problemele privind modularizarea și refolosirea codului Dr. Sabin Buragawww.purl.org/net/busaco Regula 1: reducerea numărului cererilor HTTP
  25. 25. Dr. Sabin Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  26. 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 Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  27. 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 Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  28. 28. Dr. Sabin Buragawww.purl.org/net/busaco CDN – arhitectura clasică (Akamai Technologies, 2007)
  29. 29. CDN – Content Distribution Network arhitectura client-server vs. peer-to-peer vs. hibridă www.cdnplanet.com Dr. Sabin Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  30. 30. CDN – Content Distribution Network livrarea de conținut static: imagini, script-uri, foi de stiluri, multimedia Dr. Sabin Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  31. 31. CDN – Content Distribution Network probleme care nu sunt rezolvate: persistența conexiunilor, tranzacții, autentificare, optimizări la nivel hardware,... Dr. Sabin Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  32. 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 Buragawww.purl.org/net/busaco Regula 2: folosirea unei rețele de distribuție a conținutului (Content Distribution Network)
  33. 33. Dr. Sabin Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  34. 34. soluție: folosirea câmpului Expires în antetul unui mesaj HTTP Dr. Sabin Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  35. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  36. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  37. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  38. 38. soluție: controlul politicii de actualizare a cache-ului via Cache-Control – câmp în antetul HTTP Dr. Sabin Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  39. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  40. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  41. 41. soluție alternativă: configurarea serverului Web e.g., recurgerea la modulul Apache mod_expires Dr. Sabin Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  42. 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 Buragawww.purl.org/net/busaco Regula 3: setarea timpului de expirare a paginii
  43. 43. Dr. Sabin Buragawww.purl.org/net/busaco Regula 4: compresarea conținutului resurselor
  44. 44. soluție: mesajul de răspuns HTTP poate fi transmis compresat (de pildă, folosind gzip) spre client Dr. Sabin Buragawww.purl.org/net/busaco Regula 4: compresarea conținutului resurselor
  45. 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 Buragawww.purl.org/net/busaco Regula 4: compresarea conținutului resurselor
  46. 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 Buragawww.purl.org/net/busaco Regula 4: compresarea conținutului resurselor
  47. 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 Buragawww.purl.org/net/busaco Regula 4: compresarea conținutului resurselor
  48. 48. Dr. Sabin Buragawww.purl.org/net/busaco Regula 5: plasarea foilor CSS în antetul paginii
  49. 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 Buragawww.purl.org/net/busaco Regula 5: plasarea foilor CSS în antetul paginii
  50. 50. Dr. Sabin Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  51. 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 Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  52. 52. context: download-urile paralele navigatoarele Web limitează numărul de download-uri paralele per domeniu al sitului Web (2—6 transferuri) Dr. Sabin Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  53. 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 Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  54. 54. cel mai nefavorabil caz: script-urile sunt plasate la începutul documentului Dr. Sabin Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  55. 55. cel mai favorabil caz: script-urile sunt inserate la finalul documentului Dr. Sabin Buragawww.purl.org/net/busaco Regula 6: plasarea script-urilor la finalul paginii
  56. 56. Dr. Sabin Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  57. 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 Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  58. 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 Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  59. 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 Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  60. 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 Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  61. 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 Buragawww.purl.org/net/busaco Regula 7: fișierele JavaScript/CSS externe
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  63. 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 Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  64. 64. timpul de răspuns depinde de: resolver-ul DNS numărul de cereri proximitatea domeniului interogat lărgimea de bandă etc. Dr. Sabin Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  65. 65. soluție: DNS caching Dr. Sabin Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  66. 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 Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  67. 67. soluție: utilizarea câmpului Keep-Alive într-un antet HTTP pentru minimizarea cererilor de tip DNS lookups Dr. Sabin Buragawww.purl.org/net/busaco Regula 8: reducerea cererilor de rezolvare a domeniilor (DNS lookups)
  68. 68. Dr. Sabin Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  69. 69. soluție: JavaScript minification Dr. Sabin Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  70. 70. soluție: JavaScript minification Dr. Sabin Buragawww.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. 71. soluție: JavaScript minification exemple de instrumente: JavaScript Optimizer, JSMin, Minify, Packer, ShrinkSafe, YUI Compressor, UglifyJS Dr. Sabin Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  72. 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 Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  73. 73. soluție alternativă: JavaScript obfuscation pericole: apariția erorilor, dificultatea mentenanței codului, impedimente privind depanarea programelor reverse engineering Dr. Sabin Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  74. 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 Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  75. 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 Buragawww.purl.org/net/busaco Regula 9: reducerea mărimii fișierelor JavaScript
  76. 76. Dr. Sabin Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  77. 77. realitate: existența mai multor tehnici de redirecționare a browser-ului spre alt URL via HTTP Dr. Sabin Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  78. 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 Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  79. 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 Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  80. 80. deoarece implică unele cereri HTTP suplimentare, redirecționările au impact asupra timpului de răspuns Dr. Sabin Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  81. 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 Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  82. 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 Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  83. 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 Buragawww.purl.org/net/busaco Regula 10: evitarea redirecționărilor
  84. 84. Dr. Sabin Buragawww.purl.org/net/busaco Regula 11: eliminarea script-urilor duplicate
  85. 85. soluție: implementarea unui mecanism de management al încărcării programelor JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Regula 11: eliminarea script-urilor duplicate
  86. 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 Buragawww.purl.org/net/busaco Regula 11: eliminarea script-urilor duplicate
  87. 87. Dr. Sabin Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  88. 88. ETag (entity tag) mecanism HTTP ce permite serverelor și clienților Web să valideze componentele stocate în cache Dr. Sabin Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  89. 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 Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  90. 90. ETag (entity tag) nu există un mecanism standardizat de specificare, deoarece se bazează pe atribute dependente de server Dr. Sabin Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  91. 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 Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  92. 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 Buragawww.purl.org/net/busaco Regula 12: configurarea ETag-urilor
  93. 93. Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  94. 94. strategie: minimizarea numărului de cereri HTTP asincrone realizate via obiectul XMLHttpRequest Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  95. 95. strategie: folosirea de formate compacte (XML vs. JSON) și/sau a tehnicilor de compresie a datelor transferate Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  96. 96. strategie: specificarea timpului de expirare a conținutului Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  97. 97. se poate recurge la șablonul de proiectare Browser-Side Cache http://ajaxpatterns.org/Browser-Side_Cache Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  98. 98. atenție la problemele vizând confidențialitatea datelor! Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  99. 99. un exemplu demonstrativ la http://www.httpwatch.com/demos/ajax_caching/ Dr. Sabin Buragawww.purl.org/net/busaco Regula 13: păstrarea în cache a datelor transferate asincron
  100. 100. Dr. Sabin Buragawww.purl.org/net/busaco Alte reguli de bună practică?
  101. 101. Dr. Sabin Buragawww.purl.org/net/busaco Regula 14: folosirea metodei GET pentru cereri Ajax
  102. 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 Buragawww.purl.org/net/busaco Regula 14: folosirea metodei GET pentru cereri Ajax
  103. 103. Dr. Sabin Buragawww.purl.org/net/busaco Regula 15: reducerea numărului de elemente DOM
  104. 104. Dr. Sabin Buragawww.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. 105. Dr. Sabin Buragawww.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
  106. 106. Dr. Sabin Buragawww.purl.org/net/busaco Regula 16: divizarea componentelor între domenii
  107. 107. Dr. Sabin Buragawww.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. 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 Buragawww.purl.org/net/busaco Alte reguli – mai ales în contextul Web-ului mobil:
  109. 109. Dr. Sabin Buragawww.purl.org/net/busaco Care sunt instrumentele software pentru analizarea performanței la nivel de client?
  110. 110. PageSpeed Tools https://developers.google.com/speed/pagespeed/ YSlow http://developer.yahoo.com/performance/ HTTP Archive – http://httparchive.org/ HttpWatch – www.httpwatch.com Dr. Sabin Buragawww.purl.org/net/busaco Evaluarea performanței aplicațiilor Web
  111. 111. Dr. Sabin Buragawww.purl.org/net/busaco Chrome Developer Tools
  112. 112. Dr. Sabin Buragawww.purl.org/net/busaco instrumentele de analiză oferite de Mozilla Firefox
  113. 113. Dr. Sabin Buragawww.purl.org/net/busaco Firebug – raport privitor la timpii de încărcare
  114. 114. Dr. Sabin Buragawww.purl.org/net/busaco statistici privind arborele DOM oferite de DOM Monster http://mir.aculo.us/dom-monster/
  115. 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 Buragawww.purl.org/net/busaco Evaluarea performanței aplicațiilor Web
  116. 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 Buragawww.purl.org/net/busaco Alte strategii http://unhandledexpression.com/2013/01/25/5-easy-tips-to-accelerate-ssl/
  117. 117. reducerea numărului de cookie-uri Dr. Sabin Buragawww.purl.org/net/busaco Alte strategii
  118. 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 Buragawww.purl.org/net/busaco Alte strategii http://calendar.perfplanet.com/2011/lossy-image-compression/
  119. 119. folosirea tehnicilor de încărcare asincronă și de streaming Dr. Sabin Buragawww.purl.org/net/busaco Alte strategii
  120. 120. Dr. Sabin Buragawww.purl.org/net/busaco Ce aspecte vizează performanța programelor JavaScript?
  121. 121. Dr. Sabin Buragawww.purl.org/net/busaco Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina blocarea transferurilor
  122. 122. instrument de referință: Cuzillion http://stevesouders.com/cuzillion/ Dr. Sabin Buragawww.purl.org/net/busaco Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina blocarea transferurilor
  123. 123. Dr. Sabin Buragawww.purl.org/net/busaco Asigurarea/evitarea execuției script-urilor într-o anumită ordine
  124. 124. aspect de interes atunci când programele JavaScript sunt interdependente Dr. Sabin Buragawww.purl.org/net/busaco Asigurarea/evitarea execuției script-urilor într-o anumită ordine
  125. 125. Dr. Sabin Buragawww.purl.org/net/busaco Evitarea dispersării script-urilor “scufundate” în documentul HTML (don’t scatter inline scripts)
  126. 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 Buragawww.purl.org/net/busaco Alte strategii
  127. 127. Douglas Crockford Dr. Sabin Buragawww.purl.org/net/busaco Optimizarea succede etapa de verificare a corectitudinii codului
  128. 128. Dr. Sabin Buragawww.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/
  129. 129. Browser Technologies http://platform.html5.org/ Front-end Code Standards & Best Practices http://na.isobar.com/standards/ Dr. Sabin Buragawww.purl.org/net/busaco Resurse suplimentare
  130. 130. testarea aplicațiilor în contextul ingineriei Web securitatea – e.g., confidențialitatea performanță versus utilizabilitate Dr. Sabin Buragawww.purl.org/net/busaco Aspecte de interes înrudite
  131. 131. Dr. Sabin Buragawww.purl.org/net/busaco Care-s principalele aspecte privind performanța aplicațiilor ce rulează pe dispozitive mobile?
  132. 132. Dr. Sabin Buragawww.purl.org/net/busaco Standards for Web Applications on Mobile www.w3.org/standards/techs/mobileapp
  133. 133. Dr. Sabin Buragawww.purl.org/net/busaco http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/
  134. 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 Buragawww.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. 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 Buragawww.purl.org/net/busaco Latența rețelei
  136. 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 Buragawww.purl.org/net/busaco “Scufundarea” unor resurse direct în HTML vezi http://calendar.perfplanet.com/2011/mobile-ui-performance-considerations/
  137. 137. Minimizarea utilizării memoriei Dr. Sabin Buragawww.purl.org/net/busaco aspect important: programele JavaScript
  138. 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 Buragawww.purl.org/net/busaco Optimizarea imaginilor
  139. 139. Dr. Sabin Buragawww.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. 140. reducerea numărului și reutilizarea de noduri minimizarea operațiilor de manipulare a arborelui DOM Dr. Sabin Buragawww.purl.org/net/busaco Minimizarea arborelui DOM
  141. 141. Dr. Sabin Buragawww.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șteptareoferirea de feedback vizual se poate recurge la API-uri specifice standardizate: http://www.w3.org/standards/techs/js
  142. 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 Buragawww.purl.org/net/busaco Eterogenitatea browser-elor mobile
  143. 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 Buragawww.purl.org/net/busaco Studii de caz și alte resurse de interes:
  144. 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 Buragawww.purl.org/net/busaco Instrumente vizând dezvoltarea aplicațiilor Web mobile – exemplificări:
  145. 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 Buragawww.purl.org/net/busaco Web Developer Checklist http://webdevchecklist.com/
  146. 146. Dr. Sabin Buragawww.purl.org/net/busaco episodul viitor: evaluarea proiectului (P) marți, 28 ianuarie, 09:00 – C308
  147. 147. Mult succes! Dr. Sabin Buragawww.purl.org/net/busaco 

×