Embed Size (px)
DESCRIPTION
Рассказывается о том, что такое профилирование и когда нужно им заниматься. Также коротко рассматриваются инструменты для профилирования сети, рендеринга и JS-кода в разных браузерах.
Citation preview
Разработчик интерфейсов
Профилирование
Михаил Корепанов
Профилирование — сбор характеристик работы программы для дальнейшего анализа.
3
Сначала сделайте, чтобы работало.
4
Потом, чтобы работало быстро.
5
Потом, чтобы работало быстро (если понадобится)
6
Быстро?
7
1-2 секунды —первоначальная загрузка.
8
100 мс — время реакции на действие.
9
Какие есть инструменты?
10
Профилирование сети
Firebug Net Panel
12
Web Inspector Network
13
IE9 Developer Tools
14
Opera Dragonfly
15
На что обратить внимание— Количество запросов
16
На что обратить внимание— Количество запросов
— Время выполнения каждого запроса
17
На что обратить внимание— Количество запросов
— Время выполнения каждого запроса
— Есть ли блокирующие запросы
18
На что обратить внимание— Количество запросов
— Время выполнения каждого запроса
— Есть ли блокирующие запросы
— Можно ли какие-то запросы распараллелить
19
Профилирование скриптов
До появления встроенных профайлеров
var begin = +new Date();myFunction();var end = +new Date();
// Время выполнения myFunctionvar time = end - begin;alert(time + ‘ ms’);
21
Web Inspector Profiles
22
Firebug profiler
23
IE9 Developer Tools Profiler
24
Что общего
Self — собственное время выполнения функции
Total — время выполнения, включая время вызываемых функций
25
Top Down view
Function1Function2
Function3
var Function1 = function() { Function2();};
var Function2 = function() { Function3();};
26
Bottom Up view
Function3Function2
Function1
var Function1 = function() { Function2();};
var Function2 = function() { Function3();};
27
Анонимные функции
28
Анонимные функции
29
Анонимные функции
var myFunc = function() { ... };myFunc.displayName = ‘myFunc’;
// Или
// Засоряет глобальную область видимости в IE < 8var myFunc = function myFunc() { ... };
30
Console API
var myFunc = function() { ... };
// Замерить время выполненияconsole.time(‘myFunc’);myFunc();console.timeEnd(‘myFunc’);
// Профилироватьconsole.profile(‘myFunc’);myFunc();console.profileEnd(‘myFunc’);
31
На что обратить внимание— Собственное время выполнения функций
32
На что обратить внимание
— Количество вызовов функций
— Собственное время выполнения функций
33
Профилирование рендеринга
Reflow — процесс вычисления размеров и положения элемента на странице
35
Repaint — процесс отрисовки визуального отображения элемента
36
Web Inspector CSS Profiler
37
Web Inspector Timeline
38
Dragonfly CSS Profiler
39
На что обратить внимание— Можно ли уменьшить количество перерисовок
40
На что обратить внимание— Можно ли уменьшить количество перерисовок
— Если тормозит paint можно ли переверстать
41
На что обратить внимание
— Время матчинга селекторов
— Можно ли уменьшить количество перерисовок
— Если тормозит paint можно ли переверстать
42
Комплексные инструменты
Google SpeedTracer
44
DynaTrace AJAX Edition
45
Полезные ссылки
http://stevesouders.com/
http://jsperf.com/
http://www.phpied.com/
http://www.igvita.com/
http://gent.ilcore.com
http://clck.ru/2XxQX
46
Разработчик интерфейсов
Спасибо
@panyakor
Михаил Корепанов
