Optimising your JavaScript

Transcript

1. 1.

   optimising your javascript Wendy Liu February 26, 2014 :: ConFoo

2. 2.

   BEFOre we begin ... Is optimisation even necessary?

3. 3.

   IF SO ... What should you optimise?

4. 4.

   PROFILING Chrome: bit.ly/chromeprofiler

5. 5.

   tradeoffs Performance vs. readability

6. 6.

   None
7. 7.

   optimisation tips

8. 8.

   faster code delivery Minimisation CDNs GZIP compression

9. 9.

   event-handling Use a library Delegation

10. 10.

    event-handling Use a library Delegation <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li>

    ... </ul>
11. 11.

    unnecessary work Don't do it Check before calling Throttle event-handling

12. 12.

    speeding up code Native functions Combine timers Avoid anything eval-like

13. 13.

    speeding up code Native functions Combine timers Avoid anything eval-like

    for (...) { element = $(...); ... }
14. 14.

    speeding up code Native functions Combine timers Avoid anything eval-like

    for (...) { element = document.getElementById(...); ... }
15. 15.

    speeding up code Native functions Combine timers Avoid anything eval-like

    setTimeout('someFunction', 1000); setTimeout(someFunction, 1000)
16. 16.

    don't use: with try-catch in a loop globals for in

17. 17.

    speeding up code Cache out of scope variables Cache array.length

    String-building Cache calculations someFunction = someObject.someFunction; for (...) { someFunction(...); }
18. 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. 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. 20.

    speeding up code Cache out of scope variables Cache array.length

    String-building Cache calculations
21. 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. 22.

    Minimising reflows innerHTML/$.html over creating nodes Batch setting styles Stay

    low in the DOM tree Detach/hide nodes
23. 23.

    Minimising reflows Cache node properties Position: fixed/absolute for animations Avoid

    tables for layout
24. 24.

    HEAVY frameworks Do you really need them?

25. 25.

    caching AJAX requests Server-side scripts Client-side caching (localStorage)

26. 26.

    using prototypes properly Functions Value-type instance variables var Person =

    function() {}; Person.prototype.doSomething = function(...) { ... }; var Person = function() { this.doSomething = function(...) { ... }; };
27. 27.

    avoid closures Source of memory leaks Reuse static functions Adds

    level to scope chain
28. 28.

    faking it Loading screens Thumbnail previews for images Pre-loading

29. 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. 30.

    thanks! @dellsystem