Лечим непроизводительные анимации

Доклад Шабалина Николая

Логотип WSD

Рендеринг

Дерево рендеринга

Pipeline

Pipeline > JavaScript

График прямой пропорциональности NODE к сложности

Pipeline > Style

Pipeline > Style

            @media screen and (min-width: 670px) {  
              .block { 
                  background-color: rebeccapurple;
              } 
            }
        

Pipeline > Style

Pipeline > Style

            document.querySelector('.block')
            .addEventListener('click', event => {
              event.preventDefault(); { 
              const newElement = document.createElement('div');
              newElement.classList.add('active');
            });
        

Pipeline > Layout

Любой запрос к:

Pipeline > Layout

Info

Pipeline > Layout

It's a trap

            function frame() {
              const element = document.querySelector('.block');
              element.style.width = element.offsetWidth * 2;
            };
            requestAnimationFrame(frame);
            };
        

Pipeline > Paint

Pipeline > Paint

Info

Pipeline > Composite

Pipeline

Bad pipeline

Good pipeline

Best pipeline

RAIL

Response
Animation
Idle
Load

Response

100ms

Animation

16ms

Animation

16ms
10ms

Советы

DOM Event {passive: true}

            document.querySelector('.block')
            .addEventListener('wheel', () => {...}, {passive:true})
            .addEventListener('touchstart', () => {...}, {passive:true});
        

Всем привет. Меня зовут Николай.

Я верстаю уже 6 лет

Сейчас работаю фронтендером в Коде Безопасности

Код Безопасности

will-change

Will-change

            .circles {
              will-change: transform;
            }
        

Полезные ресурсы

Вопросы?