JavaScript performance patterns

JavaScript Performance Patterns @stoyanstefanov frontendconf.ch Sept 6, 2012

JavaScript Performance Patterns

Importance of Performance http://bookofspeed.com

Importance of JavaScript Performance http://httparchive.org

// todo 1. Loading JavaScript 2. Runtime / UI / DOM + benchmarks + shims

First things first • reduce # of script files • gzip, shave 70% off • minify, extra 40-50% • Expires headers • CDN http://yslow.org PageSpeed http://webpagetest.org

SPOF • Single point of failure • JS blocks http://phpied.com/3po-fail SPOF-O-Matic: https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg

Asynchronous JS • <script defer> • <script async> • until then…

Dynamic script node var js = document.createElement('script'); js.src = 'http://cdn.com/my.js'; document.getElementsByTagName('head')[0].appendChild(js); http://calendar.perfplanet.com/2011/t he-art-and-craft-of-the-async-snippet/

But…, butt…, button? Q: <button onclick="…"? A: To hell with it Q: Dependencies? A: onload event and js.onreadystatechange load('jquery.js', 'mystuff.js', function () { mystuff.go(); });

Unblocking onload • Async JS blocks window.onload in !IE • May or may not be a problem • There's a solution: FIF

<fif> frame-in-frame aka friendly frames aka this Meebo thing

FIF 1) create iframe src="js:false" 2) in the frame doc.write a <body onload … 3) …that loads JS

FIF (snippet) var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="'+ 'var js = document.createElement('script');'+ 'js.src = 'http://example.org/js.js';'+ 'document.body.appendChild(js);">'); doc.close();

FIF • unblocks onload, but… • more complex • requires JS changes

your script (before) // fun with window // and document

your script (before) (function() { // fun with window // and document }());

FIF (after) (function(window) { var document = window.document; // fun with window // and document }(parent.window));

FIF in the wild • experimental support in FB JS SDK • http://jsbin.com/axibow/1/edit

Load JS but not execute • Use cases: – preload in anticipation – lazy

Preload, then eventually execute 1. fetch the script, but don’t run it 2. run it at some point (same as async JS)

Fetching • IE: dynamic script node, not in the DOM • All others: CORS (XHR2) – your CDN should let you specify Access-Control-Allow-Origin header or else!

Preload, then execute // preload var js = document.createElement('script'); if (!js.readyState || js.readyState !== 'uninitialized') { // non IE var xhr = new XMLHttpRequest(); if ('withCredentials' in xhr) { // XHR2 xhr.open('GET', url, false); xhr.send(null); } } js.src = url; // IE preloads! Thanks @getify // execute document.getElementsByTagName('head')[0].appendChild(js);

Benchmarks • Lies, damn lies and performance advice • Test the wrong thing • Measure the wrong thing • Even if not, still draw the wrong conclusions

Your first benchmark var start = new Date(); // loop 100000 times var took = new Date() – start;

Benchmark.js • by John-David Dalton • used in http://jsperf.com – calibrating the test – end time (ops/second) – statistical significance – margin of error

http://calendar.perfplanet.com/2010/bulletpro of-javascript-benchmarks/

Benchmarking browsers? No, thanks

String concat var text = ""; text += "moar"; vs. var parts = []; parts.push('moar'); var text = push.join(''); http://jsperf.com/join-concat/

The pen is mightier than the sword! * * Only if the sword is very small and the pen very sharp

"Don't A, B is so much faster!" You should check it again

DOM • DOM is slow • How slow? • http://jsperf.com/touching/4

DOM // DOM div.innerHTML += 'a'; div.innerHTML += 'b'; // string var html = ''; html += 'a'; html += 'b'; div.innerHTML = html;

DOM + string concat • put things in perspective http://jsperf.com/touching/5

DOM • caching DOM references • caching length in collection loops • "offline" changes in document fragment • batch style changes • reducing reflows and repaints

reflows getComputedStyle(), or currentStyle in IE bodystyle.color = 'red'; tmp = computed.backgroundColor; bodystyle.color = 'white'; tmp = computed.backgroundImage; bodystyle.color = 'green'; tmp = computed.backgroundAttachment; bodystyle.color = 'red'; bodystyle.color = 'white'; bodystyle.color = 'green'; tmp = computed.backgroundColor; tmp = computed.backgroundImage; tmp = computed.backgroundAttachment;

data attributes <div data-stuff="convenient"></div> • div.dataset.stuff • div.getAttribute('data-stuff') • Data.get(div).stuff // DIY

data attributes DIY var Data = function() { var warehouse = {}; var count = 1; return { set: function (dom, data) { if (!dom.__data) { dom.__data = "hello" + count++; } warehouse[dom.__data] = data; }, get: function(dom) { return warehouse[dom.__data]; } }; }();

data attributes http://jsperf.com/data-dataset

Shims • pick the smaller/optimized one • one that uses native where available * • load conditionally e.g. JSON is non-native only for 8% of users *, why load shim 100% of the time * http://html5please.us

Fast ECMAScript5 natives? • JDD: "browsers optimize loops because of benchmarks" • http://jsperf.com/native-for-loop-vs-array- foreach-and-array-map-vs-lodas/2

jQuery: the most popular polyfill • not free (perf-wise) • do you need it?

Cost of parsing and evaluating http://calendar.perfplanet.com/2011/laz y-evaluation-of-commonjs-modules/

Cost of parsing and evaluating

Experiment: jQuery vs. Zepto What’s the cost of just dropping it on the page?

jsperf.com/zepto-jq-eval […]

In closure… • JS off the critical path (async, lazy, preload) • Practice writing jsperf.com tests ("jsperf URL or it didn't happen!") • Don't touch the DOM (remember the bridge) • Use the tools (Timeline, CPU/heap profiler, SpeedTracer, Dynatrace) • Think of poor mobile (easy with the shims)

Thank you! http://slideshare.net/stoyan/

JavaScript performance patterns

More Related Content

What's hot

Viewers also liked

Similar to JavaScript performance patterns

More from Stoyan Stefanov

Recently uploaded

JavaScript performance patterns