Профайлеры в JavaScript

Date-таймеры

Зачастую, чтобы измерить время выполнения сценария, используется примитивный, но надежный метод создания Date-объектов.

// Запускаем таймер в начале выполнения сценария
var start = new Date();
// Код, время которого необходимо измерить
for (var i = 0; i < 10000; i++)
{/* Do nothing */}
// Еще один таймер в конце
var end = new Date();
// Вычисляем разницу в ms
var result = end.getTime() - start.getTime();
// Вывод результата
alert(result + 'ms');

Этот способ хорош тем, что работает кроссбраузерно и довольно точно. Если между таймерами не размещать никакого кода, то мы увидим 0ms. Еще плюс, что Date-таймеры могут измерить время выполнения произвольного участка кода, а не только вызова функции.

Основные минусы связаны с отсутствием достоинств, которыми обладают профайлеры:

* Приходится каждый раз руками создавать Date-объекты, что не совсем удобно.
* Если мы пожелаем собрать статистику о времени исполнения, количестве вызовов и др. для всех функций, нам придется создать огромное количество таймеров и собирать данные с них всех, что совсем неудобно.

Простейший профайлер

Мы можем написать собственную простую реализацию функции-профайлера. В качестве первого аргумента она будет принимать ссылку на исполняемую функцию, а в качестве остальных - параметры вызова исполняемой функции. См. пример:

// Тестовая функция для выполнения
function forExecute( limit ) {
for (var i = 0; i < limit; i++) {
/* Вызовем Math.random() */
Math.random();
}
}
// Profile-функция
function profile( fn/*[, arguments]*/ ) {
var start, end, arg = [], i;
if ( arguments.length ) {
if ( arguments.length > 1 ) {
for (i = 1; i

Заметим, что исполнение функции происходит в глобальном контексте объекта window, что может создать определенные проблемы при передаче ссылок на методы других объектов. Будьте внимательны и при необходимости измените контекст.

Использование Firebug

К сожалению не все браузеры оснащены инструментами web-разработки, настолько же мощными, как firebug. Для тех кто не в курсе, firebug — это дополнение для браузера Mozilla Firefox (далее FF), с таким количеством фич, что нет никакой возможности описать их в одной статье :-)

Итак, откроем FF, установим firebug, если его еще нет. Зайдем на главную страницу webew.ru и откроем firebug. Увидим примерно следующее:


Мы находимся во вкладке Console, и кнопка Profile не нажата. Теперь нажмем кнопку Profile, чтобы запустить профайлер и обновим страницу. После обновления, отожмем клавишу Profile, и если всё сделано правильно увидим в списке логов приблизительно такую таблицу:


Видим, что с начала загрузки страницы и до того времени как мы отжали кнопку Profile было 499 вызовов функций, общим временем выполнения 24.489ms. В таблице можно найти подробные данные о каждой функции: в каком файле находится, сколько раз вызывалась, время исполнения (min, max, avg) и прочее. Ткнув на имя функции можно посмотреть её исходный код.

Тем кто постоянно ведет разработку/отладку своих приложений в firebug, можно посоветовать использовать методы console.profile() и console.profileEnd() прямо в коде или в консоле фаербага.