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