Last Updated: September 09, 2019
·
574
· paulosborne

Timing a JavaScript event

There are times when it's useful to know how long a particular piece of code takes to execute. The example below is taken from a project that renders document pages to screen, knowing how long the process took was immensely valuable.

Thanks to Chrome's timeline this is pretty easy to accomplish.

// start timer.
console.time('render pages');

this.model.get('pages').each( function ( page ) {
    $('.pages', this.el).append( new PageView({ model: page }).render().el );
}, this);

// end timer.
console.timeEnd('render pages');

The next time you render the page, the following will appear in the console.

Picture

References
Chrome Developer Tools Documentation