Разработчик интерфейсов
Профилирование
Михаил Корепанов
Профилирование — сбор характеристик работы программы для дальнейшего анализа.
Сначала сделайте, чтобы работало.
Потом, чтобы работало быстро.
Потом, чтобы работало быстро (если понадобится)
Быстро?
1-2 секунды —первоначальная загрузка.
100 мс — время реакции на действие.
Какие есть инструменты?
Профилирование сети
Firebug Net Panel
Web Inspector Network
IE9 Developer Tools
Opera Dragonfly
На что обратить вниманиеКоличество запросов
На что обратить вниманиеКоличество запросов
Время выполнения каждого запроса
На что обратить вниманиеКоличество запросов
Время выполнения каждого запроса
Есть ли блокирующие запросы
На что обратить вниманиеКоличество запросов
Время выполнения каждого запроса
Есть ли блокирующие запросы
Можно ли какие-то запросы распараллелить
Профилирование скриптов
До появления встроенных профайлеров
var begin = +new Date();myFunction();var end = +new Date();
// Время выполнения myFunctionvar time = end - begin;alert(time + ‘ ms’);
Web Inspector Profiles
Firebug profiler
IE9 Developer Tools Profiler
Что общего
Self — собственное время выполнения функции
Total — время выполнения, включая время вызываемых функций
Top Down view
Function1Function2
Function3
var Function1 = function() { Function2();};
var Function2 = function() { Function3();};
Bottom Up view
Function3Function2
Function1
var Function1 = function() { Function2();};
var Function2 = function() { Function3();};
Анонимные функции
Анонимные функции
Анонимные функции
var myFunc = function() { ... };myFunc.displayName = ‘myFunc’;
// Или
// Засоряет глобальную область видимости в IE < 8var myFunc = function myFunc() { ... };
Console API
var myFunc = function() { ... };
// Замерить время выполненияconsole.time(‘myFunc’);myFunc();console.timeEnd(‘myFunc’);
// Профилироватьconsole.profile(‘myFunc’);myFunc();console.profileEnd(‘myFunc’);
На что обратить вниманиеСобственное время выполнения функций
На что обратить внимание
Количество вызовов функций
Собственное время выполнения функций
Профилирование рендеринга
Reflow — процесс вычисления размеров и положения элемента на странице
Repaint — процесс отрисовки визуального отображения элемента
Web Inspector CSS Profiler
Web Inspector Timeline
Dragonfly CSS Profiler
На что обратить вниманиеМожно ли уменьшить количество перерисовок
На что обратить вниманиеМожно ли уменьшить количество перерисовок
Если тормозит paint можно ли переверстать
На что обратить вниманиеМожно ли уменьшить количество перерисовок
Если тормозит paint можно ли переверстать
Время матчинга селекторов
Комплексные инструменты
Google SpeedTracer
DynaTrace AJAX Edition
Полезные ссылки
http://stevesouders.com/
http://jsperf.com/
http://www.phpied.com/
http://www.igvita.com/
http://gent.ilcore.com
http://clck.ru/2XxQX
Разработчик интерфейсов
Спасибо
@panyakor
Михаил Корепанов