浏览器的重绘与回流(Reflow&Repaint)

什么是重绘/回流？它们有什么区别？如何进行优化？

浏览器渲染流程

1、解析HTML生成DOM树
2、解析CSS生成CSSOM规则树
3、将DOM树与CSSOM规则树合并在一起生成渲染树
4、遍历渲染树开始布局，计算每个节点的位置大小信息
5、将渲染树每个节点绘制到屏幕

什么是回流（重排reflow）？

回流（重排reflow）：对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow,reflow的时候，浏览器会使已渲染好受到影响的部分失效，并重新构造这部分，完成reflow后，浏览器会重新绘制受影响的部分到屏幕中。

什么是重绘(repaint)？

重绘(repaint):当我们对DOM的修改导致样式变化，但未影响几何属性时，浏览器不需要重新计算元素的几何属性，可以直接为该元素绘制新的样式，跳过了回流环节，这个过程叫做重绘。

结论:回流必定会发生重绘，重绘不一定会发生回流

会引起重绘回流的操作如下

1、添加、删除DOM元素(回流+重绘)
2、隐藏元素,display:node(回流+重绘),visiblity:hidden(只重绘，不回流)
3、字体大小
4、调整窗口大小
5、元素的尺寸发生变化(包括外边距、内边框、边框大小、宽度和高度等)

var s = document.body.style; 
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));

如何减少过多的重绘和回流？

1、用transform代替top,left.margin-yop,margin-left等移位属性
2、用opacity代替visibility
3、避免使用table布局

参考链接: https://zhuanlan.zhihu.com/p/35184404