1 / 43

Programarea Clientului Web

Programarea Clientului Web. s.l. dr. ing. Simona Caraiman mailto : sarustei@cs.tuiasi.ro. Universitatea Tehnica “ Gh. Asachi ” din Iasi Facultatea de Automatica si Calculatoare. Client side performance. Client-side performance.

afya
Download Presentation

Programarea Clientului Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programarea Clientului Web s.l. dr. ing. Simona Caraiman mailto: sarustei@cs.tuiasi.ro Universitatea Tehnica “Gh. Asachi” din Iasi Facultatea de Automatica si Calculatoare

  2. Client side performance C10-Client Side Performance

  3. Client-side performance • majoritatea site-urilorutilizeaza Ajax siscripturi JavaScript complexepentru a creaaplicatii RIA • procesarea client-side dureazamaimulttimpdecatprocesarea server-side (Steve Souders/Google) • numai10-20% din timpul total de raspunsperceput de end-user esteconsumat cu transferuldocumentului HTML in browser C10-Client Side Performance

  4. Performance tips • modul in care estescriscodulaplicatieiweb are o influentadramaticaasupraperformantelor • Google - Web Performance Best Practices • Yahoo - Best Practices for Speeding Up Your Web Site • Steve Souders - 14 Rules for Faster-Loading Web Sites C10-Client Side Performance

  5. Instrumente • de analiza si profiling • browser specific • Firefox - Firebug/PageSpeed, YSlow • Chrome – Speed Tracer • Safari/Chrome – Timeline tab • IE - dynaTrace • Navigation Timing – • W3C Recom. (Dec. 2012) • http://www.w3.org/TR/navigation-timing/ • defines an interface for web applications to access timing information related to navigation and elements. C10-Client Side Performance

  6. Performance best practices Performantad.p.d.v. al clientului web • Page load time = timpulscursintremomentul in care userul face o cererept o nouapaginasimomentul in care paginaesteafisatacomplet de browser C10-Client Side Performance

  7. Performance best practices • Pasiimplicati in page load time: • rezolutianumelor DNS • setareaconexiunilor TCP • transmitereacererilor HTTP • descarcarearesurselor • aducerearesurselor din cache • parsareasiexecutia script-urilor • randareaobiectelor in pagina • Imbunatatireaperformantelor: • eliminareaunorpasi • paralelizarealor • scurtareatimpuluinecesarexecutiei C10-Client Side Performance

  8. Optimizarea incarcarii paginilor • Optimizarea cache-ului • mentinerea datelor si logicii aplicatiei ‘off the network’ • Minimizarea timpilor dus-intors (RTT - round-trip times • reducerea numarului de cicluri seriale cerere-raspuns • Minimizarea intarzierilor asociate cererilor • reducerea dimensiunii upload-ului • Minimizarea dimensiunii incarcarii • reducerea dimensiunilor raspunsurilor, download-urilor si a paginilor stocate in cache • Optimizarea randarii in browser • imbunatatirea layout-ului paginii • Optimizarea pt mobile • ajustarea unui site tinand cont de caracteristicile retelelor si device-urilor mobile C10-Client Side Performance

  9. Optimizarea cache-ului • mentinerea datelor si logicii aplicatiei ‘off the network’ • resurse care se modifica rar: fisiere CSS, imagini, fisiere JS • solutie – HTTP caching (browser/proxy) • Reducerea RTT (eliminarea cererilor HTTP corespunzatoare) • Reducerea substantiala a dimensiunii totale a payload-ului C10-Client Side Performance

  10. Optimizarea cache-ului • Browser caching – resurse statice • setarea headerelor HTTP corespunzatoare (Expires/Cache-Control max-age, Last-Modified/Etag) C10-Client Side Performance

  11. Optimizarea cache-ului • Browser caching – resurse care se modifica ocazional • dynamic caching – fingerprinting • resursa este pastrata in cache-ul browser-ului pana cand se modifica pe server, serverul instiinteaza browser-ul despre disponibilitatea unei noi versiuni • incorporarea in URL (i.e. file path) a unui fingerprint al resursei • schimbarea resursei => schimbarea amprentei => schimbarea URL-ului => browserul este fortat sa acceseze resursa pe server C10-Client Side Performance

  12. Optimizarea cache-ului • Browser caching – resurse care se modifica ocazional • dynamic caching – fingerprinting • resursa este pastrata in cache-ul browser-ului pana cand se modifica pe server, serverul instiinteaza browser-ul despre disponibilitatea unei noi versiuni • incorporarea in URL (i.e. file path) a unui fingerprint al resursei • schimbarea resursei => schimbarea amprentei => schimbarea URL-ului => browserul este fortat sa acceseze resursa pe server Expires– 1 an dupa efectuarea cererii Last-Modified – data la care fisierul a fost modificat Cache-Control: max-age – 31536000 C10-Client Side Performance

  13. Optimizarea cache-ului • Proxy caching – resurse statice • Directiva HTTP Cache-Control public • nu se include un query string in URL-urile resurselor statice • multe proxy-uri nu stocheaza resurse continand “?” in URL • resurse care seteaza cookies • Cache-Control private C10-Client Side Performance

  14. Optimizarea cache-ului • Proxy caching – resurse statice • probleme la stocarea fisierelor CSS si JS • servirea resurselor comprimate catre browsere ce nu pot face dezarhivarea corespunzatoare (bug-uri ale proxy-urilor ce nu detecteaza headerul Content-Encoding) • Solutii: • pt. aplicatii multi-homed (se bazeaza mai putin pe proxy-caching): setarea Cache-Control: private • pt. aplicatii singly-homed: setarea Vary: Accept-Encoding (proxy-ul va stoca 2 versiuni ale resursei, una comprimata si una necomprimata) C10-Client Side Performance

  15. Minimizarea RTT • RTT (Round-trip Time) • timpul necesar pt trimiterea cererii de catre client si timpul necesar serverului sa trimita un raspuns • NU include timpul asociat transferului datelor (nu depinde de bandwidth) • Ex.:initierea unui conexiuni browser-server = 3 RTTs (1 RTT – rezolutia DNS, 1 RTT – setarea conexiunii TCP, 1 RTT – cererea HTTP + primul byte al raspunsului) • 1 RTT = <1ms (LAN) ÷ >1s • factor principal al latentei in cazul conexiunilor rapide/download fisiere de mici dimens. C10-Client Side Performance

  16. Minimizarea RTT • Minimizareainterogarilor DNS • Minimizarearedirectarilor • Evitareacererilorgresite (erori 404/410) • Combinareafisierelor JS externe • Combinareaimaginilorcolosind CSS sprites • Optimizareaordinii de legare a fisierelor de stilsi a scripturilor • Evitareadocument.write • Evitarea CSS @import • Paralelizarea download-urilorfolosinddomenii multiple C10-Client Side Performance

  17. Minimizarea RTT • Minimizareainterogarilor DNS • In teorie: o interogare DNS = 1RTT • In practica: • dacainregistrarea din cache-ulserverului DNS esteexpirataestenecesaratraversareamaimultornoduri din ierarhia DNS • validitateauneiinregistrari DNS este data de valoarea TTL (time-to-live) • in multecazuriestefoarte mica (5min-24h) ptshiftarearapida a traficului in caz de blocaje in retea C10-Client Side Performance

  18. Minimizarea RTT • Minimizarea interogarilor DNS • minimizarea nr. de hostname-uri diferite de unde se face download de resurse • numar optim de hostname-uri: 1-5 (1 host principal + 4 hosturi pt. paralelizarea dowload-ului resurselor) • utilizarea de cai URL in loc de hostname (www.example.com/developer in loc de developer.example.com) • minimizarea interogarilor in ‘critical path’ • deservirea fisierelor JS externe necesare randarii initiale a paginii de pe acelasi domeniu ca si pagina C10-Client Side Performance

  19. Minimizarea RTT • Combinarea fisierelor JS externe • Partitionarea codului JS => aplicatii web modulare, componente reutilizabile DAR, • importarea separata a modulelor in HTML => download-uri secventiale • Partitionarea optimala a fisierelor JS: 2 fisiere • 1 fisier – codul JS minimal necesar randarii paginii la startup • 1 fisier – codul JS care nu este necesar inainte de terminarea incarcarii paginii C10-Client Side Performance

  20. Minimizarea RTT • Combinareafisierelor JS externe • deservirea de cat maiputinefisiere JS din sectiunea<head>, si de dimensiune cat mai mica. • deservireaunui JS asociatuneicomponenterarvizitatedintr-un fisierseparat • fisierulva fi servitdoar at. candcomponentaesteceruta de user • cod JS micce nu tb. pastrat in cache -> inline • pozitionareacorecta a script-urilor in headeruldocumentului (maximizarea download-urilorparalele) C10-Client Side Performance

  21. Minimizarea RTT • Combinareafisierelor JS externe • deservirea de cat maiputinefisiere JS din sectiunea<head>, si de dimensiune cat mai mica. • deservireaunui JS asociatuneicomponenterarvizitatedintr-un fisierseparat (fisierulva fi servitdoar at. candcomponentaesteceruta de user) • code JS micce nu tb. pastrat in cache -> inline • pozitionareacorecta a script-urilor in headeruldocumentului (maximizarea download-urilorparalele) C10-Client Side Performance

  22. Minimizarea RTT • Amanarea incarcarii functiilor JS care nu sunt apelate la startup • majoritatea aplicatiilor script-intensive utilizeaza cod JS in principal pt tratarea evenimentelor utilizator • APAR DUPA INCARCAREA PAGINII (dupa lansarea onload) • se identifica functiile JS neutilizate inainte de onload • pt mai mult de 25 de functii – se muta intr-un fisier JS separat • se insereaza un event listener in head-ul html ce forteaza fisierul extern sa fie incarcat dupa onload C10-Client Side Performance

  23. Minimizarea RTT • Amanarea incarcarii functiilor JS care nu sunt apelate la startup: <script type="text/javascript"> // Add a script element as a child of the body function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "deferredfunctions.js"; document.body.appendChild(element); } // Check for browser support of event handling capability if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> C10-Client Side Performance

  24. Minimizarea RTT • Combinarea fisierelor CSS externe • partitionarea codului CSS in 2 fisiere: • 1fisier - codul CSS minimal pt. randarea paginii la startup • 1 fisier – codul CSS necesar dupa incarcarea paginii • deservirea unui CSS asociat unei componente rar vizitate dintr-un fisier separat • fisierul va fi servit doar at. cand componenta este ceruta de user • regulile CSS ce nu tb. pastrate in cache -> inline • evitarea utilizarii CSS @import dintr-un fisier CSS • browser-ul nu poate downloada fisierele in paralel C10-Client Side Performance

  25. Minimizarea RTT • Combinarea imaginilor folosind CSS sprites • combinarea imaginilor incarcate in aceeasi pagina • combinarea imaginilor cu durata mare de caching • combinarea imaginilor mici • combinarea imaginilor cu palete de culoare similare • Spriting service: SpriteMe C10-Client Side Performance

  26. Minimizarea RTT • Combinarea imaginilor folosind CSS sprites • Ex.: 2 imagini 50x50 .megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;} .smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;} … <div class="megaphone"></div> <div class="megaphone"></div> C10-Client Side Performance

  27. Minimizarea RTT • Combinarea imaginilor folosind CSS sprites C10-Client Side Performance

  28. Minimizarea RTT • Optimizareaordinii de legare a fisierelor de stilsi a scripturilor • codul JS poatemodificacontinutulsilayoutulpaginii => download-ul, parsareasiexecutiascripturilorblocheazarandareapaginiisi download-ulresurselorreferitedupa script • dacaaltefisieresunt in curs de download in momentulintalniriiuneireferinte la cod JS, acestaestedownloadat in paralel C10-Client Side Performance

  29. Minimizarea RTT <head><link rel="stylesheet" type="text/css" href="stylesheet1.css" /><script type="text/javascript" src="scriptfile1.js" /><script type="text/javascript" src="scriptfile2.js" /><link rel="stylesheet" type="text/css" href="stylesheet2.css" /><link rel="stylesheet" type="text/css" href="stylesheet3.css" /></head> C10-Client Side Performance

  30. Minimizarea RTT <head> <link rel="stylesheet" type="text/css" href="stylesheet1.css" /> <link rel="stylesheet" type="text/css" href="stylesheet2.css" /> <link rel="stylesheet" type="text/css" href="stylesheet3.css" /> <script type="text/javascript" src="scriptfile1.js" /> <script type="text/javascript" src="scriptfile2.js" /> </head> C10-Client Side Performance

  31. Minimizarea RTT • Incarcareaasincrona a resurselor • la parsareaunui tag script browser-ulblocheazarandareacodului HTML pana la terminarea download-ului, parsariisiexecutiei • Solutie: script incarcatasincron • estedownloadatasap • executiaesteamanata cat timp thread-ul UI al browser-uluiesteocupat (cu randareapaginii) • resursele care nu suntnecesare la afisareainitiala a paginii (ex. tracking/analytics) C10-Client Side Performance

  32. Minimizarea RTT • Incarcareaasincrona a resurselor • atributulasync(HTML5) <script> var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = 'example.js'; // Now insert the node into the DOM, perhaps using insertBefore() …… </script> C10-Client Side Performance

  33. Minimizarea RTT • Incarcareaasincrona a resurselor • script tag - asyncvsdefer (HTML5) C10-Client Side Performance

  34. Minimizarea RTT • Paralelizarea download-urilorfolosinddomenii multiple • Spec. HTTP/1.1: browsereleartrebuisapermitacelmult 2 conexiuniconcurenteper hostname • Ex.: 4 conexiuni conc./hostname, pagina HTML cu referinte la 100 resurse de pe un acelasidomeniu => • page load time = 25 RTTs (1 RTT ptfiecare 4 resurse) • Servirea resurselor de pe hostname-uri multiple => maimulteconexiuniparalele • Atentie! introducerea de RTT aditionaleptsetareanoilorconexiuni TCP, latentedatorateinterogarilor DNS ptclienti cu cache gol • 2-5 host-uri, pt. maimult de 10 resurse C10-Client Side Performance

  35. Minimizarea RTT • Paralelizarea download-urilorfolosinddomenii multiple • Spec. HTTP/1.1: browsereleartrebuisapermitacelmult 2 conexiuniconcurenteper hostname • Ex.: 4 conexiuni conc./hostname, pagina HTML cu referinte la 100 resurse de pe un acelasidomeniu => • page load time = 25 RTTs (1 RTT ptfiecare 4 resurse) • Servirea resurselor de pe hostname-uri multiple => maimulteconexiuniparalele • Atentie! introducerea de RTT aditionaleptsetareanoilorconexiuni TCP, latentedatorateinterogarilor DNS ptclienti cu cache gol • 2-5 host-uri, pt. maimult de 10 resurse C10-Client Side Performance

  36. Minimizarea overhead-ului cererii • La trimitereauneicereri HTTP clientultrimitetoate cookie-urileasociatedomeniuluisicaii respective • Conexiuni Internet asimetrice (upload-to-download bandwidth ratio 1:4 - 1:20) • Minimizareadimensiuniicererii • 1 pachet (aprox.1500B) • dimensmediecookie < 400B C10-Client Side Performance

  37. Minimizarea overhead-ului cererii • Servirea continutului static de pe un domeniu ‘cookieless’ • continutul static (imagini, JS, CSS) nu necesita cookies • pt. > 5 resurse statice • Ex. Google News/Code serveste continut static de pe www.gstatic.com C10-Client Side Performance

  38. Minimizarea overhead-ului cererii • Servirea continutului static de pe un domeniu ‘cookieless’ • continutul static (imagini, JS, CSS) nu necesita cookies • pt. > 5 resurse statice • Ex. Google News/Code serveste continut static de pe www.gstatic.com C10-Client Side Performance

  39. Minimizarea overhead-ului cererii • Servirea continutului static de pe un domeniu ‘cookieless’ • continutul static (imagini, JS, CSS) nu necesita cookies • pt. > 5 resurse statice • Ex. Google News/Code serveste continut static de pe www.gstatic.com C10-Client Side Performance

  40. Minimizarea incarcarii • Activareacompresiei • Content-Encoding gzip/deflate • doarptresursemaimari de 150-1000 bytes • apare overhead sidatoritacompresiei/decompresiei • eficientizareacompresiei • asiguraticonsistenta in codul HTML si CSS • specificati in aceeasiordine (ex. alfabetica) • perechile CSS key-value • atributeleelementelor HTML • consistent casing and quoting • nu utilizatigzip pt. imaginisaualtefisierebinare • suntdejacomprimate C10-Client Side Performance

  41. Minimizarea incarcarii • Inlaturareacodului CSS nefolosit • randareapaginiiesteblocatapana la terminareadownloadariisiparsariifoii/foilor de stil • motorul CSS al browser-uluievalueazatoateregulile din fisierulcurent pt. a decide care se aplicapaginiicurente • Recomandare: impartireacodului CSS extern in maimultefisierespecificefiecareipagini a unui site web • Compactareacodului JS/CSS/HTML • eliminareaoctetilorinutili (spatii, indentare) • permiteincarcareamairapida a codului • permiteeficientizareacompresiei • Instrumente de compactare: ClosureCompiler, JSMin, YUICompressor, C10-Client Side Performance

  42. Minimizarea incarcarii • Amanareaincarcarii JS • Functii JS care nu suntapelate la startup • Optimizareaimaginilor • taiereaspatiuluiinutil (crop), reducereaadancimiiculorilor, inlaturarecomentarii, salvareintr-un format potrivit (PNG/GIF/JPEG) • instrumente: GIMP • compresiasuplimentara, farapierderi, a imaginilor JPEG si PNG • instrumente: jpegtran, jpegoptim, OptiPNG, PNGOUT C10-Client Side Performance

  43. Minimizarea incarcarii • Scalarea imaginilor • La afisarea unei imagini cu diferite dimensiuni • Ex. imagine 250x250 + thumbnail 10x10 • evitarea descarcarii a doua imagini • servirea unei singure imagini la cea mai mare dimensiune utilizata in pagina + utilizarea HTML + CSS pentru scalare C10-Client Side Performance

More Related