Download - Марина Широчкина "Производительность клиентсайда через тестирование скорости отрисовки страниц"
руководитель группы Я.Субботник в Санкт-Петербурге, 1 декабря 2012
Производительность клиентсайда и тестирование скорости отрисовки страницы
Марина Широчкина
Откуда проблемы на клиентсайде?
3
Производительность client-‐side -‐ это
4
Даже если с server-‐side все хорошо,
5
это еще ничего не гарантирует
6
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
7
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
8
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
9
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
10
Причины медленной работы • Сетевые проблемы
• Конфигурационные проблемы • Неоптимальная верстка
Зачем нужно тестирование?
12
Best pracTces и оптимизация
13
Был ли профит?
14
Мониторинг скорости загрузки
• NavigaTon Timing h^p://www.w3.org/TR/navigaTon-‐Tming/ • Boomerang (Yahoo) h^ps://github.com/yahoo/boomerang
15
Тестирование скорости загрузки
• WebPageTest h^p://www.webpagetest.org/ • Selenium + BrowserMobProxy+HarStorage h^p://code.google.com/p/selenium/ h^ps://github.com/webmetrics/browsermob-‐proxy h^ps://github.com/pavel-‐paulau/harstorage
Что выбрали мы?
17
Чего хотели мы:
• полный комплект браузеров
18
Чего хотели мы:
• полный комплект браузеров • эмулирование сетевых условий
19
Чего хотели мы:
• полный комплект браузеров • эмулирование сетевых условий • измерять не только сетевые метрики
20
Отрисовка
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
Tme(PageStartPaint) = 1880мс
38
Tme(PageEndPaint) = 7140мс
39
В числах и в сравнении
40
Tme(ElementStartPaint)/Tme(ElementEndPaint)
Как получилось?
42
Это работает. Вы даже могли об этом слышать.
http://bit.ly/SjS0FQ
http://bit.ly/ViTiW1
43
Минус N 1 Дорого – пришлось сделать инструмент
44
Минус N 2 Подход «сверху вниз»
User
Layout
Browser
Client’s computer
Network
Server-‐side
45
Плюсы Новые метрики и взгляд с нового ракурса
46
Бывает всякое – проблемы в Chrome
47
Бывает всякое – отрисовка на горячем кеше не всегда быстрее
48
Бывает всякое
49
Все меняется
Коротко об инструменте
51
Доступные условия:
52
Доступные условия: прогрев и очистка
DNS cache Files cache
Cookies
LocalStorage AppCache
53
Доступные условия:
RTT Bandwidth
Packet loss
54
Сценарий теста прост
55
Сырые данные: захват изображения (100 fps±)
56
Сырые данные: запись дампа трафика
57
Обработка данных: конвертация в HAR
58
Обработка данных: извлечение области viewport
59
Обработка данных: удаление соседних дубликатов
60
Обработка данных: удаление единичных циклических аномалий
61
Обработка данных: работа с масками
62
Обработка данных: отчет в формате csv
63
Работа продолжается..
64
Open source? Поговорим в 2013 году
Вопросы?
