profiling javascript

// "app" code
function add(a, b) {
  return a + b;
}

time add function

// "user" code
function onClick() {
  console.log(add(2, 3));
}
// click!
// add took 10ms
// 5

time a function call via external overwrite

// "app" code
function add(a, b) {
  return a + b;
}

wrap add from snippet

// "app" code
function add(a, b) {
  return a + b;
}

wrap add from snippet might not work

// "app" code
function add(a, b) {
  return a + b;
}

Prefer wrapping methods

// "app" code
function add(a, b) {
  return a + b;
}
var calc = {
  add: add
};
// "user code"
function click(calc) {
  console.log(calc.add(2, 3));
}
// code snippet
var _add = calc.add;
calc.add = function () {
  console.log('adding', arguments);
  return _add.apply(calc, arguments);
}
// adding { '0': 2, '1': 3 }
// 5

Works in Angular

var selector = 'load';
var methodName = 'load';
var el = angular.element(document.getElementById(selector));
var scope = el.scope() || el.isolateScope();
var fn = scope[methodName];
var $timeout = el.injector().get('$timeout');
var $q = el.injector().get('$q');

scope[methodName] = function () {
  console.profile(name);
  console.time(name);

  // method can return a value or a promise
  var returned = fn();
  $q.when(returned).finally(function finishedMethod() {
    console.timeStamp('finished', methodName);

    $timeout(function afterDOMUpdate() {
      console.timeStamp('dom updated after', methodName);
      console.timeEnd(name);
      console.profileEnd();
    
      scope[methodName] = fn;
    }, 0);
  });
};

Works with prototypes

// tough cases like jQuery plugins
new Photostack(document.getElementById('photostack-3');
function profile(proto, methodName) {
    var originalMethod = proto[methodName];
    function restoreMethod() {
        console.timeEnd(methodName);
        proto[methodName] = originalMethod;
    } 
    proto[methodName] = function () {
        console.time(methodName);
        originalMethod.apply(this, arguments);
        restoreMethod();
    };
}
// where we want to profile Photostack.prototype._rotate
profile(Photostack.prototype, '_rotate');

js profiling example

example: github.com/bahmutov/vanilla-primes

my profiling rules

• Profile in a "clean" browser

• profile the actual application

• optimize the top bottleneck first

Warning signs

• try - catch blocks
• modifying arguments

  • arguments = arguments || []

• deleting / adding properties

  • delete foo.bar

• calling function with different argument types

Detect v8 optimizations

Will not be optimized

• eval
• debug
• long functions!

iojs 1.8.1 has more than 300 switches. A lot related to performance tuning

            iojs --v8-options
        

bad flame chart

good flame chart

time web worker

var worker = new Worker('worker.js');
function renderPrimes(primes) {
    var html = primes.map(primeToRow).join('\n');
    document.querySelector('#results').innerHTML = html;
}
worker.onmessage = function (e) {
    console.log('worker has finished');
    renderPrimes(e.data);
};
var primesApp = {
    worker: worker,
    findFirstPrimes: function (n) {
        console.log('finding first', n, 'primes');
        worker.postMessage({ cmd: 'primes', n: n });
    }
};
document.querySelector('#find').addEventListener('click', function () {
    var n = Number(document.querySelector('#n').value);
    primesApp.findFirstPrimes(n);
});

Need to time separate actions

var m1 = obj1[methodName1];
var m2 = obj2[methodName2];

obj1[methodName1] = function () {
    console.profile('separate');
    console.time('separate');
    m1.apply(obj1, arguments);
};

obj2[methodName2] = function () {
    console.timeEnd('separate');
    console.profileEnd('separate');
    m2.apply(obj2, arguments);
};

// call with
// obj1 = primesApp.worker, methodName1 = 'postMessage'
// obj2 = primesApp.worker, methodName2 = 'onmessage'  

profile-separate-calls.js

Solution: wrap 2 steps into a single promise

// "user" code
webWorker.computePrimes(10000)
    .then(render);
// can be wrapped easily in a code snippet
var started = Number(new Date());
var result = webWorker.computePrimes(1000);
if (isPromise(result)) {
  return result.tap(function () {
    var finished = Number(new Date());
  });
} else {
  ... // time normally
}

What about timeline?

Lots of changes

http://updates.html5rocks.com/2015/04/devtools-timeline-improvements

Layout profiler

Paint profiler

Observe paint

Related

• Angular performance using code snippets 
  • glebbahmutov.com/blog/improving-angular-web-app-performance-example/
• @bahmutov and glebbahmutov.com/blog/tags/performance/
• calendar.perfplanet.com/2014/
• @igrigorik, @addyosmani and @paul_irish
• Any talk on performance by John-David Dalton @jdalton (lodash)

MUST watch: "DevTools: State of the Union" by @addyosmani

Q: How much to optimize?

• page load time (text)

• images appear

• each click has visual action

• browser is never locked

Q: How much to optimize?

A: Set a budget

• page load time (text)

• images appear

• each click has visual action

• browser is never locked

Q: how to stick to the performance budget as web app grows?

still searching for an answer