CSS动效与JavaScript动效的比较

在日常开发过程中，常常需要实现一些动画效果，常用的实现方式包括CSS动画与JS动画。依据具体项目的实际需求，所采用的实现方案也会有所不同，但针对这两种方式在性能方面的对比分析尚未展开。综合网络上相关的资料，在此对相关内容进行简要整理。

本文主要涵盖以下内容

1、浏览器的渲染机制
2、回流与重绘的概念
3、CSS 动画的实现方式
4、JS 动画的实现方式
两者之间的性能对比
🍉 1. 浏览器的渲染流程
整个渲染过程主要分为四个阶段

首先解析HTML文档以生成DOM树
随后解析CSS样式生成CSSOM树，并将CSSOM树与DOM树结合，形成渲染树（Render Tree）
接下来对渲染树中的各个节点进行布局处理，确定其在屏幕上的具体位置
最后遍历渲染树，将每个节点绘制到屏幕上
为了提升用户交互体验，浏览器的渲染引擎并不会等待HTML文档完全解析完毕后才开始构建布局和渲染树

「构建 DOM 树」
DOM 树的生成过程遵循深度优先遍历的方式，这意味着只有当某个节点的所有子节点都完成构建后，才会继续构建其下一个兄弟节点

「构建 Render 树」
在生成 DOM 树的同时也会同步构建 CSSOM 树，并根据 CSSOM 与 DOM 的结构共同生成 Render 树。该渲染树包含了用于显示