Я смотрел несколько потрясающих анимаций в Интернете, и мне внезапно пришла в голову мысль — стоит ли нам делать анимацию на CSS или на JavaScript? И, что, возможно, более важно, как это влияет на производительность? 🤔
Итак, для начала давайте поговорим о CSS. В CSS есть два основных игрока, которые могут помочь вам с анимацией.
CSS-переходы:
С их помощью очень легко transitions плавно transitions перевести элемент из одного стиля в другой. Плюс, что интересно, даже если элемент находится в середине перехода, новый просто возобновляет работу с того места, где он остановился.
CSS-анимации:
С другой стороны, у нас есть CSS animations. Это позволит вам проявить творческий подход. Вы можете анимировать между набором начальных значений свойств и окончательным набором. Это похоже на постановку танца для элементов вашего сайта.
запросАнимацияФрейм:
Теперь вот здесь на сцену выходит JavaScript. requestAnimationFrame() — очень эффективный трюк JavaScript. Это похоже на переход за кулисы цикла рендеринга браузера. В отличие от методов старой школы setTimeout() или setInterval(), которым требуются определенные интервалы времени, requestAnimationFrame() вызывает функцию обратного вызова непосредственно перед следующей перерисовкой. Это означает, что вы можете обновить стиль элемента в полной гармонии с рендерингом браузера.
Противостояние производительности: CSS против requestAnimationFrame()
Теперь поговорим о производительности. CSS-анимация и анимация JavaScript могут быть одинаковыми (по крайней мере, в Firefox).
Анимации обычно обрабатываются в потоке, известном как «поток композитора». Это отличается от «основного потока» браузера (где выполняются стили, макет, рисование и JavaScript). Это означает, что если браузер выполняет какие-то ресурсоемкие задачи в основном потоке, эти анимации могут продолжаться без прерывания.
А используя правильный набор свойств CSS, мы можем создавать высокопроизводительные CSS-анимации, которые будут запускаться в потоке композитора и не влиять на основной поток.
Итак, когда анимация (CSS/JS) используется (или запускает отрисовку, макет или и то, и другое), разницы в производительности нет.
В двух словах:
Итак, каков итог 🤔🤔🤔?
Браузеры умны, они умеют оптимизировать. Как правило, старайтесь придерживаться CSS-переходов и анимации, когда можете. Они надежны, широко поддерживаются и могут бесперебойно выполнять свою работу.
Но вот что самое интересное: если вы готовите анимацию, столь же сложную, как секретный рецепт торта, тогда, друг мой, анимация на основе JavaScript может быть хорошим выбором.
Мораль истории? Выбирайте инструмент анимации с умом, исходя из потребностей вашего проекта 😎✨
Надеюсь, вы прекрасно провели время, читая это. Продолжай учиться! 📚✨
