Optimising your JavaScript

Presented at ConFoo (http://confoo.ca/en/2014/session/optimising-your-javascript)

Transcript

1. optimising your javascript Wendy Liu February 26, 2014 :: ConFoo
2. BEFOre we begin ... Is optimisation even necessary?
3. IF SO ... What should you optimise?
4. PROFILING Chrome: bit.ly/chromeprofiler
5. tradeoffs Performance vs. readability
7. optimisation tips
8. faster code delivery Minimisation CDNs GZIP compression
9. event-handling Use a library Delegation
10. event-handling Use a library Delegation <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> ... </ul>
11. unnecessary work Don't do it Check before calling Throttle event-handling
12. speeding up code Native functions Combine timers Avoid anything eval-like
13. speeding up code Native functions Combine timers Avoid anything eval-like for (...) { element = $(...); ... }
14. speeding up code Native functions Combine timers Avoid anything eval-like for (...) { element = document.getElementById(...); ... }
15. speeding up code Native functions Combine timers Avoid anything eval-like setTimeout('someFunction', 1000); setTimeout(someFunction, 1000)
16. don't use: with try-catch in a loop globals for in
17. speeding up code Cache out of scope variables Cache array.length String-building Cache calculations someFunction = someObject.someFunction; for (...) { someFunction(...); }
18. speeding up code Cache out of scope variables Cache array.length String-building Cache calculations for (var i = 0, l = arr.length; i < l; i++) { ... }
19. speeding up code Cache out of scope variables Cache array.length String-building Cache calculations var stringBuilder = []; for (...) { stringBuilder.push('a'); } var string = stringBuilder.join('');
20. speeding up code Cache out of scope variables Cache array.length String-building Cache calculations
21. working with the dom Use CSS Keep it small (virtual rendering) Minimise reflows/repaints position: absolute; left: 50%; margin-left: -200px; width: 400px;
22. Minimising reflows innerHTML/$.html over creating nodes Batch setting styles Stay low in the DOM tree Detach/hide nodes
23. Minimising reflows Cache node properties Position: fixed/absolute for animations Avoid tables for layout
24. HEAVY frameworks Do you really need them?
25. caching AJAX requests Server-side scripts Client-side caching (localStorage)
26. using prototypes properly Functions Value-type instance variables var Person = function() {}; Person.prototype.doSomething = function(...) { ... }; var Person = function() { this.doSomething = function(...) { ... }; };
27. avoid closures Source of memory leaks Reuse static functions Adds level to scope chain
28. faking it Loading screens Thumbnail previews for images Pre-loading
29. more resources Google/Stackoverflow jsperf.com bit.ly/canvas-perf bit.ly/high-performance-js (book) bit.ly/google-optimising-js bit.ly/repaint-reflow bit.ly/chrome-profiler bit.ly/js-var-access
30. thanks! @dellsystem