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

6. None

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