参考链接： https://mp.weixin.qq.com/s/QTlhAtdlAaO-srRLGWL5EQ
1.浏览器渲染过程：
（1）解析HTML，构建DOM树，解析CSS，构建CSSOM树，
（2）将DOM树与CSSOM树结合，生成渲染树（Render tree）
（3）Layout（回流）：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）
（4）Painting（重绘）：根据渲染树以及回流得到的几何信息，得到绝对像素；
（5）Display：将像素发送给GPU（图形处理器），展示在页面上。
2.构建渲染树（Render tree），浏览器主要完成的工作
（1）从DOM树的根节点开始遍历每个可见节点
（2）对于每个可见的节点，找到CSSDOM树中对应的规则，并应用他们
（3）根据每个可见节点，以及对应的样式，组合生成渲染树
不可见节点：
-
一些不会渲染输出的节点，比如script、meta、link等。
-
一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
3.回流（重排）：生成渲染树（Render tree）后，计算它们（节点）在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
（注意：回流一定会触发重绘，而重绘不一定会回流）
回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流：
-
添加或删除可见的DOM元素
-
元素的位置发生变化
-
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
-
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
-
页面一开始渲染的时候（这肯定避免不了）
-
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
4.重绘：我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点
都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。
例如：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color
5.避免回流和重绘
（1）使用trsansform (transform、opacity、filters)
CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层。
由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，
所以相对而言使用transform实现的动画效果肯定比使用改变位置(margin-left等)这些更加流畅。
（2）因为大多数浏览器会通过队列化修改并批量执行，优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
- offsetTop、offsetLeft、offsetWidth、offsetHeight
- scrollTop、scrollLeft、scrollWidth、scrollHeight
- clientTop、clientLeft、clientWidth、clientHeight
- getComputedStyle()
- getBoundingClientRect()
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。
（3）利用class替换来修改样式
（4）cssText来批量修改样式（Ele.style.cssText += "background-color: #444;"）
（5）display: none; （隐藏元素，应用修改，显示元素）
（6）ele.cloneNode(true); ele.parentNode.replaceChild(clone, old);