Paste this script to your browser, interact with your SPA and get feedback on how much time it spends blocking the JavaScript event loop eg. executing JavaScript. Then optimize & compare output before & after.

README.md

Code originally from node-blocked and browser-process-hrtime.

blocked.js

 var performance = window.performance || {}
  var performanceNow =
    performance.now        ||
    performance.mozNow     ||
    performance.msNow      ||
    performance.oNow       ||
    performance.webkitNow  ||
    function(){ return (new Date()).getTime() }

  // generate timestamp or delta
  // see http://nodejs.org/api/process.html#process_process_hrtime
  function hrtime(previousTimestamp){
    var clocktime = performanceNow.call(performance)*1e-3
    var seconds = Math.floor(clocktime)
    var nanoseconds = Math.floor((clocktime%1)*1e9)
    if (previousTimestamp) {
      seconds = seconds - previousTimestamp[0]
      nanoseconds = nanoseconds - previousTimestamp[1]
      if (nanoseconds<0) {
        seconds--
        nanoseconds += 1e9
      }
    }
    return [seconds,nanoseconds]
  }

  var blocked = function(fn) {
    var start = hrtime()
    var interval = 100;

    setInterval(function(){
      var delta = hrtime(start);
      var nanosec = delta[0] * 1e9 + delta[1];
      var ms = nanosec / 1e6;
      var n = ms - interval;
      if (n > 10) fn(Math.round(n))
      start = hrtime();
    }, interval)
  }
  blocked(function(ms) {
    console.log('BLOCKED FOR %sms ' + new Date(), ms | 0);
  });