浏览器的重绘与回流（重排）

浏览器渲染机制

1. 浏览器获取到HTML，解析生成DOM树，获取到CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成Render Tree（渲染树）
3. Layout（回流）
4. Painting（重绘）
5. Display：将渲染之后的元素展示在页面

Layout（回流/重排）

当 Render Tree 中的一部分（或者全部）因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流

Painting（重绘）

当 Render Tree 中的一些元素需要更新属性时，而这些属性只影响元素的外观，风格，而不会影响布局时，就叫做重绘。

如何触发回流

注：回流一定会重绘，但是重绘不一定回流

1. 页面第一次加载
2. 元素尺寸改变（字体颜色，元素背景等只触发重绘）
3. 元素位置改变
4. 元素内容改变（文本换成图片，input输入时）
5. 添加/删除可见DOM元素（元素display:none不会发生重排；visibility:hidden显示/隐藏不影响重排）
6. 浏览器窗口尺寸改变
7. 计算 offsetWidth/offsetHeight 等操作时

如何优化

CSS优化：

1. 使用 transform 代替 定位使用 （top）
2. 使用 visibility 替换 display:none，前者只会引起重绘，后者会发生回流（布局改变）
3. 避免使用 table 布局方式（可能很小的一个改动会造成整个table的重新布局）
4. 尽可能在DOM树的最末端改变class（回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点）
5. 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多（例：div>span>em）
6. 将动画效果应用到position属性为absolute或fixed的元素上（避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame）
7. 避免使用CSS表达式，可能会引发回流
8. 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe、canvas等标签，浏览器会自动将该节点变为图层
9. 启用CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能

JS优化：

1. 避免频繁操作样式，（最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性）
2. 避免频繁操作DOM（创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中）
3. 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来

参考文档：

1. https://www.cnblogs.com/2019gdiceboy/p/11411482.html
2. https://www.jianshu.com/p/ce3bb65b8603
3. https://blog.csdn.net/lhjuejiang/article/details/79793331