Download to read offline
Uploaded byYandex
Михаил Корепанов — Profiler
Документ посвящен профилированию интерфейсов и сбору характеристик работы программ для их оптимизации. Он описывает основные методы профилирования, включая время загрузки, время реакции, а также инструменты и техники, которые можно использовать для выявления узких мест в работе приложения. Также рассматриваются моменты, на которые стоит обращать внимание, такие как количество и время выполнения запросов, а также рендеринг элементов на странице.
More Related Content
Similar to Михаил Корепанов — Profiler
Михаил Корепанов — Profiler
- 2. Профилирование Михаил Корепанов Разработчик интерфейсов
- 3. Профилирование — сбор характеристик работы программы для дальнейшего анализа. 3
- 4. Сначала сделайте, чтобы работало. 4
- 5. Потом, чтобы работало быстро. 5
- 6. Потом, чтобы работало быстро (если понадобится) 6
- 7.
- 8. 1-2 секунды — первоначальная загрузка. 8
- 9. 100 мс —время реакции на действие. 9
- 10. Какие есть инструменты? 10
- 11.
- 12.
- 13.
- 14.
- 15.
- 16. На что обратитьвнимание — Количество запросов 16
- 17. На что обратитьвнимание — Количество запросов — Время выполнения каждого запроса 17
- 18. На что обратитьвнимание — Количество запросов — Время выполнения каждого запроса — Есть ли блокирующие запросы 18
- 19. На что обратитьвнимание — Количество запросов — Время выполнения каждого запроса — Есть ли блокирующие запросы — Можно ли какие-то запросы распараллелить 19
- 20.
- 21. До появления встроенных профайлеров var begin = +new Date(); myFunction(); var end = +new Date(); // Время выполнения myFunction var time = end - begin; alert(time + ‘ ms’); 21
- 22.
- 23.
- 24. IE9 Developer ToolsProfiler 24
- 25. Что общего Self — собственное время выполнения функции Total — время выполнения, включая время вызываемых функций 25
- 26. Top Down view var Function1 = function() { Function1 }; Function2(); Function2 var Function2 = function() { Function3 Function3(); }; 26
- 27. Bottom Up view var Function1 = function() { Function3 }; Function2(); Function2 var Function2 = function() { Function1 Function3(); }; 27
- 28.
- 29.
- 30. Анонимные функции var myFunc = function() { ... }; myFunc.displayName = ‘myFunc’; // Или // Засоряет глобальную область видимости в IE < 8 var myFunc = function myFunc() { ... }; 30
- 31. Console API var myFunc = function() { ... }; // Замерить время выполнения console.time(‘myFunc’); myFunc(); console.timeEnd(‘myFunc’); // Профилировать console.profile(‘myFunc’); myFunc(); console.profileEnd(‘myFunc’); 31
- 32. На что обратитьвнимание — Собственное время выполнения функций 32
- 33. На что обратитьвнимание — Собственное время выполнения функций — Количество вызовов функций 33
- 34.
- 35. Reflow — процесс вычисления размеров и положения элемента на странице 35
- 36. Repaint — процесс отрисовки визуального отображения элемента 36
- 37. Web Inspector CSSProfiler 37
- 38.
- 39.
- 40. На что обратитьвнимание — Можно ли уменьшить количество перерисовок 40
- 41. На что обратитьвнимание — Можно ли уменьшить количество перерисовок — Если тормозит paint можно ли переверстать 41
- 42. На что обратитьвнимание — Можно ли уменьшить количество перерисовок — Если тормозит paint можно ли переверстать — Время матчинга селекторов 42
- 43.
- 44.
- 45.
- 46. Полезные ссылки http://jsperf.com/ http://stevesouders.com/ http://www.phpied.com/ http://www.igvita.com/ http://gent.ilcore.com http://clck.ru/2XxQX 46
- 47. Михаил Корепанов Разработчик интерфейсов @panyakor panyakor@yandex-team.ru Спасибо