Tuning performance

Performance makes user experience. If it takes too long to load a page or a UI to respond, the user is likely to leave the application and never come back. It's especially true with web apps. In Chapter 3, DOM Scripting and AJAX, we compared different approaches to manipulate the DOM. In order to find out how fast an approach is, we use a performance built-in object:

"use strict";
var cpuExpensiveOperation = function(){
      var i = 100000;
      while( --i ) {
        document.body.appendChild( document.createElement( "div" ) );
      }
    },
    // Start test time
    s = performance.now();

cpuExpensiveOperation();
console.log( "Process took", performance.now() - s, "ms" );

performance.now() returns a high resolution timestamp that represents time in milliseconds accurate to microseconds. This is designed and widely used for benchmarking. However, a time/timeEnd console object also provides methods to measure time:

console.time( "cpuExpensiveOperation took" );
cpuExpensiveOperation...