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