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

Optimising your JavaScript

0826c9e6449c9a08230ac6d40a3cde4d?s=47 Wendy Liu
February 26, 2014

Optimising your JavaScript

0826c9e6449c9a08230ac6d40a3cde4d?s=128

Wendy Liu

February 26, 2014
Tweet

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