笔试学习（三）回流和重绘

回流（reflow）：

当DOM元素的几何属性（例如自身的宽高、布局、显示或隐藏）或者元素内部的文字结构发生变化时，浏览器需要重新计算并将计算结果绘制出来，导致需要重新构建页面。这个过程就叫做回流（也叫做重排）。

官方定义：对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow ;

什么操作会触发回流呢？

1. 改变DOM元素的几何属性

        当一个DOM元素的几何属性发生改变，与它相关的父子节点等元素的几何属性也会随之改变，因此重新计算的成本会非常大。常见的几何属性有：width、height、padding、margin、left、top、border等。

2. 改变DOM节点内部的文字结构

3. 改变 DOM 树的结构

        指节点的增减、移动等操作。浏览器引擎布局的过程，顺序上可以类比于树的前序遍历——它是一个从上到下、从左到右的过程。通常在这个过程中，当前元素不会再影响其前面已经遍历过的元素。

4. 获取一些特定属性的值

        例如：使用到这样的属性offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，这些值的共同特性：通过即时计算得到，因此浏览器为了获取这些值，也会进行回流。