什么是浏览器的回流和重绘，以及如何减少回流和重绘

浏览器渲染原理

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

回流：

• 回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

重绘：

• 重绘是由于节点的几何属性发生改变或者由于样式发生改变但不会影响布局。例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

什么时候会发生回流

1、添加或删除可见的DOM元素

2、元素的位置发生变化

3、元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）

4、内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。

5、页面一开始渲染的时候（这肯定避免不了）

6、浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

而重绘是指在布局和几何大小都不变得情况下，比如次改一下background-color,或者改动一下字体颜色的color等。

注意：回流一定会触发重绘，而重绘不一定会回流

如何减少回流和重绘

1、CSS优化法

（1）使用 transform 替代 top

（2）使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局

（3）避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。

（4）尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。

（5）避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

（6）将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流，同时，控制动画速度可以选择 requestAnimationFrame，详见探讨 requestAnimationFrame。

（7）避免使用CSS表达式，可能会引发回流。

（8）将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change、video、iframe等标签，浏览器会自动将该节点变为图层。

（9）CSS3 硬件加速（GPU加速），使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘 。但是对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

2、JavaScript优化法

（1）避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

（2）避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

（3）避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

原文博客链接地址：https://www.cnblogs.com/wwwxxjsyy/p/12559272.html