CSS动画和JS动画对比

在工作中，经常会写点动画效果，常用的方式有CSS动画还有JS动画，根据项目的需求，采用的方案各不相同，但是两者实现的性能分析没有进行对比。总结网上相关资料，在这里简单整理下
本文主要讲以下这些内容

1、浏览器渲染流程
2、回流和重绘
3、CSS 动画
4、JS 动画
两者对比
🍉 1. 浏览器的渲染流程
渲染流程主要有4个步骤

解析 HTML 生成DOM 树
解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree
布局 Render Tree 对每个节点进行布局处理，确定在屏幕上的位置
绘制 Render Tree，遍历渲染树将每个节点绘制出来
为了优化用户体验，渲染引擎不会等到 HTML 解析完才创建布局渲染树

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

「生成 Render 树」
生成 DOM 树的同时会生成 CSSOM 树，根据 CSSOM 和 DOM 树构建 Render Tree，渲染树包括颜色，尺寸等显示属性的矩形

「DOM 树和 Render 树」

🍋 2. 回流和重绘