Профилирование в JS


profilers browsers optimization javascript

Профилирование - это в первую очерель сбор и анализ информации, а уже потом программирование и работы по улучшению производительности программы.

Зачем нужна оптимизация?

  1. Загрузка страницы экономит нервы пользователя. Следствие из этого мы получаем лояльных пользователей.
  2. Полезно разработчику, чтобы лучше понять "узкие места" своего сайта в которых его приложение подвисает.

Самый простой способ посмотреть время загрузки DOM не заморачиваясь на профилировании это конечно стандартные профайлеры такие как Chrome Inspector Network, Firebug Net Panel и т.д. Итак, разберемся какие бывают способы оптимизировать работу своего приложения.

Если с первым методом все понятно, то про другие два я хочу рассказать.

Инструментальное профилирование

Во все актуальные версии браузеров уже встроены инструменты разработчика, в которые входит profiler. Так профайлеры есть в: Firefox, IE, Chrome.

Chrome Inspector Network

Версия Chrome: 37.0.2062.103 m Chrome Profiler

Результат работы профайлера приведен выше. Есть таблица с общим и собственным временем выполнения загрузки скрипта

Плюсы:

Минусы:

Подробно о Profiling JavaScript Performance и о Javascript Memory Profiling

Firebug Net Panel

Версия Firefox: 32.0 Firebug Profiler

Результат работы профайлера приведен выше. Здесь в интерфейс профайлера уже интегрирована диаграмма времени загрузки скриптов по умолчанию. Остальные элементы интерфейса аналогичны профайлеру в Хроме.

Плюсы:

Минусы:

Подробно о профайлере

IE Profiler Здесь аналогично Хрому есть профайлер CPU и профайлер памяти.

Плюсы и минусы профилировщика аналогичны тем что описаны выше. Наконец-то появилась возможность переходить прямо из профайлера в код скрипта. До IE 9 эта функция отстутствовала.

Ручное профилирование

Бывают задачи когда нужно посмореть время выполнения конкретных функций или конструкторов, использовать встроенные профилировщики и разбираться в дереве вызовов в поисках нужной функции бывает довольно неудобно. На эти случаи удобно использовать следующие конструкции языка javascript:

t = +new Date();
code_to_measure();
time = +new Date() - t;

Более удобный варинт реализует паттерн Декоратор:

function profile(func) {
  var wrapper = function() {
    var start = +new Date();
    var result = func.apply(null, arguments);
    console.log(func.name, +new Date() - start, "ms");
    return result;
  }
  return wrapper;
}

Вызываем функцию профайлер так

code_to_measure = profile(code_to_measure);
code_to_measure();
>code_to_measure 10 ms

Итог

Идеального для себя профайлера я не нашел, довольно симпатичными выглядят встроенные в Chrome и в Firefox, но они не имеют части функционала которая выделяла бы их из общей массы. Тем более, оптимузируя свое приложение под тот или иной браузер приходится сталкиваться с его встроенным профайлером. Не стоит забывать и про старые ручные методы которые часто помогают.