JavaScript performance patterns
•Download as PPTX, PDF•
34 likes•7,989 views
http://www.frontendconf.ch/speakers/#speaker-6
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to JavaScript performance patterns
Similar to JavaScript performance patterns (20)
More from Stoyan Stefanov
More from Stoyan Stefanov (20)
Recently uploaded
Recently uploaded (20)
JavaScript performance patterns
- 1. JavaScript Performance Patterns @stoyanstefanov frontendconf.ch Sept 6, 2012
- 3. Importance of Performance http://bookofspeed.com
- 4. Importance of JavaScript Performance http://httparchive.org
- 5. // todo 1. Loading JavaScript 2. Runtime / UI / DOM + benchmarks + shims
- 8. Loading
- 9. 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
- 11. SPOF • Single point of failure • JS blocks http://phpied.com/3po-fail SPOF-O-Matic: https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg
- 12. Off the critical path
- 13. Asynchronous JS • <script defer> • <script async> • until then…
- 14. 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/
- 15. 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(); });
- 16. Unblocking onload • Async JS blocks window.onload in !IE • May or may not be a problem • There's a solution: FIF
- 17. <fif> frame-in-frame aka friendly frames aka this Meebo thing
- 18. FIF 1) create iframe src="js:false" 2) in the frame doc.write a <body onload … 3) …that loads JS
- 19. 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();
- 20. FIF • unblocks onload, but… • more complex • requires JS changes
- 21. your script (before) // fun with window // and document
- 22. your script (before) (function() { // fun with window // and document }());
- 23. FIF (after) (function(window) { var document = window.document; // fun with window // and document }(parent.window));
- 24. FIF in the wild • experimental support in FB JS SDK • http://jsbin.com/axibow/1/edit
- 25. </fif>
- 26. Load JS but not execute • Use cases: – preload in anticipation – lazy
- 27. Preload, then eventually execute 1. fetch the script, but don’t run it 2. run it at some point (same as async JS)
- 28. 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!
- 29. 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);
- 30. // todo 1. Loading JavaScript 2. Runtime / UI / DOM + benchmarks + shims
- 31. Benchmarks • Lies, damn lies and performance advice • Test the wrong thing • Measure the wrong thing • Even if not, still draw the wrong conclusions
- 32. Your first benchmark var start = new Date(); // loop 100000 times var took = new Date() – start;
- 33. Benchmark.js • by John-David Dalton • used in http://jsperf.com – calibrating the test – end time (ops/second) – statistical significance – margin of error
- 34. http://calendar.perfplanet.com/2010/bulletpro of-javascript-benchmarks/
- 35. Benchmarking browsers? No, thanks
- 36. Let's test!
- 37. String concat var text = ""; text += "moar"; vs. var parts = []; parts.push('moar'); var text = push.join(''); http://jsperf.com/join-concat/
- 38. String concat
- 39. The pen is mightier than the sword! * * Only if the sword is very small and the pen very sharp
- 40. "Don't A, B is so much faster!" You should check it again
- 41. Profiling
- 45. Picking battles
- 46. DOM
- 47. DOM • DOM is slow • How slow? • http://jsperf.com/touching/4
- 48. DOM // DOM div.innerHTML += 'a'; div.innerHTML += 'b'; // string var html = ''; html += 'a'; html += 'b'; div.innerHTML = html;
- 49. DOM
- 50. DOM + string concat • put things in perspective http://jsperf.com/touching/5
- 51. ECMAland DOMland
- 52. DOM • caching DOM references • caching length in collection loops • "offline" changes in document fragment • batch style changes • reducing reflows and repaints
- 53. 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;
- 54. data attributes <div data-stuff="convenient"></div> • div.dataset.stuff • div.getAttribute('data-stuff') • Data.get(div).stuff // DIY
- 55. 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]; } }; }();
- 56. data attributes
- 57. data attributes http://jsperf.com/data-dataset
- 59. 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
- 60. 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
- 61. jQuery: the most popular polyfill • not free (perf-wise) • do you need it?
- 62. Cost of parsing and evaluating http://calendar.perfplanet.com/2011/laz y-evaluation-of-commonjs-modules/
- 63. Cost of parsing and evaluating
- 64. Experiment: jQuery vs. Zepto What’s the cost of just dropping it on the page?
- 65. jsperf.com/zepto-jq-eval […]
- 68. 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)