Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

BEFOre we begin ... Is optimisation even necessary?

Slide 3

Slide 3 text

IF SO ... What should you optimise?

Slide 4

Slide 4 text

PROFILING Chrome: bit.ly/chromeprofiler

Slide 5

Slide 5 text

tradeoffs Performance vs. readability

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

optimisation tips

Slide 8

Slide 8 text

faster code delivery Minimisation CDNs GZIP compression

Slide 9

Slide 9 text

event-handling Use a library Delegation

Slide 10

Slide 10 text

event-handling Use a library Delegation
  • 1
  • 2
  • 3
  • 4
  • ...

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

speeding up code Native functions Combine timers Avoid anything eval-like for (...) { element = $(...); ... }

Slide 14

Slide 14 text

speeding up code Native functions Combine timers Avoid anything eval-like for (...) { element = document.getElementById(...); ... }

Slide 15

Slide 15 text

speeding up code Native functions Combine timers Avoid anything eval-like setTimeout('someFunction', 1000); setTimeout(someFunction, 1000)

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

speeding up code Cache out of scope variables Cache array.length String-building Cache calculations someFunction = someObject.someFunction; for (...) { someFunction(...); }

Slide 18

Slide 18 text

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++) { ... }

Slide 19

Slide 19 text

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('');

Slide 20

Slide 20 text

speeding up code Cache out of scope variables Cache array.length String-building Cache calculations

Slide 21

Slide 21 text

working with the dom Use CSS Keep it small (virtual rendering) Minimise reflows/repaints position: absolute; left: 50%; margin-left: -200px; width: 400px;

Slide 22

Slide 22 text

Minimising reflows innerHTML/$.html over creating nodes Batch setting styles Stay low in the DOM tree Detach/hide nodes

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

HEAVY frameworks Do you really need them?

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

using prototypes properly Functions Value-type instance variables var Person = function() {}; Person.prototype.doSomething = function(...) { ... }; var Person = function() { this.doSomething = function(...) { ... }; };

Slide 27

Slide 27 text

avoid closures Source of memory leaks Reuse static functions Adds level to scope chain

Slide 28

Slide 28 text

faking it Loading screens Thumbnail previews for images Pre-loading

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

thanks! @dellsystem