Разработчик интерфейсов

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

Михаил Корепанов

Профилирование — сбор характеристик работы программы для дальнейшего анализа.

Сначала сделайте, чтобы работало.

Потом, чтобы работало быстро.

Потом, чтобы работало быстро (если понадобится)

Быстро?

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@yandex-team.ru

Спасибо

@panyakor

Михаил Корепанов