回流和重绘

回流和重绘

在 HTML 中，每个元素都可以理解成⼀个盒⼦，在浏览器解析过程中，会涉及到回流与重绘：

•

回流：布局引擎会根据各种样式计算每个盒⼦在⻚⾯上的⼤⼩与位置

•

重绘：当计算好盒模型的位置、⼤⼩及其他属性后，浏览器根据每个盒⼦特性进⾏绘制

在⻚⾯初始渲染阶段，回流不可避免的触发，可以理解成⻚⾯⼀开始是空⽩的元素，后⾯添加了新的

元素使⻚⾯布局发⽣改变

当我们对 DOM 的修改引发了 DOM ⼏何尺⼨的变化（⽐如修改元素的宽、⾼或隐藏元素等）时，浏

览器需要重新计算元素的⼏何属性，然后再将计算的结果绘制出来

当我们对 DOM 的修改导致了样式的变化（ color 或 background-color ），却并未影响其⼏何

属性时，浏览器不需重新计算元素的⼏何属性、直接为该元素绘制新的样式，这⾥就仅仅触发了重绘

回流触发时机

回流这⼀阶段主要是计算节点的位置和⼏何信息，那么当⻚⾯布局和⼏何信息发⽣变化的时候，就需

要回流，如下⾯情况：

•

添加或删除可⻅的DOM元素

•

元素的位置发⽣变化

•

元素的尺⼨发⽣变化（包括外边距、内边框、边框⼤⼩、⾼度和宽度等）

•

内容发⽣变化，⽐如⽂本变化或图⽚被另⼀个不同尺⼨的图⽚所替代

•

⻚⾯⼀开始渲染的时候（这避免不了）

•

浏览器的窗⼝尺⼨变化（因为回流是根据视⼝的⼤⼩来计算元素的位置和⼤⼩的）

还有⼀些容易被忽略的操作：获取⼀些特定属性的值

offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、

scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

这些属性有⼀个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进⾏回流

除此还包括 getComputedStyle ⽅法，原理是⼀样的

重绘触发时机

触发回流⼀定会触发重绘

可以把⻚⾯理解为⼀个⿊板，⿊板上有⼀朵画好的⼩花。现在我们要把这朵从左边移到了右边，那我

们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜⾊（重绘）

除此之外还有⼀些其他引起重绘⾏为：

•

颜⾊的修改

•

⽂本⽅向的修改

•

阴影的修改