回流与重绘的概念及触发条件

类别：性能优化 / 日期：2023-01-07 / 浏览：333 / 评论：0

（1）回流

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏 览器会重新渲染部分或者全部文档的过程就称为回流。

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

页面的首次渲染 

浏览器的窗口大小发生变化 

元素的内容发生变化 

元素的尺寸或者位置发生变化 

元素的字体大小发生变化 

激活 CSS 伪类 

查询某些属性或者调用某些方法 

添加或者删除可见的 DOM 元素

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

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

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

（2）重绘

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

下面这些操作会导致重绘：

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

outline 相 关 属 性 ： outline-color 、 outline-width 、 text-decoration、border-radius、visibility、box-shadow-性能优化

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