Mihail Korepanov
Transcript of Mihail Korepanov
![Page 1: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/1.jpg)
Я.Субботник, Киев, 28 мая 2011 года�
Разработчик интерфейсовКорепанов Михаил
Cкорость рендеринга страниц:исследования, замеры, автоматизация
![Page 2: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/2.jpg)
Почему?
1
![Page 3: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/3.jpg)
GMail
Google Reader
Яндекс.Почта
NetVibes
280 Slides
Google Docs
Mockingbird
2
![Page 4: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/4.jpg)
Веб уже не тот…3
![Page 5: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/5.jpg)
Веб-приложения4
![Page 6: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/6.jpg)
Веб-приложения
• Все взаимодействие на клиенте• Много JS• Частое обращение к DOM
• Частый reflow/repaint
5
![Page 7: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/7.jpg)
Это так важно?
6
![Page 8: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/8.jpg)
Да!
7
![Page 9: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/9.jpg)
Reflow — процесс вычисления размерови положения элементов на странице
8
![Page 10: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/10.jpg)
Repaint — процесс отрисовки визуального отображения элементов
9
![Page 11: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/11.jpg)
Как измерить?
10
![Page 12: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/12.jpg)
Браузерные инструментыWeb Inspector
![Page 13: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/13.jpg)
Браузерные инструментыSpeed Tracer
![Page 14: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/14.jpg)
Браузерные инструментыDynaTrace Ajax Edition
![Page 15: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/15.jpg)
Браузерные инструментыFirebug + Paint Events
14
![Page 16: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/16.jpg)
Браузерные инструменты
— ?
15
![Page 17: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/17.jpg)
Кроссбраузерно
16
![Page 18: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/18.jpg)
Букмарклет
17
![Page 19: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/19.jpg)
18
![Page 20: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/20.jpg)
Область перерисовки
• --show-paint-rects
19
![Page 21: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/21.jpg)
Область перерисовки
• --show-paint-rects
• --show-composited-layer-borders
20
![Page 22: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/22.jpg)
Область перерисовки
• --show-paint-rects
• --show-composited-layer-borders
• CA_COLOR_OPAQUE=1
21
![Page 23: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/23.jpg)
Область перерисовки
• --show-paint-rects
• --show-composited-layer-borders
• CA_COLOR_OPAQUE=1
• CA_COLOR_FLUSH=1
22
![Page 24: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/24.jpg)
Область перерисовки
• --show-paint-rects
• --show-composited-layer-borders
• CA_COLOR_OPAQUE=1
• CA_COLOR_FLUSH=1
• MozAfterPaint Event
23
![Page 25: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/25.jpg)
24
![Page 26: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/26.jpg)
Время перерисовки
• Смотреть в инструментах
25
![Page 27: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/27.jpg)
Время перерисовки
• Смотреть в инструментах• Мерять FPS при анимации
26
![Page 28: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/28.jpg)
Время перерисовки
• Смотреть в инструментах• Мерять FPS при анимации
• Мерять время скролла
27
![Page 29: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/29.jpg)
Что влияет?
• Много DOM элементов
28
![Page 30: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/30.jpg)
Что влияет?
• Много DOM элементов
• Большая вложенность
29
![Page 31: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/31.jpg)
Что влияет?
• Много DOM элементов
• Большая вложенность• Много селекторов в таблице стилей
30
![Page 32: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/32.jpg)
Что влияет?
• Много DOM элементов
• Большая вложенность• Много селекторов в таблице стилей• Медленные селекторы
31
![Page 33: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/33.jpg)
Что влияет?
• Много DOM элементов
• Большая вложенность• Много селекторов в таблице стилей• Медленные селекторы• Новомодные CSS3 свойства
32
![Page 34: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/34.jpg)
Что влияет?
• Много DOM элементов
• Большая вложенность• Много селекторов в таблице стилей• Медленные селекторы• Новомодные CSS3 свойства
• float для лейаута и таблицы без table-layout: fixed
33
![Page 35: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/35.jpg)
СелекторыВсе на абсолютно-независимых блоках
.b-some-block ul li
.b-some-block__item
34
![Page 36: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/36.jpg)
Селекторы
Как можно меньше каскада
.b-some-block .b-another-block .b-link
.b-some-block_with-link .b-link
35
![Page 37: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/37.jpg)
СелекторыСелекторыПсевдоселекторы быстрее с указанием имени элемента
:link, :visited, :nth-child(2)
a:link, a:visited, div:nth-child(2)
36
![Page 38: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/38.jpg)
СелекторыСелекторы
:hover → a:hover (тормоза в IE7-)
.b-link:hover
a.b-link:hover
37
![Page 39: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/39.jpg)
Селекторы
• CSS3 селекторы тормозят (3-10 раз по сравнению с селектором класса)
• Псевдоэлементы такие же, как и обычные
38
![Page 40: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/40.jpg)
Свойства
• position: fixed (IE8-)
39
![Page 41: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/41.jpg)
• position: relative + отрицательный margin (IE7-)
Свойства
• position: fixed (IE8-)
40
![Page 42: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/42.jpg)
Свойства
• position: relative + отрицательный margin (IE7-)
• position: fixed (IE8-)
• position: absolute без координат позиционирования (IE7)
41
![Page 43: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/43.jpg)
СвойстваСвойства
• position: relative + отрицательный margin (IE7-)
• position: fixed (IE8-)
• position: absolute без координат позиционирования (IE7)
• Картинки через background (IE8-)
42
![Page 44: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/44.jpg)
Свойства
• position: relative + отрицательный margin (IE7-)
• position: fixed (IE8-)
• position: absolute без координат позиционирования (IE7)
• Картинки через background (IE8-)
• word-spacing/letter-spacing: 0 на :hover (IE8)
43
![Page 45: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/45.jpg)
CSS3• box-shadow + inset и большой (>=15px) радиус (WebKit)
44
![Page 46: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/46.jpg)
CSS3
• border-radius (IE9 если много детей)
• box-shadow + inset и большой (>=15px) радиус (WebKit)
45
![Page 47: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/47.jpg)
CSS3
• border-radius (IE9 если много детей)
• box-shadow + inset и большой (>=15px) радиус (WebKit)
• Радиальные градиенты (WebKit)
46
![Page 48: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/48.jpg)
CSS3
• border-radius (IE9 если много детей)
• box-shadow + inset и большой (>=15px) радиус (WebKit)
• Радиальные градиенты (WebKit)
• background-size (WebKit)
47
![Page 49: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/49.jpg)
Картинки• Лучше не растягивать (скорость репейнта падает в ~2 раза)
48
![Page 50: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/50.jpg)
Картинки• Лучше не растягивать (скорость репейнта падает в ~2 раза)
• Не важно, где указан размер, если он верный
49
![Page 51: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/51.jpg)
Картинки• Лучше не растягивать (скорость репейнта падает в ~2 раза)
• Не важно, где указан размер, если он верный• Картинки в спрайте в ~1,5-2 раза медленне (IE6)
50
![Page 52: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/52.jpg)
Картинки• Лучше не растягивать (скорость репейнта падает в ~2 раза)
• Не важно, где указан размер, если он верный• Картинки в спрайте в ~1,5-2 раза медленне (IE6)
• data:uri и mhtml в ~3-4 раза медленне, чем обычные (IE8-)
51
![Page 53: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/53.jpg)
IE8/8 в 2-3 раза медленнее IE8/752
![Page 54: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/54.jpg)
Аппаратное ускорение?
• Есть не везде (Chrome, Safari 5, FF4, Opera 11.50, IE9)
53
![Page 55: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/55.jpg)
Аппаратное ускорение?
• Применяется не ко всему (анимация, SVG, Canvas)
• Есть не везде (Chrome, Safari 5, FF4, Opera 11.50, IE9)
54
![Page 56: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/56.jpg)
Аппаратное ускорение?
• Применяется не ко всему (анимация, SVG, Canvas)
• Можно включить в Safari: -webkit-transform: translateZ(0)
• Есть не везде (Chrome, Safari 5, FF4, Opera 11.50, IE9)
55
![Page 57: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/57.jpg)
Меньше reflow
• Кэшировать результат• Меньше обращений к DOM в onscroll
56
![Page 58: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/58.jpg)
Меньше reflowВставка в DOM
57
![Page 59: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/59.jpg)
Меньше reflowDocumentFragment
58
![Page 60: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/60.jpg)
Меньше reflowinnerHTML
59
![Page 61: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/61.jpg)
Меньше reflowСначала получать значения, потом — менять
60
![Page 62: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/62.jpg)
Меньше reflowИспользовать setTimeout и postMessage
![Page 63: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/63.jpg)
Меньше reflowСкрывать элементы перед изменениями
62
![Page 64: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/64.jpg)
Автоматизация
Selenium
Python
ReflowTimer63
![Page 65: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/65.jpg)
Автоматизация
• Букмарклет для ReflowTimer (http://yandex.st/jslibs/_rt.js)
• Selenium 2 + Python + ReflowTimer (http://github.com/panya/reflow-tests)
64
![Page 66: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/66.jpg)
Вопросы?
65
![Page 67: Mihail Korepanov](https://reader030.fdocuments.us/reader030/viewer/2022012822/55a0a6251a28ab50778b4758/html5/thumbnails/67.jpg)
разработчик интерфейсов
panyakor@yandex-‐team.ru
Корепанов Михаил