Современные браузеры могут анимировать два свойства CSS: transform и opacity.
Если вы анимируете что-то еще, есть вероятность, что вы не добьетесь гладких 60 кадров в секунду (FPS). В этом посте объясняется, почему это так.
Производительность анимации и частота кадров #
Широко распространено мнение, что частота кадров 60 кадров в секунду является целевой при анимации чего-либо в Интернете. Такая частота кадров гарантирует, что ваши анимации будут выглядеть плавно. В Интернете кадр - это время, необходимое для выполнения всей работы, необходимой для обновления и перерисовки экрана. Если каждый кадр не завершается в течение 16,7 мс (1000 мс / 60 × 16,7), пользователи будут воспринимать задержку.
Конвейер рендеринга #
Чтобы отобразить что-либо на веб-странице, браузер должен выполнить следующие последовательные шаги:
- Стиль: вычислите стили, которые применяются к элементам.
- Макет: создайте геометрию и положение для каждого элемента.
- Краска: заполните пиксели для каждого элемента слоями.
- Композитный: нарисуйте слои на экране.
Эти четыре шага известны как конвейер рендеринга браузера.
Когда вы анимируете что-то на странице, которая уже загружена, эти шаги должны повториться. Этот процесс начинается с шага, который необходимо изменить, чтобы разрешить анимацию.
Как упоминалось ранее, эти шаги являются последовательными. Например, если вы анимируете что-то, что изменяет макет, этапы рисования и компоновки также должны выполняться снова. Поэтому анимация чего-то, что изменяет макет, обходится дороже, чем анимация чего-то, что изменяет только компоновку.
Для более глубокого понимания того, как именно этот процесс происходит в браузере, прочитайте от фигурных скобок до пикселей и посмотрите изнутри на современный браузер browser.
Анимация свойств макета #
Изменения компоновки включают в себя вычисление геометрии (положения и размера) всех элементов, затронутых изменением. Если вы измените один элемент, возможно, потребуется пересчитать геометрию других элементов. Например, если вы измените ширину <html>элемента, это может повлиять на любой из его дочерних элементов. Из-за того, что элементы переполняются и влияют друг на друга, изменения ниже по дереву иногда могут привести к вычислениям макета вплоть до вершины.
Чем больше дерево видимых элементов, тем больше времени требуется для выполнения расчетов компоновки.
Анимация свойств краски #
Рисование - это процесс определения, в каком порядке элементы должны быть нарисованы на экране. Часто это самая продолжительная из всех задач в конвейере.
Большая часть рисования в современных браузерах выполняется в программных растеризаторах. В зависимости от того, как элементы в вашем приложении сгруппированы по слоям, другие элементы, помимо измененного, также могут потребоваться для рисования.
Анимация составных свойств #
Компоновка - это процесс разделения страницы на слои, преобразования информации о том, как должна выглядеть страница, в пиксели (растеризация) и объединения слоев для создания страницы (компоновка).
Вот почему opacityнедвижимость включена в список вещей, которые дешево оживить. Пока это свойство находится в его собственном слое, изменения в нем могут быть обработаны графическим процессором на этапе компоновки. Браузеры на основе Chromium и WebKit создают новый слой для любого элемента, на котором есть CSS-переход или анимация opacity.
Более подробно о композитинге читайте в статье GPU Animation: делаем это правильно
Что такое слой? #
Помещая объекты, которые будут анимированы или перенесены на новый слой, браузеру нужно перекрасить только эти элементы, а не все остальное. Возможно, вы знакомы с концепцией Photoshop о слое, который содержит набор элементов, которые можно перемещать вместе. Слои рендеринга браузера аналогичны этой идее.
Хотя браузер хорошо справляется с принятием решений о том, какие элементы должны быть на новом слое, если он пропустит один, есть способы принудительно создать слой. Вы можете узнать об этом в разделе ”Как создавать высокопроизводительные анимации”. Однако создание новых слоев должно выполняться с осторожностью, поскольку каждый слой использует память. На устройствах с ограниченной памятью создание новых слоев может вызвать большую проблему с производительностью, чем та, которую вы пытаетесь решить. Кроме того, текстуры каждого слоя должны быть загружены в графический процессор. Поэтому вы вполне можете столкнуться с ограничениями пропускной способности между процессором и графическим процессором.
Вы можете прочитать хорошее объяснение слоев, а также того, как создавать их в слоях и как их принудительно использовать.
Производительность CSS против JavaScript #
Вы можете задаться вопросом: лучше ли с точки зрения производительности использовать CSS или JavaScript для анимации?
Анимации на основе CSS и веб-анимации (в браузерах, поддерживающих API) обычно обрабатываются в потоке, известном как поток compositor. Это отличается от _основного потока браузера, где выполняются стиль, макет, рисование и JavaScript. Это означает, что если браузер выполняет некоторые дорогостоящие задачи в основном потоке, эти анимации могут продолжаться без прерывания.
Как объясняется в этой статье, другие изменения в преобразованиях и непрозрачности во многих случаях также могут обрабатываться потоком компоновщика.
Если какая-либо анимация запускает paint, layout или оба, для выполнения работы потребуется основной поток. Это верно как для анимации CSS, так и для JavaScript, и накладные расходы на верстку или рисование, скорее всего, затмят любую работу, связанную с выполнением CSS или JavaScript, что делает вопрос спорным.