52
KIG-30th Overview: How to measure your web app Chang W. Doh, DaVinci S/W Lab

Overview: How to Measure your WebApp

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Overview: How to Measure your WebApp

KIG-30th

Overview:

How to measureyour web app

Chang W. Doh,DaVinci S/W Lab

Page 2: Overview: How to Measure your WebApp

In this talking, we'll discuss"Measuring"and some "Optimization"

Page 3: Overview: How to Measure your WebApp

Why we should do that?

Page 4: Overview: How to Measure your WebApp

There are many OptimizationChecklists on the web.

You already know or Just check them.

Page 5: Overview: How to Measure your WebApp

But, "You can’t optimize whatyou can’t measure."

Page 6: Overview: How to Measure your WebApp

Rendering Performance 

Page 7: Overview: How to Measure your WebApp

60 FPS = 1000ms / 60 frames= 16.666ms per frame

Page 8: Overview: How to Measure your WebApp

Simplify: 60FPS means"We have only 16.7ms for each

frame."

Page 9: Overview: How to Measure your WebApp

Check: "Rendering time >16ms"

Page 10: Overview: How to Measure your WebApp

e.g. Chrome DevToolsTimelinecog > rendering

Page 11: Overview: How to Measure your WebApp

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

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

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

Loading Performance 

Page 15: Overview: How to Measure your WebApp

Fast-loading means

Page 16: Overview: How to Measure your WebApp

"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

"and avoid blocking..."Put CSS at the TopScript at the Bottom...

Page 18: Overview: How to Measure your WebApp

Check: Page Loading Overhead

Page 19: Overview: How to Measure your WebApp

PageSpeed Insight

Page 20: Overview: How to Measure your WebApp

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

 YSlow

Page 22: Overview: How to Measure your WebApp

http://yslow.org

Page 23: Overview: How to Measure your WebApp

Optimization Tools

Page 26: Overview: How to Measure your WebApp

Image OptimizerSmushIt.comPunyPNG.comPNGGauntlet for WindowsImage Optim for MacGenerate multi-resolution images for srcset with Grunt

Page 27: Overview: How to Measure your WebApp

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

Script Performance

Page 29: Overview: How to Measure your WebApp

Chrome DevTools: Profiler

Page 30: Overview: How to Measure your WebApp

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

When you're using Canvas,Canvas Profile will rescue you.

Page 32: Overview: How to Measure your WebApp

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

Sometimes we need tomeasure programatically.

Page 34: Overview: How to Measure your WebApp

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

Navigation Timing APIs

Page 36: Overview: How to Measure your WebApp

High Resolution Time

Page 37: Overview: How to Measure your WebApp

!msec

1/1000ms!!!

Page 38: Overview: How to Measure your WebApp

DOMHighResTimeStamp

Page 39: Overview: How to Measure your WebApp

PerformanceTiming

Representing the moment, in miliseconds !

Page 40: Overview: How to Measure your WebApp

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

performance.mark()Setting marks

window.performance.mark('ajax_loaded');

Page 43: Overview: How to Measure your WebApp

performance.measure()Calculating measurements between marks

window.performance.measure( 'Ajax_Loading', 'ajaxStart', 'ajaxEnd');

Page 44: Overview: How to Measure your WebApp

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

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

Sample Code

Page 47: Overview: How to Measure your WebApp

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

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

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

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

Q&A

Page 52: Overview: How to Measure your WebApp

Thank you!