Overview: How to Measure your WebApp
-
Upload
chang-w-doh -
Category
Technology
-
view
384 -
download
0
description
Transcript of Overview: How to Measure your WebApp
KIG-30th
Overview:
How to measureyour web app
Chang W. Doh,DaVinci S/W Lab
In this talking, we'll discuss"Measuring"and some "Optimization"
Why we should do that?
There are many OptimizationChecklists on the web.
You already know or Just check them.
But, "You can’t optimize whatyou can’t measure."
Rendering Performance
60 FPS = 1000ms / 60 frames= 16.666ms per frame
Simplify: 60FPS means"We have only 16.7ms for each
frame."
Check: "Rendering time >16ms"
e.g. Chrome DevToolsTimelinecog > rendering
What makes '> 16ms'Repaint Issues
Heavy CSS3 EffectsAnimation or Transition using heavy property
Manipulating DOM dynamicallyInsertion / Deletion
or translateZ(0);
...
Too much hack!
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!'));
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
Loading Performance
Fast-loading means
"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...
"and avoid blocking..."Put CSS at the TopScript at the Bottom...
Check: Page Loading Overhead
PageSpeed Insight
http://goo.gl/cr6YzA
Web:
Extension:
http://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/insights_extensions
YSlow
http://yslow.org
Optimization Tools
CSS MinifierCleanCSSCSSMinYUICSSTidySlimmerCSS Compressor
JavaScript MinifierUglifyJSJSMinYUIrJSMinDojo ShrinkSafeAjax MinifierClosure
Image OptimizerSmushIt.comPunyPNG.comPNGGauntlet for WindowsImage Optim for MacGenerate multi-resolution images for srcset with Grunt
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
Script Performance
Chrome DevTools: Profiler
Catch Peaks:Bottleneck Functions?
Up to you!Memory Usage
A way to Garbage Collection :)GC friendly code
When you're using Canvas,Canvas Profile will rescue you.
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
Sometimes we need tomeasure programatically.
Scripting Profiler & TimelineStarting Profiling & Timeline Recording function startProfiling() { console.timeline(); console.profile();}
Finishing function finishProfiling() { console.timelineEnd(); console.profileEnd();}
Navigation Timing APIs
High Resolution Time
!msec
1/1000ms!!!
DOMHighResTimeStamp
PerformanceTiming
Representing the moment, in miliseconds !
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>
})();
User Timing
performance.mark()Setting marks
window.performance.mark('ajax_loaded');
performance.measure()Calculating measurements between marks
window.performance.measure( 'Ajax_Loading', 'ajaxStart', 'ajaxEnd');
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>
Retrieving Marks &Measurements
Getting entries// get 'mark' entrieswindow.performance.getEntriesByType('mark');// get 'measure' entrieswindow.performance.getEntriesByType('measure');// get entries by namewindow.performance.getEntriesByName('name');
Sample Code
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>
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();
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');}
Further Readings1. (en)2. (en)3.
W3C Spec.: Navigation TimingW3C Spec.: User TimingUser Timing API: Understanding your Web App
Q&A
Thank you!