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.

Отрисовать за 16 мс / Глеб Михеев (Beta Digital Production)

1,284 views

Published on

Здесь мы поговорим о производительности в браузере, а особенно об производительных анимациях и внутреннем устройстве браузера.

Основные тезисы выступления:
- Что такое лаги, и почему они происходят.
- Как браузер отрисовывает сайт.
- Что такое Vsync, и почему наша цель ~60fps.
- Как сделать анимацию плавной.
- Как браузер "ускоряется" при помощи GPU.
- Как браузеру помочь "правильно" ускориться.
- Основные ошибки при анимации (антипаттерны производительной анимации).
- CSS анимации vs JS анимации.
- Инструментарий для высокопроизводительных анимаций.
- Анимация на мобильных устройствах.
- Блокировка интерфейса, откуда берется и как избежать.
- Психология пользователя:
-- Мертвый интерфейс (почему критически важно, чтобы интерфейс реагировал).
-- Излишне быстрая реакция интерфейса.
-- Фиксация изменений (кейс от 37signals).
-- Почему индикаторы прогресса важны.
-- Нативный индикатор против собственного (кейс от facebook).

Published in: Engineering

Отрисовать за 16 мс / Глеб Михеев (Beta Digital Production)

  1. 1. Отрисовать за 16ms
  2. 2. github.com/glebmachine facebook.com/glebmachine Михеев Глеб Технический директор
  3. 3. Лаги
  4. 4. Что такое лаги? Lag - задержка между действием и ожидаемым резуль
  5. 5. Какие лаги бывают — Прерывистая анимация — Подвисание при изменениях на странице — Подлагивания при скролле — Блокировка экрана при вычислениях
  6. 6. Почему они нас раздражают?
  7. 7. Почему они нас раздражают? — Прерывистая анимация — Подлагивания при скролле
  8. 8. — Подвисание при изменениях на странице — Блокировка экрана при вычислениях Почему они нас раздражают?
  9. 9. — Медленный отклик — Недостаточно быстрая смена кадров Причины Почему они нас раздражают?
  10. 10. Может виноват браузер?
  11. 11. 60hz ≈ 16ms Может виноват браузер?
  12. 12. Может виноват браузер?
  13. 13. — Отрисовать ~60 кадров в секунду — На один кадр не более 16мс Чтобы обеспечить плавность нужно: Может виноват браузер?
  14. 14. Что значит отрисовать?
  15. 15. Что значит отрисовать? PARSING HTML/CSS РАСЧЕТ СТИЛЕЙ Отрисовка это процесс визуализации состоит из 5-ти стадий
  16. 16. PARSING HTML/CSS htmlhead h1 p aspan body Ссылка для домашнего чтения: http://bit.ly/2eM71AE font-size: 16px body font-size: 16px color: #252525 p font-size: 16px color: #333 display none span font-size: 16px font-size: 46px h1 font-size: 16px color: blue a DOM CSSOM РАСЧЕТ СТИЛЕЙ Что значит отрисовать?
  17. 17. PARSING HTML/CSS РАСЧЕТ СТИЛЕЙ htmlhead h1 p aspan body font-size: 16px body font-size: 16px color: #252525 p font-size: 16px color: blue a font-size: 16px color: #333 display none span font-size: 16px font-size: 46px h1 Ссылка для домашнего чтения: http://bit.ly/2eM8eIq Render Tree РАСЧЕТ МАКЕТА Что значит отрисовать?
  18. 18. PARSING HTML/CSS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА КОМПОНОВКА СЛОЕВ h1 p Ссылка для домашнего чтения: http://bit.ly/2eM8eIq ОТРИСОВКА ЭЛЕМЕНТОВ Что значит отрисовать?
  19. 19. PARSING HTML/CSS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ Ссылка для домашнего чтения: http://bit.ly/2eM8eIq КОМПОНОВКА СЛОЕВ Что значит отрисовать?
  20. 20. PARSING HTML/CSS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ Ссылка для домашнего чтения: http://bit.ly/2frF5Ws Что значит отрисовать?
  21. 21. — Парсинг HTML/CSS — Вычисление стилей Итак, какие стадии отрисовки мы знаем? — Расчет макета — Визуализация элементов — Магическая компоновка Что значит отрисовать?
  22. 22. Как отрисовываются изменения?
  23. 23. Изменения страницы Какую работу влекут за собой изменения? Ссылка для домашнего чтения: http://bit.ly/2f7rFOW ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ — Перерисовка (repaint) ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ — Перерасчет макета (reflow)
  24. 24. Ссылка для домашнего чтения: http://bit.ly/2f7rFOW Магия компоновки — Некоторые блоки выносятся в отдельные слои — К слоям применяются матричные трансформации — К слоям применяется прозрачность — Трансформации считаются на видеокарте — Слои клеятся между собой на видеокарте Изменения страницы
  25. 25. Изменения страницы
  26. 26. Изменения в документе — Перерисовка (repaint) ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ — Перерасчет макета (reflow) ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ Ссылка для домашнего чтения: http://bit.ly/2f7rFOW — Компоновка слоев (Composite layer) ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ Изменения страницы
  27. 27. Полезные факты — Для старичков: translateZ или translate3d — Используйте will-change — CSS анимации слоев не блокируются конвейером — Избегайте большого количества слоев — Убирайтесь за собой Изменения страницы — Выгружайте из памяти невидимые слои
  28. 28. Теперь немного практики
  29. 29. ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ
  30. 30. ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ
  31. 31. ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ
  32. 32. ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ
  33. 33. ИСПОЛНЕНИЕ JS РАСЧЕТ СТИЛЕЙ РАСЧЕТ МАКЕТА ОТРИСОВКА ЭЛЕМЕНТОВ КОМПОНОВКА СЛОЕВ
  34. 34. Досрочная инвалидация
  35. 35. Разберем ситуацию — Спрашиваем высоту (получаем из кеша) — Обходим в цикле 200 элементов — Устанавливаем высоту (сброс кеш документа) — Запрашиваем высоту следующего блока — Браузер досрочно делает рефлоу Досрочная инвалидация — Повторяем упражнение 199 раз!!!
  36. 36. Досрочная инвалидация
  37. 37. Досрочная инвалидация
  38. 38. Перерисовки — Все анимации должны работать на Composition — Стоит избегать Repaint и Reflow — CSS анимации и Web Animation API ультрабыстрые — JS анимации дороже, но не хуже — Разделяйте цикл на чтение и запись — Используйте requestAnimationFrame
  39. 39. Спасибо за внимание!

×