From JabbaScript
To JavaScript

matth@catalyst.net.nz

1. Making It Fast

2. Workflow

3. Trivia

1. Making It Fast

Jank Free Motion

"that feels janky"

Fast Events

Jank Free Motion

the '24FPS Oughta Be Enough For Everyone' myth

credit: es.com

24fps looks ok with motion blur

Jank Free Motion

but you don't get motion blur for free in a browser

$("#thing").slideUp();

Jank Free Motion

12FPS = 84 ms/frame

24FPS = 42 ms/frame

48FPS = 21 ms/frame

60FPS = 16 ms/frame

aim for this →

see 100fps.com for more on perception of motion

Jank Free Motion

60fps is 16-21ms/frame
subtract reflow and repaint time
subtract garbage collection time
= ~15ms for your JavaScript

benchmark your JavaScript!

DEMO: Chrome Timeline

Animation approaches:

Jank Free Motion

The browser's UI thread is effectively single-threaded.

The UI thread is responsible for UI and JavaScript and CSS

Jank Free Motion

Event Stack (demo)

Doesn't matter if your javascript is doing animation. It can still interrupt animation!

Jank Free Motion

Browser Async Event Stack

process a click()

call a function (added to stack by a setTimeout)

draw next frame of jQuery fadeIn() animation]

Doesn't matter if your JavaScript is doing animation. It can still interrupt animation!

Jank Free Motion

Aim for 60fps

Benchmark your JS

Break up long-running JS into multiple callbacks setTimeout(nextStep, 5); to give the browser breathing room

Prefer CSS animation if your browsers allow it

Fast Events

requestAnimationFrame vs.
setTimeout / setInterval

jQuery .on() AKA .live() AKA .delegate()

mobile? touch* vs click()

requestAnimationFrame vs.
setTimeout / setInterval

Use requestAnimationFrame for timers controlling visible things

Use setTimeout for everything else.

Never use setInterval. Instead use a recursive setTimeout, because setInterval can get backlogged on the browser's event stack.

jQuery .on() AKA .live() AKA .delegate()

<a href="">
<span>click</span>
</a>

So the word "click" is clicked and which element has a click event?

Learn about "Event Bubbling"

An event function(event){return false;}

'return false' means

event.preventDefault()
event.stopPropagation() (bubbling)
return immediately

Did you really mean all that?

Probably just use event.preventDefault() because otherwise you'll kill bubbling

2. Workflow

Don't Repeat Yourself

Linting?

Live Linting (demo)

Inline Live linting

SublimeEditor with Linter

Boilerplate

(function(){
    "use strict";
    //write code here
}());

Boilerplate Circa 2005

(function($){
    "use strict";
    //write code here
}(Prototype));

Boilerplate After 2006

(function($){
    "use strict";
    //write code here
}(jQuery));

Boilerplate

(function(){
    "use strict";
    var private_variable;
   window.setThing = function(override){
        private_variable = override;
    }
   window.getThing = function(){
        return private_variable;
    }
}());

Boilerplate

(function($){
  "use strict";
  var callback = function(event){ ... }
  $(document).on("yourapp:refresh", callback);
  $(document).trigger("yourapp:refresh");
}(jQuery));

Boilerplate

(function($){
  "use strict";
  var callback = function(event){ ... }
  $(document).on("yourapp:refresh", callback)
            .trigger("yourapp:refresh");
}(jQuery));

Logging JavaScript errors

...from any user, on production!

window.onerror(msg, url, line) {
    var message = "Error in "+url+" on line "+line+": "+msg;
    $.post("/logerror", { "msg" : message }); 
}

See Sentry, ErrorBoard´╗┐
linked in this Paul Irish blogpost

3. Trivia

HTML5 Shims

Reflow strategies

Web Workers

Minimising Garbage Collection

HTML5 Polyfills AKA Shims

a good list of polyfills

Try CSS3Pie

Reflow strategies

Paint AKA reflow AKA layouting

Reflow strategies

which actions trigger paint/reflow/layout?

Reflow strategies

// Suboptimal, causes layout twice.
var newWidth = aDiv.offsetWidth + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.height = newHeight + 'px'; // Write

// Better, only one layout.
var newWidth = aDiv.offsetWidth + 10; // Read
var newHeight = aDiv.offsetHeight + 10; // Read
aDiv.style.width = newWidth + 'px'; // Write
aDiv.style.height = newHeight + 'px'; // Write

//via http://gent.ilcore.com/

Reflow strategies

Reflow strategies

Web Workers

Move computation out of the UI thread

The UI thread is responsible for UI and JavaScript

More? High performance JavaScript, ASM.js

Minimising Garbage Collection

Too many anonymous functions/variables?

Caching jQuery selectors

Premature optimisation

Premature optimisation

Case study:

String concatenation VS array pushing and joining

Let's see what JSPerf.com says

Game Over

See you on IRC on #javascript

Questions?

matth@catalyst.net.nz

HIDDEN TRACK OMG

only 90s kids will know this

Boilerplate

1 of 3

var counter = function(){
  return "hello";
}()

Boilerplate

2 of 3

var counter = function(){
  return function(){
    return "hello world";
  }
}()

Boilerplate

3 of 3

var counter = function(){
  var index = 0;

  return function(){
    index += 1;
    return index;
  }
}()