前端性能优化—回流与重绘

在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，它的影响范围有两种：

• 全局范围：从根节点开始，对整个渲染树进行重新布局

• 局部范围：对渲染树的某部分或者一个渲染对象进行重新布局

二、重绘

---

当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。

下面这些操作会导致回流：

• color、background 相关属性：background-color、background-image 等

• outline 相关属性：outline-color、outline-width 、text-decoration

• border-radius、visibility、box-shadow

注意： 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流。

三、 如何避免回流与重绘？

---

减少回流与重绘的措施：

• 操作DOM时，尽量在低层级的DOM节点进行操作

• 不要使用table布局， 一个小的改动可能会使整个table进行重新布局

• 使用CSS的表达式