浏览器 - 是谁触发了浏览器的重绘和回流

重绘和回流是在页面渲染过程中的非常重要的两个概念。页面生成后，页面操作、样式表变更以及用户操作都可能出发重绘和回流。

回流

回流reflow，有时候也叫重排relayout

回流是指窗口尺寸被修改，发生滚动操作，或者是元素的尺寸或位置相关属性被更新时会出发布局过程，在布局过程中需要重新计算所有元素的位置信息。由于HTML元素使用的流式布局，如果页面中一个元素位置或尺寸发生了变化，则后面的元素的位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称为回流。

回流发生在页面的渲染过程中。一般如下操作会触发回流：

1. DOM元素的几何属性发生变化，如尺寸（width），位置（psoition）等
2. DOM树结构发生变化
3. 调整浏览器窗口大小
4. 改变元素的一些样式，如display，float等等
5. 获取下列属性时：

offsetTop/offsetLeft/offsetWidth/offsetHeight/scrollTop/scrollLeft/scrollWidth/scrollHeight/clientTop/clientLeft/clientHeight/getComputedStyle()/currentStyle()

 

重绘

重绘是指当与视觉相关的样式属性值发生变化时会触发绘制的过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观。由于元素重绘只发生在渲染层上，所以如果要改变元素的视觉属性，最好让该元素成为一个独立的渲染层。比如，当元素的背景

下面以一个元素的显示和隐藏来说明回流和