Web Animations — taking performance to the edge

 
Время проведения
21
ноября2015
Завершено

Описание

Интерфейс становится плоским, а это означает что нужно находить новый тип интерактивного взаимодействия. Если раньше "глубину" и реалистичность элемента мог обеспечить скевоморфизм — объёмные кнопки, тени и текстуры, то при плоском дизайне такую роль исполняет анимация. В тренде уменьшение количества страниц (переходов) для выполнения конкретного действия. И тут огромную роль играет анимация. Мы можем прятать элементы по необходимости и использовать многослойность. Все для того, чтобы пользователь совершил все необходимые действия на одной странице.

На практике же случается так, что одни анимации проигрываются плавно, а другие — нет. Почему так происходит, почему теряются кадры, почему возникают "тормоза" на мобильных устройствах и как работают современные браузеры (repaint, reflow, composite, GPU acceleration) — эти вопросы мы подробно расcмотрим на мастер-классе. Также поговорим о новом способе управлениями анимациями — Web Animations API 1.0.

Уровень:

- Senior

Что необходимо для участия в мастер-классе:

- умение верстать;
- хорошее понимание CSS3 transitions/animations;
- продвинутое знание Vanilla JS (ES6).

План мероприятия
  1. Как работают браузеры:
    1. Высокоуровневая архитектура браузера (вкладки, процессы)
    2. Парсинг HTML/CSS и построение DOM/CSSOM
    3. Построение RenderTree
  2. Контекст наложения:
    1. Как работает z-index
    2. Stacking context edge cases
    3. Когда можно обойтись без z-index
    4. RenderLayer и RenderObject
  3. Layout (reflow):
    1. Dirty bit system
    2. Глобальный и инкрементальный layout
    3. Синхронный и асинхронный layout
  4. Paint:
    1. Глобальный и инкрементальный paint
    2. Порядок paint
    3. Blink Slimming Paint
  5. Composite:
    1. Graphics terminology
    2. Blink compositor
    3. The GPU Process
    4. The Threaded Compositor
    5. Software compositor
  6. Способы анимирования:
    1. CSS animation/transition
    2. SVG Animations (SMIL) и когда они нужны
    3. Почему requestAnimationFrame?
  7. Web Animations API 1.0:
    1. AnimationPlayer и Timeline
    2. GroupEffects и SequenceEffects
    3. Motion Paths
  8. Отладка анимаций:
    1. Chrome DevTools: FPS meter, composited layer borders, paint
    2. Firefox Developer Tools
  9. GPU ускоренные анимации:
    1. GraphicsLayer и GraphicsContext
    2. Какие анимации работают быстро
    3. will-change и другие способы "активации" GraphicsLayer
    4. Чего следует опасаться при использовании GPU слоев
  10. Обзор типичных проблем производительности:
    1. Как ограничиться лишь быстрыми анимациями
    2. Производительные аналоги border-color, background-{color,size,position}
    3. Are SVG filters fast yet?