wrapping javascript

function add(a, b) {
  return a + b;
}
function doSomething() {
  console.log(add(2, 3));
}
doSomething();
// 5

wrapping javascript

function add(a, b) {
  return a + b;
}
function doSomething() {
  console.log(add(2, 3));
}
// replace add
var _add = add;
add = function () {
  console.log('adding', arguments);
  return _add.apply(null, arguments);
}
doSomething();
// adding { '0': 2, '1': 3 }
// 5

wrapping javascript

function add(a, b) {
  return a + b;
}
function doSomething(add) {
  console.log(add(2, 3));
}
setTimeout(doSomething.bind(null, add), 1000);
// replace add
var _add = add;
add = function () {
  console.log('adding', arguments);
  return _add.apply(null, arguments);
}
doSomething();
// 5

Prefer wrapping methods

function add(a, b) {
  return a + b;
}
var calc = {
  add: add
};

function doSomething(calc) {
  console.log(calc.add(2, 3));
}
setTimeout(doSomething.bind(null, calc), 1000);

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 actual application

• optimize 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

Find GC evets

var list = [], k;
for (k = 0; k < N; k += 1) {
  list.push( ... );
}

Profile memory

avoid gc events

Preallocate memory

// bad
var list = [], k;
for (k = 0; k < N; k += 1) {
  list.push( ... );
}
// better 
var list = [], k;
list.length = N;
for (k = 0; k < N; k += 1) {
  list[k] = ...;
}

Profile memory

avoid gc events with preallocated arrays

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

Starting profiler manually seems to severely affect the

performance 

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

performance matters

@bahmutov

this presentation at slides.com/bahmutov/code-snippets

Event plug: Great League of Engineers

"What makes a team productive?" talks and panel

April 30th, at Brightcove office

http://www.eventbrite.com/e/great-league-of-engineers-tickets-16657822997