Веб-анимация может значительно улучшить взаимодействие с пользователем, но также может повлиять на производительность веб-сайта, если ее не реализовать тщательно. В этой статье я сравню три разных подхода к анимации элемента круга, который постоянно меняется в размерах. Я буду использовать CSS, неоптимизированный и оптимизированный JavaScript и покажу вам, как измерить их производительность с помощью Chrome DevTools.

Введение в веб-анимацию

Анимация — ключевая часть современного веб-дизайна. Их можно реализовать различными методами, чаще всего с помощью чистого CSS или JavaScript. Однако не все методы работают одинаково хорошо. Чтобы продемонстрировать это, я решил протестировать три разных подхода:

• Анимации, созданные с помощью CSS.
• Неоптимизированная анимация с использованием JavaScript.
• Оптимизированная анимация с использованием JavaScript с помощью requestAnimationFrame.

Настройка проекта

Проект доступен на GitHub. Вы можете легко скачать и опробовать его.

клон git https://github.com/TomasDevs/animation- Performance-test.git
cd анимация-тест производительности

После загрузки проверьте папки css-animation, js-animation-optimized и js-animation-unoptimized.

Попробуйте проект на GitHub

Измерение производительности

Для измерения производительности я использовал панель Performance Chrome DevTools. Каждая анимация длилась 10 секунд.

Результаты производительности и анализ

CSS-анимация

Источник: Создано TomasDevs (2024)

• Общее время блокировки: 390 мс

Примечания:
CSS-анимации, как правило, работают лучше, поскольку они передаются в собственный механизм рендеринга браузера, особенно при работе с такими свойствами, как преобразование или непрозрачность. Эта анимация очень эффективна и минимально влияет на время написания сценариев и рендеринга.

Оптимизированная анимация JavaScript

Источник: Создано TomasDevs (2024)

• Общее время блокировки: 400 мс

Примечания:
Оптимизированная версия JS использует requestAnimationFrame и функцию плавной синусоидальной волны для управления анимацией. Хотя для его написания требуется больше времени, чем для CSS-анимации, он по-прежнему работает достаточно эффективно и сокращает время рендеринга и рисования.

Неоптимизированная анимация JavaScript

Источник: Создано TomasDevs (2024)

• Общее время блокировки: 440 мс

Примечания:
Неоптимизированная версия JS использует простой цикл без учета прогресса времени. Это приводит к значительному увеличению времени написания сценариев, рендеринга и рисования из-за неэффективных вычислений для каждого кадра анимации.

Заключение

• CSS-анимация в целом наиболее эффективна для простых анимаций. Они получают выгоду от аппаратного ускорения браузера и снижают нагрузку на основной поток.
• Оптимизированная JavaScript анимация занимает второе место. Если вам нужен более динамичный контроль над анимацией, оптимизация с помощью requestAnimationFrame необходима для обеспечения плавной работы.
• Неоптимизированные анимации JavaScript работают хуже всего, так как создают ненужную нагрузку на механизм рендеринга браузера из-за неэффективных вычислений.

Присоединяйтесь к обсуждению

Каков ваш опыт оптимизации веб-анимации? Есть ли у вас какие-либо дополнительные советы или рекомендации по повышению производительности? Дайте мне знать в комментариях ниже!