🍬 Почему CSS-анимация эффективнее JavaScript?

📢 Всем привет, я Сяо Ченг, второкурсник фронтенд-энтузиаст.

📢 Эта статья будетжизнерадостныйВозьмите вас понять разницу между CSS и JS анимацией

📢Будь верен себе и люби жизнь

введение

Говоря об анимации, конечно, это очень интересно. Вы можете смахнуть вверх и увидеть обложку выше. Разве это не круто, вы думаете, я написал это в коде?

Конечно, это невозможно Я такой подозрительный, как я могу получить номер на обложке?

Не много ерунды, на самом деле анимацию выше не очень сложно реализовать с помощью кода, эта картинка сделана с помощью canvas.

В этой статье основное внимание уделяется следующим

Процесс рендеринга в браузере
Перекомпоновать и перекрасить
CSS-анимация
JS-анимация
Сравните два

🍉 1. Процесс рендеринга в браузере

Процесс рендеринга состоит из четырех основных этапов.

Разобрать HTML для создания дерева DOM
Анализ стилей CSS для создания дерева CSSOM и объединение дерева CSSOM с деревом DOM для создания дерева рендеринга
Layout Render Tree Обработка макета каждого узла для определения положения на экране
Нарисуйте дерево рендеринга, пройдите по дереву рендеринга, чтобы нарисовать каждый узел

Чтобы оптимизировать взаимодействие с пользователем, механизм рендеринга не ждет, пока HTML-код будет проанализирован, прежде чем создавать дерево рендеринга макета.

Сгенерировать DOM-дерево

Построение DOM-дерева представляет собой процесс глубокого обхода, то есть следующий одноуровневый узел текущего узла будет построен только после того, как будут построены все дочерние узлы.

Генерация дерева рендеринга

При создании дерева DOM будет создано дерево CSSOM, а дерево рендеринга будет построено в соответствии с деревом CSSOM и DOM.Дерево рендеринга включает прямоугольники с атрибутами отображения, такими как цвет и размер.

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

🍋 2. Перекомпоновать и перекрасить

Важные понятия в CSS

переплавка

обратный поток также называетсяпереставлять,Ссылаться нагеометрические свойстваРендеринг, который нужно изменить.

Каждый раз, когда происходит перекомпоновка, содержимое веб-страницыперерисовать, но наш человеческий глаз не чувствует никаких изменений, но он очищает страницу, а затем рендерит с первого пикселя в верхнем левом углу страницы слева направо и сверху вниз.Потоку будет такой процесс , просто не чувствую

Узел дерева рендеринга изменяется, влияет на геометрические свойства узла, вызывая изменение местоположения узла, что вызывает перекомпоновку браузера и повторное создание дерева рендеринга.

Общие геометрические свойства: макет, размер, эти свойства, которые могут быть измерены линейкой

дисплей, плавающий, сетка
ширина, обивка

Ждать

перерисовать

Перерисовка относится к изменениямВнешние свойстване затрагиваяСвойства коллекцииРендеринг, похожий на цветной. По сравнению с оплавлением эффект перерисовки не такой сильный.

Узел дерева рендеринга изменяется, но атрибут коллекции узла не затрагивается, а потребление перекомпоновки в производительности браузера намного больше, чем потребление перерисовки. И перерисовка неизбежно приведет к перерисовке, перерисовка не обязательно требует перерисовки

Внешние свойства

клип, фон
text

Ждать

После введения этих знаний, давайте поговорим о анимации CSS

🍍 3. Анимация CSS3

Здесь мы говорим только об анимации CSS3.

Анимации CSS3 также известны как твины, потому что нужно добавить только положение ключевых кадров, а другие неопределенные кадры будут генерироваться автоматически.

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

Но CSS-анимация также имеет много преимуществ.

Браузеры могут оптимизировать анимацию
Браузеры с низкой частотой кадров, CSS3 могут быть естественным образом деградированы и совместимы.
Код прост, а направление настройки фиксировано.

🍎 4. JS анимация

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

Но и у него много преимуществ

тонкая анимация
Высокая управляемость
Крутая и продвинутая анимация

💯 5. Анимация CSS против анимации JS

Предыдущие CSS-анимации и JS-анимации концептуально сильны, так что не смотрите их.

Сказав так много, зачем нужна CSS-анимация?более эффективнымШерстяная ткань?

Первая точка

С точки зрения сложности реализации анимации большинство анимаций CSS представляют собой анимацию движения, а анимации JS — покадровую анимацию. Разумеется, здесь речь не идет о достигнутом эффекте.

Второй момент

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

третья точка

Эффективная производительность, мы говорили о перекомпоновке и перерисовке ранее, если мы хотим, чтобы элемент перемещался вправо, нам может потребоваться управлениеdom.style.leftатрибут каждый разизменить положение элемента, объединяя сказанное нами,геометрические свойстваизменения неизбежно приведут кпереплавка, перекомпоновка неизбежно приведет к перерисовке.Возможно, что если мы используем JS для достижения анимации, стоимость будет высокой, что заставит браузер постоянно вычислять страницу, что приводит к накоплению памяти браузера. В то же время, поскольку JavaScript выполняется в основном потоке браузера, в основном потоке выполняются другие важные задачи, которые могут мешать.блокировка потока,тем самымвыпадающая рамка

Анимации CSS выполняются в потоке композиции, не блокируют основной поток, а действия, выполняемые в потоке композиции, не вызывают перекомпоновку и перерисовку.

Конечно, есть еще один важный момент: анимация JS выполняется на процессоре, а анимация CSS выполняется на графическом процессоре.

В целом, анимация CSS менее затратна для рендеринга и работает более эффективно, чем анимация JavaScript.

Так когда мы используем анимацию CSS и когда мы используем анимацию JS?

лично я чувствую

Пока вы можете использовать CSS для создания анимации, не используйте для этого JS., вы можете использовать препроцессоры CSS для создания более сложных анимаций, таких как анимация метеоритного дождя, которую я раньше делал с помощью SCSS.

Если анимация более сложная, мы можем использоватьJS + canvasпопробовать, может ли это быть достигнуто?

Наконец, рассмотрим чистую реализацию JS

В этой статье может быть много мест, которые стоит обсудить. Каковы мнения или разные мнения больших парней? Вы можете поделиться следующим ~

Большое спасибо за чтение, вы можете высказать свое мнение, если у вас есть какие-либо вопросы, пожалуйста, укажите, спасибо! 🎈