Overview: How to Measure your WebApp
-
Upload
chang-w-doh -
Category
Technology
-
view
383 -
download
0
description
Transcript of Overview: How to Measure your WebApp
![Page 1: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/1.jpg)
KIG-30th
Overview:
How to measureyour web app
Chang W. Doh,DaVinci S/W Lab
![Page 2: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/2.jpg)
In this talking, we'll discuss"Measuring"and some "Optimization"
![Page 3: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/3.jpg)
Why we should do that?
![Page 4: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/4.jpg)
There are many OptimizationChecklists on the web.
You already know or Just check them.
![Page 5: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/5.jpg)
But, "You can’t optimize whatyou can’t measure."
![Page 6: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/6.jpg)
Rendering Performance
![Page 7: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/7.jpg)
60 FPS = 1000ms / 60 frames= 16.666ms per frame
![Page 8: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/8.jpg)
Simplify: 60FPS means"We have only 16.7ms for each
frame."
![Page 9: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/9.jpg)
Check: "Rendering time >16ms"
![Page 10: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/10.jpg)
e.g. Chrome DevToolsTimelinecog > rendering
![Page 11: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/11.jpg)
What makes '> 16ms'Repaint Issues
Heavy CSS3 EffectsAnimation or Transition using heavy property
Manipulating DOM dynamicallyInsertion / Deletion
or translateZ(0);
...
Too much hack!
![Page 12: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/12.jpg)
Finally, <body> triggers layout & repaint.
Examplevar styleCache = document.body.style;
styleCache.padding = "20px"; // cause of layout, repaintstyleCache.border = "10px solid red"; // cause of layout, repaint
styleCache.color = "blue"; // cause of repaintstyleCache.backgroundColor = "#fad"; // cause of repaint
styleCache.fontSize = "2em"; // cause of layout, repaint
// new DOM element - cause of layout, repaintdocument.body.appendChild(document.createTextNode('LetItGo!'));
![Page 13: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/13.jpg)
Further Readings1. 2. 3. 4. 5. 6. 7. 8. (en)9. (en)
How Browsers WorksAccelerated Rendering in Chrome: The Layer ModelCSS Paint Time and Page Render WeightAvoiding Unnecessary PaintsAvoiding Unnecessary Paints: Animated GIF EditionHigh Performance AnimationAntialiasing 101HTML5 Techniques for Optimizing Mobile PerformancePerformance profiling with the Timeline
![Page 14: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/14.jpg)
Loading Performance
![Page 15: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/15.jpg)
Fast-loading means
![Page 16: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/16.jpg)
"Make everything less andsmaller"
Minimize HTTP/HTTPS RequestsMinify Assets: HTML, CSS, Script, Image, ...Make HTML within ~14KBReducing Cookie size Make AJAX Cacheable and Using GETGzipped...
![Page 17: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/17.jpg)
"and avoid blocking..."Put CSS at the TopScript at the Bottom...
![Page 18: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/18.jpg)
Check: Page Loading Overhead
![Page 19: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/19.jpg)
PageSpeed Insight
![Page 20: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/20.jpg)
http://goo.gl/cr6YzA
Web:
Extension:
http://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/insights_extensions
![Page 21: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/21.jpg)
YSlow
![Page 23: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/23.jpg)
Optimization Tools
![Page 24: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/24.jpg)
CSS MinifierCleanCSSCSSMinYUICSSTidySlimmerCSS Compressor
![Page 25: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/25.jpg)
JavaScript MinifierUglifyJSJSMinYUIrJSMinDojo ShrinkSafeAjax MinifierClosure
![Page 26: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/26.jpg)
Image OptimizerSmushIt.comPunyPNG.comPNGGauntlet for WindowsImage Optim for MacGenerate multi-resolution images for srcset with Grunt
![Page 27: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/27.jpg)
Further Readings1. 2. (en)3. 4. 5. (en)
Google Developer: Page Speed ToolsYSlow.orgText Compression for Web DevelopersImage Compression for Web DevelopersDeep dive into the murky waters of script loading
![Page 28: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/28.jpg)
Script Performance
![Page 29: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/29.jpg)
Chrome DevTools: Profiler
![Page 30: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/30.jpg)
Catch Peaks:Bottleneck Functions?
Up to you!Memory Usage
A way to Garbage Collection :)GC friendly code
![Page 31: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/31.jpg)
When you're using Canvas,Canvas Profile will rescue you.
![Page 32: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/32.jpg)
Further Readings1. (en)2. [huns.me]3. 4. 5. (en)6. (en)7. (OLD!, en)8. (en)9.
10. 11. (en)
Profiling JavaScript PerformanceECMA-262-3 in detailStatic Memory Javascript with Object PoolsPerformance Tips for JavaScript in V8Writing Fast, Memory-Efficient JavaScriptFaster JavaScript Memoization For Improved App. Perf.10 Javascript Performance Boosting TipsMake the Web Faster ArticlesOptimizing JavaScript codeCanvas Inspection using Chrome DevToolsJavaScript Memory Profiling
![Page 33: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/33.jpg)
Sometimes we need tomeasure programatically.
![Page 34: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/34.jpg)
Scripting Profiler & TimelineStarting Profiling & Timeline Recording function startProfiling() { console.timeline(); console.profile();}
Finishing function finishProfiling() { console.timelineEnd(); console.profileEnd();}
![Page 35: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/35.jpg)
Navigation Timing APIs
![Page 37: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/37.jpg)
!msec
1/1000ms!!!
![Page 38: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/38.jpg)
DOMHighResTimeStamp
![Page 39: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/39.jpg)
PerformanceTiming
Representing the moment, in miliseconds !
![Page 40: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/40.jpg)
window.performance.now()High Resolution Timestamp from 'NavigationStart'
(function() {
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> var timeout = 3000;</span><br>
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> var start = performance.now();</span><br>
console.log( "Code starts at " + start );
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> setTimeout( function() {</span><br>
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> </span><span> var end = performance.now();</span><span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"><br></span>
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> </span><span> console.log( "timeout 3sec at " + end );</span><span><br></span>
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> </span><span> console.log( "timeout callback delay : " + (end - start - </span><span>timeout</span><span>) + "msec" );</span>
<span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> }, </span><span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;">timeout</span><span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"> );</span><span style="font-family: monospace; font-size: 16.42036247253418px; font-style: normal; font-variant: normal;"><br></span>
})();
![Page 42: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/42.jpg)
performance.mark()Setting marks
window.performance.mark('ajax_loaded');
![Page 43: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/43.jpg)
performance.measure()Calculating measurements between marks
window.performance.measure( 'Ajax_Loading', 'ajaxStart', 'ajaxEnd');
![Page 44: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/44.jpg)
removing Marks &Measurements
Clearing marks & measurementswindow.peformance.clearMarks( 'nameOfMark');window.performance.clearMeasures('nameOfMeasurement');
<span style="font-family: monospace; font-size: 17px; font-style: normal; font-variant: normal;">window.peformance.clearMarks(); // clear allwindow.performance.clearMeasures(); // clear all</span><br>
![Page 45: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/45.jpg)
Retrieving Marks &Measurements
Getting entries// get 'mark' entrieswindow.performance.getEntriesByType('mark');// get 'measure' entrieswindow.performance.getEntriesByType('measure');// get entries by namewindow.performance.getEntriesByName('name');
![Page 46: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/46.jpg)
Sample Code
![Page 47: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/47.jpg)
XMLHttpRequestBasic code:
var myReq = new XMLHttpRequest();
myReq.open('GET', url, true);
<span style="font-family: monospace;">myReq.onload = function(e) {</span>
do_something(e.responseText);}
<span style="font-family: monospace;">myReq.send();</span>
<br>
![Page 48: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/48.jpg)
Adding User-timingvar reqCount = 0;
var myReq = new XMLHttpRequest();myReq.open('GET', url, true);myReq.onload = function(e) { window.performance.mark('mark_end_xhr'); reqCnt++; window.performance.measure('measure_xhr_' + reqCnt, 'mark_start_xhr', 'mark_end_xhr'); do_something(e.responseText);}window.performance.mark('mark_start_xhr');myReq.send();
![Page 49: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/49.jpg)
Dumpvar items = window.performance.getEntriesByType('measure');for (var i = 0; i < items.length(); ++i) { var req = items[i]; console.log('XHR ' + req.name + ' took ' + req.duration + 'ms');}
![Page 50: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/50.jpg)
Further Readings1. (en)2. (en)3.
W3C Spec.: Navigation TimingW3C Spec.: User TimingUser Timing API: Understanding your Web App
![Page 51: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/51.jpg)
Q&A
![Page 52: Overview: How to Measure your WebApp](https://reader034.fdocuments.us/reader034/viewer/2022051818/54b6cb544a7959b5318b4586/html5/thumbnails/52.jpg)
Thank you!