为什么 CSS 动画比 JavaScript 高效？

?? 大家好，我是，一名准大二的前端爱好者

?? 这篇文章将欢快的带你了解一下 CSS 和 JS 动画的差别

?? 愿你忠于自己，热爱生活

引言

讲到动画，当然是非常有意思的啦，你可以往上滑一下，看看上面的封面图，是不是相当的炫酷，以为我是代码写出来的吗？

那当然不可能啊，我这么摸鱼，怎么会为了个封面图上号呢

废话不多说，其实上面的动图用代码实现也不会很困难，这个图是用 canva 做出来的。

本文主要讲以下这些内容

1. 浏览器渲染流程
2. 回流和重绘
3. CSS 动画
4. JS 动画
5. 两者对比

?? 1. 浏览器的渲染流程

渲染流程主要有4个步骤

1. 解析 HTML 生成DOM 树
2. 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree
3. 布局 Render Tree 对每个节点进行布局处理，确定在屏幕上的位置
4. 绘制 Render Tree，遍历渲染树将每个节点绘制出来

为了优化用户体验，渲染引擎不会等到 HTML 解析完才创建布局渲染树

生成 DOM 树

DOM 树的构建是一个深度遍历过程，也就是说只有在所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

</