Замер скорости выполнения в JavaScript

В своей деятельности веб разработчиком никогда не увлекался подсчетом времени выполнения программ/приложений/скриптов. Конечно приходилось делать замеры, но в основном это были замеры на бэк-энде на PHP. И честно говоря, замерять фронтэнд мне в голову не приходило. А зря.

Оптимизируя фронт-энд одного из проектов я понял, что все обращения к серверу сокращены по максимуму, скрипты и стили минифицированы, в общем все сделано по уму, но страница как-то подозрительно долго рендерится. Решил, что наверное надо поглядеть профилирование, а заодно посмотреть как делаются замеры времени выполнения на JavaScript.

Оказалось, что на современном JS это делается в две секунды очень удобным, но немного непривычным способом. Нам надо будет задействовать всего два метода объекта console, разместив замеряемый код между ними. Это методы time и timeEnd, которые на вход требуют предоставить им уникальное название таймера, за работой которого они будут следить.

var count = 1000000;
console.time('checkFor');
for(var i = 0; i < count; i++);
var i = 0; while(i < count) i++;
console.timeEnd('checkFor');

В данном случае мы замеряем работу двух абсолютно бесполезных циклов, которые просто переберут счетчик 1 миллион раз. Запустив данный код в консоли мы получим ответ checkFor: 6.72900390625ms, то есть фактическое время выполнения в миллисекундах.

Как вы понимаете запускать данный код можно не только в консоли, но и размещать его в коде своего приложения. А учитывая то, что уникальных таймеров нам позволено создавать не один, а множество, то мы можем делать замеры по разным направлениям работы всего приложения. Даже сейчас я вижу, что данный инструментарий просто находка.

UPDATE: поигрался с замерами скорости работы разных селекторов в jQuery, узнал для себя массу нового :)