Overview: How to Measure your WebApp
•
10 likes•1,180 views
This slides's talking about basics of "measuring webapp" for optimization. - Rendering, Page Loading, Script Performance and Scripting Timeline/Profiling with Chrome DevTools. - Scripting for measuring performance using 'Navigation Timing' & 'User Timing'.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Overview: How to Measure your WebApp
Similar to Overview: How to Measure your WebApp (20)
More from Chang W. Doh
More from Chang W. Doh (20)
Recently uploaded
Recently uploaded (20)
Overview: How to Measure your WebApp
- 4. There are many Optimization Checklists on the web. You already know or Just check them.
- 11. What makes '> 16ms' Repaint Issues Heavy CSS3 Effects Animation or Transition using heavy property Manipulating DOM dynamically Insertion / Deletion or Too much hack! translateZ(0); ...
- 12. Example vrsyeah =dcmn.oysye a tlCce ouetbd.tl; syeah.adn ="0x;/ cueo lyu,rpit tlCcepdig 2p" / as f aot ean syeah.odr="0xsldrd;/ cueo lyu,rpit tlCcebre 1p oi e" / as f aot ean syeah.oo ="le;/ cueo rpit tlCceclr bu" / as f ean syeah.akrudoo ="fd;/ cueo rpit tlCcebcgonClr #a" / as f ean syeah.otie="e" / cueo lyu,rpit tlCcefnSz 2m; / as f aot ean / nwDMeeet-cueo lyu,rpit / e O lmn as f aot ean dcmn.oyapnCiddcmn.raeetoe'eIG!); ouetbd.pedhl(ouetcetTxNd(Ltto') Finally, <body> triggers layout & repaint.
- 13. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. How Browsers Works Accelerated Rendering in Chrome: The Layer Model CSS Paint Time and Page Render Weight Avoiding Unnecessary Paints Avoiding Unnecessary Paints: Animated GIF Edition High Performance Animation Antialiasing 101 HTML5 Techniques for Optimizing Mobile Performance (en) Performance profiling with the Timeline (en)
- 16. "Make everything less and smaller" Minimize HTTP/HTTPS Requests Minify Assets: HTML, CSS, Script, Image, ... Make HTML within ~14KB Reducing Cookie size Make AJAX Cacheable and Using GET Gzipped ...
- 17. "and avoid blocking..." Put CSS at the Top Script at the Bottom ...
- 21. YSlow
- 22. http://yslow.org
- 26. Image Optimizer SmushIt.com PunyPNG.com PNGGauntlet for Windows Image Optim for Mac Generate multi-resolution images for srcset with Grunt
- 27. Further Readings 1. 2. 3. 4. 5. Google Developer: Page Speed Tools YSlow.org (en) Text Compression for Web Developers Image Compression for Web Developers Deep dive into the murky waters of script loading (en)
- 30. Catch Peaks: Bottleneck Functions? Up to you! Memory Usage A way to Garbage Collection :) GC friendly code
- 31. When you're using Canvas, Canvas Profile will rescue you.
- 32. Further Readings 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Profiling JavaScript Performance (en) ECMA-262-3 in detail [huns.me] Static Memory Javascript with Object Pools Performance Tips for JavaScript in V8 Writing Fast, Memory-Efficient JavaScript (en) Faster JavaScript Memoization For Improved App. Perf. (en) 10 Javascript Performance Boosting Tips (OLD!, en) Make the Web Faster Articles (en) Optimizing JavaScript code Canvas Inspection using Chrome DevTools JavaScript Memory Profiling (en)
- 34. Scripting Profiler & Timeline Starting Profiling & Timeline Recording fnto satrfln( { ucin trPoiig) cnoetmln(; osl.ieie) cnoepoie) osl.rfl(; } Finishing fnto fnsPoiig){ ucin iihrfln( cnoetmlnEd) osl.ieien(; cnoepoien(; osl.rflEd) }
- 39. PerformanceTiming Representing the moment, in miliseconds !
- 40. window.performance.now() High Resolution Timestamp from 'NavigationStart' (ucin){ fnto( <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml cnoelg "oesat a "+sat) osl.o( Cd trs t tr ; <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml <pnsye"otfml:mnsae fn-ie 1.2327548x fn-tl:nra; sa tl=fn-aiy oopc; otsz: 64064231p; otsye oml }(; ))
- 41. User Timing
- 43. performance.measure() Calculating measurements between marks wno.efrac.esr( idwpromnemaue 'jxLaig, Aa_odn' 'jxtr' aaSat, 'jxn' aaEd ) ;
- 44. removing Marks & Measurements Clearing marks & measurements wno.eomnecerak('aefak) idwpfrac.laMrs nmOMr'; wno.efrac.laMaue(nmOMaueet) idwpromneceresrs'aefesrmn'; <pnsye"otfml:mnsae fn-ie 1p;fn-tl:nra;fn-ain:n sa tl=fn-aiy oopc; otsz: 7x otsye oml otvrat wno.efrac.laMaue(; / ceral/pn<r idwpromneceresrs) / la l<sa>b>
- 45. Retrieving Marks & Measurements Getting entries / gt'ak etis / e mr' nre wno.efrac.eEtisyye'ak) idwpromnegtnreBTp(mr'; / gt'esr'etis / e maue nre wno.efrac.eEtisyye'esr'; idwpromnegtnreBTp(maue) / gtetisb nm / e nre y ae wno.efrac.eEtisyae'ae) idwpromnegtnreBNm(nm';
- 46. Sample Code
- 47. XMLHttpRequest Basic code: vrmRq=nwXLtpeus(; a ye e MHtRqet) <r b> mRqoe(GT,ul tu) ye.pn'E' r, re; <pnsye"otfml:mnsae"mRqola =fnto(){/pn sa tl=fn-aiy oopc;>ye.nod ucine <sa> d_oehn(.epneet; osmtigersosTx) } <pnsye"otfml:mnsae"mRqsn(;/pn sa tl=fn-aiy oopc;>ye.ed)<sa>
- 48. Adding User-timing vrrqon =0 a eCut ; vrmRq=nwXLtpeus(; a ye e MHtRqet) mRqoe(GT,ul tu) ye.pn'E' r, re; mRqola =fnto(){ ye.nod ucine wno.efrac.ak'akedxr) idwpromnemr(mr_n_h'; rqn+; eCt+ wno.efrac.esr(mauexr'+rqn,'aksatxr,'akedxr) idwpromnemaue'esr_h_ eCt mr_tr_h' mr_n_h'; d_oehn(.epneet; osmtigersosTx) } wno.efrac.ak'aksatxr) idwpromnemr(mr_tr_h'; mRqsn(; ye.ed)
- 49. Dump vries=wno.efrac.eEtisyye'esr'; a tm idwpromnegtnreBTp(maue) fr(a i=0 i<ieslnt(;+i { o vr ; tm.egh) +) vrrq=iesi; a e tm[] cnoelg'H '+rqnm +'to '+rqdrto +'s) osl.o(XR e.ae ok e.uain m'; }
- 50. Further Readings 1. W3C Spec.: Navigation Timing (en) 2. W3C Spec.: User Timing (en) 3. User Timing API: Understanding your Web App
- 51. Q&A
- 52. Thank you!