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