webew
Войти » Регистрация
 
JavaScript

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

24 февраля 2009, 13:43

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 < arguments.length; i++)
                arg.push( arguments[i] );
            start = new Date();
            fn.apply(window, arg);
            end = new Date();
        } else {
            start = new Date();
            fn();
            end = new Date();
        }
        return end.getTime() - start.getTime();
    }
}
// Вызовы
alert( profile( forExecute ) ); // Вернет 0, т.к. цикл не запустился
alert( profile( forExecute, 10000 ) ); // Вернет время выполнения 10000 вычислений Math.random()

Теперь вы можете измерять время выполнения любых функций, независимо от того, где они объявлены

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

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

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

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

firebug and webew

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

firebug and webew and profiler

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

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


© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.
Добавить комментарий
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: