2. Профилирование
Михаил Корепанов
Разработчик интерфейсов

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

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

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

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

7. Быстро?

8. 1-2 секунды —
первоначальная загрузка.

9. 100 мс — время реакции
на действие.

10. Какие есть
инструменты?

11. Профилирование сети

12. Firebug Net Panel

13. Web Inspector Network

14. IE9 Developer Tools

15. Opera Dragonfly

16. На что обратить внимание
Количество запросов

17. На что обратить внимание
Количество запросов
Время выполнения каждого запроса

18. На что обратить внимание
Количество запросов
Время выполнения каждого запроса
Есть ли блокирующие запросы

19. На что обратить внимание
Количество запросов
Время выполнения каждого запроса
Есть ли блокирующие запросы
Можно ли какие-то запросы распараллелить

20. Профилирование скриптов

21. До появления встроенных
профайлеров
var begin = +new Date();
myFunction();
var end = +new Date();
// Время выполнения myFunction
var time = end - begin;
alert(time + ‘ ms’);

22. Web Inspector Profiles

23. Firebug profiler

24. IE9 Developer Tools Profiler

25. Что общего
Self — собственное время выполнения функции
Total — время выполнения, включая время
вызываемых функций

26. Top Down view
var Function1 = function() {
Function1 };
Function2();
Function2 var Function2 = function() {
Function3 Function3();
};

27. Bottom Up view
var Function1 = function() {
Function3 };
Function2();
Function2 var Function2 = function() {
Function1 Function3();
};

28. Анонимные функции

29. Анонимные функции

30. Анонимные функции
var myFunc = function() { ... };
myFunc.displayName = ‘myFunc’;
// Или
// Засоряет глобальную область видимости в IE < 8
var myFunc = function myFunc() { ... };

31. Console API
var myFunc = function() { ... };
// Замерить время выполнения
console.time(‘myFunc’);
myFunc();
console.timeEnd(‘myFunc’);
// Профилировать
console.profile(‘myFunc’);
myFunc();
console.profileEnd(‘myFunc’);

32. На что обратить внимание
Собственное время выполнения функций

33. На что обратить внимание
Собственное время выполнения функций
Количество вызовов функций

34. Профилирование рендеринга

35. Reflow — процесс
вычисления размеров и
положения элемента на
странице

36. Repaint — процесс
отрисовки визуального
отображения элемента

37. Web Inspector CSS Profiler

38. Web Inspector Timeline

39. Dragonfly CSS Profiler

40. На что обратить внимание
Можно ли уменьшить количество перерисовок

41. На что обратить внимание
Можно ли уменьшить количество перерисовок
Если тормозит paint можно ли переверстать

42. На что обратить внимание
Можно ли уменьшить количество перерисовок
Если тормозит paint можно ли переверстать
Время матчинга селекторов

43. Комплексные инструменты

44. Google SpeedTracer

45. DynaTrace AJAX Edition

46. Полезные ссылки
http://jsperf.com/
http://stevesouders.com/
http://www.phpied.com/
http://www.igvita.com/
http://gent.ilcore.com
http://clck.ru/2XxQX

47. Михаил Корепанов
Разработчик интерфейсов
@panyakor
panyakor@yandex-team.ru
Спасибо