Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Optimising your JavaScript

Wendy Liu
February 26, 2014

Optimising your JavaScript

Wendy Liu

February 26, 2014
Tweet

More Decks by Wendy Liu

Other Decks in Programming

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