为什么 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 树</