JavaScript performance

Sebastian Poręba
7th December 2011

About

• Study: AGH - Graphics, UJ - Game development
• Work: AiGameDev.com
• Blag: www.smashinglabs.pl

JavaScript is one of the easiest languages

No boilerplate!

console.log('Hello le world');
            

#include <iostream>

using namespace std;

int main() {
  cout << "Hello le world" << endl;
  return 0;
}
            

Read-eval-print loop

JS doesn't care too much

var x = 1; // <-- perfect
          

x = 1; // <-- still works
          

x = 1 // <-- wtf JS?
          

Very high-level programming concepts

Easy to learn, hard to master

JavaScript was written in ten days by Brendan Eich

The bad parts = the bad performance

Douglas Crockford

Before you start
optimizing your JS

Easy optimizations

JavaScript is not compiled!

References are not free

fn("foo"); // fast
myObj.atr.atr.atr.fn("goo"); // 30-70% slower

var tmpFn = myObj.atr.atr.atr.fn;
for(var i = 0; i < 1000; i++) {
  tmpFn("goo");
}

for(var i = 0, tmpObj; i < myObj.length; i++) {
  tmpObj = myObj[i].atr.atr.atr;
  tmpObj.tmpFn1("goo");
  tmpObj.tmpFn2("foo");
  tmpObj.tmpFn3("moo");
}

Scope resolution

function add(num1, num2){
    return num1 + num2;
}
var result = add(5, 10);

Scope resolution

(function() {
  function add(num1, num2){
      return num1 + num2;
  }
  var result = add(5, 10);
}())

Things to remember 01:
Local & literal variables are the fastest.

Why DOM is so slow

• every change causes gazzilion of events (think of hundreds of observers)
• using innerHTML is constantly destroying and creating nodes
• recomputing visible page layout
• notyfing browser extensions of the change
• JavaScript can be JIT compiled, DOM is called using API

DOM elements content

for(var i = 0; i < 1000; i++) {
  element.innerHTML += " num " + i;
}

for(var i = 0, txt = ""; i < 1000; i++) {
  txt += " num " + i;
}
element.innerHTML = txt;

DOM querying

function toggleBox(id) {
  var element = document.getElementById(id);
  if(element.style.display === "block") {
    element.style.display = "none";
  } else {
    element.style.display = "block";
  }
}

DOM querying - memoization

var memoizedDom = {};
var toggleBox = function(id) {
  if(memoizedDom[id] === undefined) {
    memoizedDom[id] = document.getElementById(id);
  }
  var element = memoizedDom[id];
  if(element.style.display === "block") {
    element.style.display = "none";
  } else {
    element.style.display = "block";
  }
};

DOM querying - memoization in closure

var toggleBox = (function() {
  var memoizedDom = {};
  return function(id) {
    if(memoizedDom[id] === undefined) {
      memoizedDom[id] = document.getElementById(id);
    }
    var element = memoizedDom[id];
    if(element.style.display === "block") {
      element.style.display = "none";
    } else {
      element.style.display = "block";
    }
  };
})();

jQuery DOM querying

$('.myClass').css("color", "pink");
$('.myClass').css("border", "3px solid even-pinker");
$('.myClass').show();
$('.myClass').onclick(function() {
  alert("omg I'm so awesome programmer!");
});

jQuery DOM querying memoization

$$ = (function() {
  var memoizedDom = {};
  return function(selector) {
    if(memoizedDom[selector] === undefined) {
      memoizedDom[selector] = $(selector);
    }
    return memoizedDom[selector];
  };
})();
        

Things to remember 02:
Access DOM as rarely as possible. Cache, memoize, use temporary variables.

Random notes

• "for(var x in arr)" and "for each(var item in obj)" - slow
• if you have to use jQuery plugins, always check internals
• DOM collections are live - they are automatically updated when underlying document is changed
• with DOM collections always store collection.length in tmp variable

Nickolas C. Zakas

JSPerf

Don't believe in books - test by yourself!

Reflow/repaint

• Repaint - when element changes its appeareance
• Reflow - when element changes its box model which forces the whole page rearrangement

Reflow

• Resizing the window
• Adding, removing, updating DOM nodes
• Changes in box model (width/height/padding/margin/border) of normally positioned node
• Moving, animating a node on the page
• Change of innerHTML
• Changing display/float

Repaint

• Background/font color
• Box model with position: absolute/fixed
• visibility change
• on reflow

Example

var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // another reflow and a repaint

bstyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));

How to avoid

• Let the browser do your job (FF: min 120ms between reflows)
• Avoid reading and writing CSS at the same time
  el.style.left = el.offsetLeft + 10 + "px";
• Detach and attach DOM nodes
• Toggle CSS classes
• Use el.cssText instead of el.style
• Hide, change, show - reduce reflows to two
• append elements to detached parent node, then append it (1 reflow)

More on repaint/reflow

• Rendering: repaint, reflow/relayout, restyle
• Reflows, repaints performance
• About repaint and reflow in JS
• Will it reflow?
• Tool: dynaTrace
• Tool: Speed Tracer

Demo: Speed Tracer

• Hint: Dev channel is not a canary channel
• Hint 2: Disable console or Speed tracer won't work

Things to remember 03:
Perform CSS operations on detached/invisible elements or change CSS in one operation.

Garbage Collector

Garbage Collector

• reclaims memory if there are no references to the object
• stop-the-world

GC - references in executed function

function gc1() {
  var x = 1; // gc
  var y = 2; // gc
  return 3;
}

function gc2() {
  var x = 1; // gc
  var y = 2; // immutable - no reference, gc
  return {a: y};
}

function gc3() {
  var x = 1; // gc
  var y = [1,2,3]; // mutable - reference, no gc
  return {a: y};
}

GC - references in executed function

function gc4() {
  var x = 1; // gc
  var y = function() {return 5;}; // reference, no gc
  return {a: y};
}

function gc5() {
  var x = 1;  // reference, no gc
  var y = function() {return x;};  // reference, no gc
  return {a: y};
}

function gc6() {
  var x = 1;  // eval, no gc
  var y = function(c) {return eval(c);};  // reference, no gc
  return {a: y};
}

GC - references in objects

var closure; function BigObject() { // return some big object}

var Foo = function() {};
Foo.prototype.setParentClass = function(parent) {
  this.parentClass = parent;
}

var Bar = function() {
  this.x = BigObject(); // x is not used in Foo
  this.y = 2; // but y is    
  this.obj = new Foo();
  this.obj.setParentClass(this);
};

function test_gc() {
  var b = new Bar();
  closure = b.obj;
}

Google Chrome

Uses precise garbage collection - knows exactly where all the pointers are

Other browsers (?)

Conservative garbage collector - any data may be a pointer. In some cases it leads to false positives.

Examples

• Example GC: good
• Example GC: bad
• Example GC: evil

Things to remember 04:
Never use eval.

Just-in-time compilation

How method JIT works

function a(x,y) {
  return 2*x+y;
}

function b(x,y) {
  return a(x,y) + a(y,x); 
}

function c(x,y) {
  return Math.max(
    b(x,y), b(y,x), 0
  );
}

How method JIT works

How method JIT works

How to write code for JIT

• Static types
• No evals
• Short functions
• Reasonable amount of different calls

Objects in JIT

• Objects are grouped in "shapes"
• Shape is based on object keys
• Keep your shapes consistent to enable JIT

More to come in future

• Type inference
• Dead code elimination

Google Chrome - Crankshaft

1. base compilation - compile all code without heavy optimization
2. runtime profiler - identify hot code
3. optimizing compiler - recompiles hot code
   • static single assignment form (SSA)
   • loop-invariant code motion
   • register allocation
   • inlining
4. deoptimization support - if any assumption in step 3 is wrong, we can get initial code back and try again

Things to remember 05:
Code like in C.

Moar on GC & JIT

• Best GC & JIT presentation ever
• Chromium blog on Crankshaft (plenty of links there)
• JSPerf on JIT
• Bugzilla - Type interference
• Type interference summary on Mozilla wiki
• Bugzilla - Incremental GC
• More on Google Chrome Profiler

Google Closure
Tools & Compiler

Calcdeps.py scans your project to find all dependiences

Calcdeps.py scans your project to find all dependiences

Calcdeps.py scans your project to find all dependiences

Makefile for JavaScript

PYTHON   = python
CALCDEPS = ~/closure/closure-library-read-only/closure/bin/calcdeps.py
CLOSURECOMPILER = ~/closure/compiler.jar
 
all:
    $(PYTHON) $(CALCDEPS) -p src -i src/init.js 
    -o compiled -c $(CLOSURECOMPILER) > scripts/ai-bot-compiled.js

Closure Compiler

• Reads input files and transforms them into abstract representation (graph)
• Turns graph into an output code
• Output is a minimal representation considering gzip compression
• Smaller code improves performance as well
• Works in three modes: whitespace only, simple, advanced Chuck Norris

Whitespace only mode

  var foo = function(bar) {
    if(bar == ('baz').length) {
      return "\"" + '\'';
      } else {
        return 10000;
      }
    }
  }

var foo=function(bar){
  if(bar=="baz".length)return'"'+"'";
  else return 1E4
};

Whitespace only mode

• one-line if → removed curly braces
• 1000 → 1E4
• Semicolon at the end of the function → dropped
• Minimized strings with escaped quotes
• Semicolon added after function declaration, safer to concatenate with another file

Simple mode

  var foo = function(bar) {
    if(bar == ('baz').length) {
      return "\"" + '\'';
      } else {
        return 10000;
      }
    }
  }

var foo=function(a){return a==3?"\"'":1E4};

Simple mode

• bar → a
• if/else → ?:
• ('baz').length → 3
• string literals → concatenated

Chuck Norris mode

  var foo = function(bar) {
    if(bar == ('baz').length) {
      return "\"" + '\'';
      } else {
        return 10000;
      }
    }
  }

Chuck Norris mode

• Removes dead code
• Inlines functions
• Uses comments in JSDoc to detect errors and optimize even further
• Provides Java API and supports Ant for build process

Chuck Norris mode - we need to go deeper

var COST_PER_VALUE_MENU_ITEM = 0.99;
var SALES_TAX = .05;
var DECATHLON_COST = 10 * (1 + SALES_TAX) * COST_PER_VALUE_MENU_ITEM;

var a = function()  { return 1; };
var b = function(f) { f(); return 42; };
var c = function()  { return b(a) * SALES_TAX; };
var d = function(n) { return (n > 0) ? a() : n * d(n - 1); };
var e = function()  { return [b, c].length; };
console.log(e());

Chuck Norris mode - we need to go deeper

Chuck Norris mode - we need to go deeper

Chuck Norris mode - we need to go deeper

var SALES_TAX = .05;
var a = function()  { return 1; };
var b = function(f) { f(); return 42; };
var c = function()  { return b(a) * SALES_TAX; };
var e = function()  { return [b, c].length; };
console.log(e());

console.log(2);      

Google Closure - pros & cons

• It's optimisation, not minifying
• Removes unused files and code
• Provides great library

• It may break your code (if you are not careful)
• Documentation is not great (but Closure book is)
• Build process is more complicated, not very good for small projects

Things to remember 06:
Use Google Closure Compiler
in Chuck Norris mode.

Summary

• JS: Local & literal variables are the fastest
• DOM: Access DOM as rarely as possible. Cache, memoize, use temporary variables
• Reflow: Perform CSS operations on detached/invisible elements or change CSS in one operation
• GC: Never use eval
• JIT: Code like in C
• Compilation: Use Google Closure Compiler in Chuck Norris mode

Questions?

Even more links

• Google articles on page speed
• Google article on JavaScript performance
• Opera article on JavaScript performance
• Mozilla detailed reflow article
• Memory leak patterns
• Trace trees (trace JIT)
• Comics about Google Chrome