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

my profiling rules

• Profile in a "clean" browser

• profile the actual application

• optimize the top bottleneck first

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

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
}

Observe paint

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