Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Где еще живет скорость в Web
MoscowJS #24
Олег Елифантьев, @oelifantiev
Олег Елифантьев
Компания Тензор, г. Ярославль
Веб-разработчик (JavaScript, Node.JS)
Организатор Yaroslavl Frontend Meetup ...
Давайте нарисуем снежинки?
Менеджер: К новому году на сайт клиента нужны снежинки!
Dev: Okay boss!
3
Снежинка?
• Простая текстовая нода
• position: absolute
• Анимируем через left, top
4
$('.snowflake').each(function(){
var pos = $(this).offset();
$(this).css({
top: pos.top + ...,
left: pos.left + ...
});
})...
Нужно больше
снежинок!
=(
Может быть проблема в JavaScript?
10
jQuery тормозит.
Расходимся.
=)
Анимировать будем так...
function animate() {
var col = document.querySelectorAll('.snowflake');
for (var i = 0; i < col.l...
Что происходит?
Как обычно, нам поможет DevTools
• Поймем что мерять
• Локализуем проблему
• Полечим
15
Будем мерять FPS
16
Маловато!
• Приемлемо — хотя бы 30fps (33 ms/frame!)
• Идеально — 60fps (16.6 ms/frame!)
17
Почему так получилось?
Запишем все происходящее
18
223 ms!
Style
recalculation
Style recalculation — вычисление стилей, применяемых к конкретному
элементу.
Это дешевая операция .
22
Layout
HTML
<body>
<p>
Длинный текст
<img align="right" src="..."/>
Еще текст
</p>
</body>
01.
02.
03.
04.
05.
06.
07.
24
HTML превращается в DOM-дерево
+ body
+--p
+--#text
+-- img
+-- #text
25
Есть еще"дерево рендеринга"
Это длинный текст, который браузер
разобьет на прямоугольники (свой под
каждую строку) в завис...
Есть еще"дерево рендеринга"
Это длинный текст, который браузер
разобьет на прямоугольники (свой под
каждую строку) в завис...
Layout — пересчет дерева рендеринга на основании стилей элементов
и других входных параметров, например размера окна брауз...
Что приводит к инвалидации дерева
рендеринга?
• Изменение определенных стилей элемента
• Размер, гарнитура шрифта
• Геомет...
Оптимизации…
Браузер всячески старается оптимизировать процесс. Например, он
откладывает применение стилей и пересчет дере...
Ложка дегтя
Но если в коде мы начинаем читать стилевую информацию, браузеру
приходится применить все отложенные расчеты зд...
Что приводит к"чтению стилей"
• getComputedStyle(elt)
• elt.style.???
• elt.getBoundingClientRect()
33
Вернемся к нашей анимации
var col = document.querySelectorAll('.snowflake');
for (var i = 0; i < col.length; i++) {
// rea...
Как исправить?
Все очень просто!
Нужно сначала все прочитать, а потом все записать!
Спасибо, Кэп!
35
function animate() {
var col = document.querySelectorAll('.snowflake');
[].slice.call(col)
// read all
.map(readCoordinate...
Было
Стало
Paint
Еще раз посмотрим на Timeline
Включаем "Show paint rectangles"
44
Что делать? Заставим трудиться GPU!
Вместо left и top для перемещения используем CSS Transforms
transform: translate3d(x, ...
Экономная
анимация
requestAnimationFrame!
• Экономит CPU
• Делает анимацию более плавной
• Дает "привязку ко времени"
49
Используем знание о времени!
function animate(ts) {
var col = document.querySelectorAll('.snowflake');
[].slice.call(col)
...
will-change
CSS-свойство"will-change"
Позволяет подсказать браузеру, что будет происходить с элементом.
Браузер может использовать для...
will-change ?
Опыт автора: Chrome 43 — эффект сомнительный.
53
Disclaimer :)
Почти все это актуально не только для анимации! Любой код,
работающий с DOM, может выиграть!
• Сначала чтени...
Спасибо за внимание!
Доп. материалы: http://bit.ly/render-speed
Вопросы?
MoscowJS #24
Елифантьев Олег, Тензор
@oelifantiev...
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24
Upcoming SlideShare
Loading in …5
×

1

Share

Download to read offline

"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24

Download to read offline

Очень часто приходится описывать различные объекты и программы с помощью предметно-специализированных языков программирования. В докладе будет рассказано, как можно разработать для своего языка программирования интерпретатор и компилятор в JavaScript с помощью популярного генератора парсеров Jison.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

"Где еще живет скорость в web", Олег Елифантьев, MoscowJS 24

  1. 1. Где еще живет скорость в Web MoscowJS #24 Олег Елифантьев, @oelifantiev
  2. 2. Олег Елифантьев Компания Тензор, г. Ярославль Веб-разработчик (JavaScript, Node.JS) Организатор Yaroslavl Frontend Meetup (http://yarfrontend.ru) @oelifantiev 2
  3. 3. Давайте нарисуем снежинки? Менеджер: К новому году на сайт клиента нужны снежинки! Dev: Okay boss! 3
  4. 4. Снежинка? • Простая текстовая нода • position: absolute • Анимируем через left, top 4
  5. 5. $('.snowflake').each(function(){ var pos = $(this).offset(); $(this).css({ top: pos.top + ..., left: pos.left + ... }); }); setTimeout(animate, 0); 5
  6. 6. Нужно больше снежинок!
  7. 7. =(
  8. 8. Может быть проблема в JavaScript? 10
  9. 9. jQuery тормозит. Расходимся.
  10. 10. =)
  11. 11. Анимировать будем так... function animate() { var col = document.querySelectorAll('.snowflake'); for (var i = 0; i < col.length; i++) { var rect = col[i].getBoundingClientRect(); col[i].style.top = ..., col[i].style.left = ... } setTimeout(animate, 0); } 13
  12. 12. Что происходит? Как обычно, нам поможет DevTools • Поймем что мерять • Локализуем проблему • Полечим 15
  13. 13. Будем мерять FPS 16
  14. 14. Маловато! • Приемлемо — хотя бы 30fps (33 ms/frame!) • Идеально — 60fps (16.6 ms/frame!) 17
  15. 15. Почему так получилось? Запишем все происходящее 18
  16. 16. 223 ms!
  17. 17. Style recalculation
  18. 18. Style recalculation — вычисление стилей, применяемых к конкретному элементу. Это дешевая операция . 22
  19. 19. Layout
  20. 20. HTML <body> <p> Длинный текст <img align="right" src="..."/> Еще текст </p> </body> 01. 02. 03. 04. 05. 06. 07. 24
  21. 21. HTML превращается в DOM-дерево + body +--p +--#text +-- img +-- #text 25
  22. 22. Есть еще"дерево рендеринга" Это длинный текст, который браузер разобьет на прямоугольники (свой под каждую строку) в зависимости от размеров родительского блока, размера шрифта, гарнитуры и даже этого кота. Набор этих прямоугольников составит "дерево рендеринга". Тут еще немного текста чтобы получилось красиво… 26
  23. 23. Есть еще"дерево рендеринга" Это длинный текст, который браузер разобьет на прямоугольники (свой под каждую строку) в зависимости от размеров родительского блока, размера шрифта, гарнитуры и даже этого кота. Набор этих прямоугольников составит "дерево рендеринга". Тут еще немного текста чтобы получилось красиво… 27
  24. 24. Layout — пересчет дерева рендеринга на основании стилей элементов и других входных параметров, например размера окна браузера. Это дорогая операция! 28
  25. 25. Что приводит к инвалидации дерева рендеринга? • Изменение определенных стилей элемента • Размер, гарнитура шрифта • Геометрия (width, height, margin, etc…) • etc… • Изменение DOM-дерева 29
  26. 26. Оптимизации… Браузер всячески старается оптимизировать процесс. Например, он откладывает применение стилей и пересчет дерева рендеринга до окончания синхронного блока JavaScript. Таким образом он "пакетирует" несколько изменений в один расчет. 30
  27. 27. Ложка дегтя Но если в коде мы начинаем читать стилевую информацию, браузеру приходится применить все отложенные расчеты здесь и сейчас для того, чтобы ответить на наш запрос. Это происходит синхронно. Все прочие процессы блокируются! Эффект сравним с работой Garbage Сollector. 31
  28. 28. Что приводит к"чтению стилей" • getComputedStyle(elt) • elt.style.??? • elt.getBoundingClientRect() 33
  29. 29. Вернемся к нашей анимации var col = document.querySelectorAll('.snowflake'); for (var i = 0; i < col.length; i++) { // read one, forced layout var rect = col[i].getBoundingClientRect(); // write one, layout invalidated col[i].style.top = ..., col[i].style.left = ... } 34
  30. 30. Как исправить? Все очень просто! Нужно сначала все прочитать, а потом все записать! Спасибо, Кэп! 35
  31. 31. function animate() { var col = document.querySelectorAll('.snowflake'); [].slice.call(col) // read all .map(readCoordinates) .map(applyAnimationStep) // write all .forEach(applyToDOM); setTimeout(animate, 0); } 36
  32. 32. Было
  33. 33. Стало
  34. 34. Paint
  35. 35. Еще раз посмотрим на Timeline Включаем "Show paint rectangles" 44
  36. 36. Что делать? Заставим трудиться GPU! Вместо left и top для перемещения используем CSS Transforms transform: translate3d(x, y, z); 46
  37. 37. Экономная анимация
  38. 38. requestAnimationFrame! • Экономит CPU • Делает анимацию более плавной • Дает "привязку ко времени" 49
  39. 39. Используем знание о времени! function animate(ts) { var col = document.querySelectorAll('.snowflake'); [].slice.call(col) .map(calculateNextPosition(ts)) .forEach(applyToDOM); requestAnimationFrame(animate); } 50
  40. 40. will-change
  41. 41. CSS-свойство"will-change" Позволяет подсказать браузеру, что будет происходить с элементом. Браузер может использовать для оптимизаций .someElt { ... } .someElt:hover { will-change: transform; } .someElt:active { transform: rotate(90deg); } 52
  42. 42. will-change ? Опыт автора: Chrome 43 — эффект сомнительный. 53
  43. 43. Disclaimer :) Почти все это актуально не только для анимации! Любой код, работающий с DOM, может выиграть! • Сначала чтение, затем запись • transform: translate3d • requestAnimationFrame • will-change • И не забывайте про DevTools! 54
  44. 44. Спасибо за внимание! Доп. материалы: http://bit.ly/render-speed Вопросы? MoscowJS #24 Елифантьев Олег, Тензор @oelifantiev 56
  • brodybroderix

    Jul. 30, 2015

Очень часто приходится описывать различные объекты и программы с помощью предметно-специализированных языков программирования. В докладе будет рассказано, как можно разработать для своего языка программирования интерпретатор и компилятор в JavaScript с помощью популярного генератора парсеров Jison.

Views

Total views

621

On Slideshare

0

From embeds

0

Number of embeds

8

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×