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

performanța aplicațiilor Webla nivel de client

strategii pentru reducerea timpului de încărcare

“The pushy bird gets the worm.”

Sean Adams

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, 2007

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

decât timpul real de încărcare

Viteza de încărcare a conținutului – factor 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

Durata interacțiunii cu utilizatorulo aplicație Web – e.g., în special una cu caracter social –

poate persista timp îndelungat în browser

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 Javascript,minimizarea transferului de date provenite de la server,

Care este timpul de încărcare a unei pagini Web?

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

timpul de viață a unei pagini Webși atributele temporale de interes

Navigation Timing (recomandare W3C, decembrie 2012)www.w3.org/TR/navigation-timing/

Testarea performanțeidepinde de mai multe conditii:

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

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

starea cache-uluiplatforma hardware & software la momentul exploatării

teste concrete: www.webpagetest.org

Există reguli de îmbunătățire a performanțeiaplicațiilor Web la nivel de client?

Regula 1: reducerea numărului cererilor HTTP

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

implicații privind funcționalitatea + UX

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

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

detalii în articolul Dave Shea,CSS Sprites: Image Slicing’s Kiss of Death, 2004:

www.alistapart.com/articles/sprites

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

soluție:imagini stocate direct în URI

utilizarea schemei data (RFC 2397)

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

data:[tip] [;base64], date

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

tipulMIME

datelepropriu-zise

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)

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

atenție la problemele privind modularizareași refolosirea codului

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

CDN – arhitectura clasică (Akamai Technologies, 2007)

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

www.cdnplanet.com

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

probleme care nu sunt rezolvate:persistența conexiunilor, tranzacții, autentificare,

optimizări la nivel hardware,...

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)

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, 01 Feb 2014 09:33:00 GMT

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

în cache-ul local

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

Cache-Control: max-age=315360000

soluție alternativă:configurarea serverului Web

e.g., recurgerea la modulul Apache mod_expires

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/

Regula 4: compresarea conținutului resurselor

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

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

pentru navigatoarele Web care nu au suport pentru gzip,decompresia se poate realiza la nivel de proxy

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

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)

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

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)

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

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

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

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

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

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)

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

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

numărul de cereriproximitatea domeniului interogat

lărgimea de bandăetc.

soluție:

DNS caching

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

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

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ă

exemple de instrumente:JavaScript Optimizer, JSMin, Minify, Packer,

ShrinkSafe, YUI Compressor, UglifyJS

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,...)

soluție alternativă:JavaScript obfuscation

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

impedimente privind depanarea programelorreverse engineering

alte soluții:

compresare (e.g., gzip) + minimizare

folosirea script-urilor “scufundate” în pagini Web

modularizarea și/sau minimizarea foilor de stiluri CSS

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/

Regula 10: evitarea redirecționărilor

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

a browser-ului spre alt URL via HTTP

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)

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

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

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

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

pentru transferul cererilor de la un sit Web vechila unul actualizat

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.)

Regula 11: eliminarea script-urilor duplicate

soluție:implementarea unui mecanism de management

al încărcării programelor JavaScript

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 șabloanelor de redare – templating system

Regula 12: configurarea ETag-urilor

ETag (entity tag)

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

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

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-urile generate de Apache nu au același formatcu cele create de IIS

ETag (entity tag)

sfat (Souders, 2007):reconfigurarea ETag-urilor

astfel încât să recurgă la un format comun sau evitarea folosirii lor

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

strategie:minimizarea numărului de cereri HTTP asincrone

realizate via obiectul XMLHttpRequest

strategie:folosirea de formate compacte (XML vs. JSON)

și/sau a tehnicilor de compresie a datelor transferate

strategie:specificarea timpului de expirare a conținutului

se poate recurge la șablonul de proiectareBrowser-Side Cache

http://ajaxpatterns.org/Browser-Side_Cache

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

un exemplu demonstrativ lahttp://www.httpwatch.com/demos/ajax_caching/

Alte reguli de bună practică?

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

Regula 15: reducerea numărului de elemente DOM

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

și compararea cu alte pagini Web

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 1899http://www.ted.com/ 521http://www.reddit.com/r/programming 1625http://www.trilulilu.ro/ 1397http://www.microsoft.com/ro-ro/default.aspx 720

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

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

Care sunt instrumentele softwarepentru analizarea performanței la nivel de client?

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

Chrome Developer

instrumentele de analiză oferite de Mozilla Firefox

Firebug – raport privitor la timpii de încărcare

statistici privind arborele DOM oferite de DOM Monsterhttp://mir.aculo.us/dom-monster/

Evaluarea performanței aplicațiilor Web

o listă de numeroase alte instrumente șitehnici de optimizare Web (Sam Saffron, 2012)

http://is.gd/web_perf_tools

de asemenea, a se consulta http://calendar.perfplanet.com/

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/

Alte strategii

reducerea numărului de cookie-uri

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/

Alte strategii

folosirea tehnicilor de încărcare asincronăși de streaming

Ce aspecte vizează performanțaprogramelor JavaScript?

Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina

blocarea transferurilor

Studierea interacțiunii dintre componentele JavaScript dintr-o pagină pentru a preîntâmpina

blocarea transferurilor

instrument de referință: Cuzillionhttp://stevesouders.com/cuzillion/

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

aspect de interes atunci când programele JavaScriptsunt interdependente

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

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

Optimizarea succede etapa de verificarea corectitudinii codului

Douglas Crockford

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/

Resurse suplimentare

Browser Technologieshttp://platform.html5.org/

Front-end Code Standards & Best Practiceshttp://na.isobar.com/standards/

Aspecte de interes înrudite

testarea aplicațiilor în contextul ingineriei Web

securitatea – e.g., confidențialitatea

performanță versus utilizabilitate

Care-s principalele aspecte privind performanțaaplicațiilor ce rulează pe dispozitive mobile?

Standards for Web Applications on Mobilewww.w3.org/standards/techs/mobileapp

http://pinchzoom.com/posts/anatomy-of-a-html5-mobile-app/

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

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, script-uri JS (ale aplicației + adiționale), date

“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/

Minimizarea utilizării memoriei

aspect important: programele JavaScript

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/

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 mare

Minimizarea arborelui DOM

reducerea numărului și reutilizarea de noduriminimizarea operațiilor de manipulare a arborelui DOM

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

Eterogenitatea browser-elor mobile(Maximiliano Firtman, 2011)

limite, suport privind standardele Web,existența instrumentelor de depanare,

utilizarea de proxy-uri aflate la distanță etc.

http://mobilehtml5.org/

Studii de caz și alte resurse de interes:

R. Fioravanti, Building High Performance Mobile Web Applications (2012): http://rjf-io2012.appspot.com/

prezentările conferințelor Velocityvelocityconf.com/velocity2013/public/schedule/proceedings

velocityconf.com/velocity2012/public/schedule/proceedings

Web Performance Todaywww.webperformancetoday.com

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/

Mobile Web Programming – www.mobilexweb.com/

Web Developer Checklisthttp://webdevchecklist.com/

vezi și I. Zuzak, “The Web Engineer’s Online Toolbox”:http://ivanzuzak.info/2012/11/18/the-web-engineers-online-toolbox.html

episodul viitor: evaluarea proiectului (P)marți, 28 ianuarie, 09:00 – C308

Mult succes!

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

Technology

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

Fisa Client Proiect Finantari Europene.pdf

Stimate client, - BRD Pensii

Programa de studii 526 - Academia de Studii Economice din ... · (Platforma.NET), Programarea aplicaţiilor încorporate, Programarea aplicaţiilor distribuite, Medii interactive

Lista Prioripost Livrare Sediu Client

Alba Localitate Nume Client Adresa Telefon Tip Client...Alba Localitate Nume Client Adresa Telefon Tip Client Alba Iulia Universal Construct Market Str. Livezii, Nr. 35 A, Judetul

AUTOTESTAREA APLICAŢIILOR DE SCROLLING

Crearea aplicaţiilor consolă 1 - tuneam.files.wordpress.com · 1 Crearea aplicaţiilor consolă Pentru a realiza aplicaţii consolă (ca şi cele din Borland Pascal sau Borland

Dezvoltarea aplicațiilor Web (3/12): Arhitectura aplicaţiilor Web orientate spre servicii

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #1): Interacţiune Web: concepte, context, studii de caz

Bulgaria Nessebar Client

Avantaje client

MANUAL Client Multicash

· profit Efortul la nivel de costuri ale personalului de vanzare pentru a incheia, livra si incasa astfel de client este foarte mare, raportat la o realocare a acestuia pentru client

Fisa Client Pers. Fizice

Despre Client Service

Ghid Pentru Securizarea Aplicaţiilor Şi Serviciilor Web Cert Ro

Vanele motorizate inteligente rezolvă provocările aplicaţiilor ......Vanele motorizate inteligente rezolvă provocările aplicaţiilor dumneavoastră Pentru sisteme HVAC, de încălzire

Tema IX. Tehnologia Client Server

WADe 2014—2015 (03/12): Arhitectura aplicaţiilor Web orientate spre servicii

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #6): Căutarea resurselor Web