Зачастую, чтобы измерить время выполнения сценария, используется примитивный, но надежный метод создания 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() прямо в коде или в консоле фаербага.
