页面的重排和回流（提升移动端网页性能）

系统管理员 2021-11-11 12:14 192阅读 0赞

### 一、**重绘重排的概念：** ###

1.  重绘的意思是：重新绘制，如：颜色发生变化，
2.  重排（回流）的意思是：重新排列，即布局会受影响，如：用js动态改变了元素的宽或高，就会影响其它元素的位置，这叫重新排列。

### **二、什么时候引起重绘，什么时候引起重排：** ###

1、**重排（回流）：**回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：

*  页面一开始渲染的时候（这肯定避免不了）
 *  DOM树的结构变化：添加或删除可见的DOM元素
 *  DOM元素的几何属性变化：如外边距、内边距、边框厚度、宽高、等几何属性)
 *  内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
 *  浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
 *  窗口属性的获取和尺寸改变：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)
 *  Display:的变化。

**2、重绘**

·DOM元素的字体颜色、改变visibility、outline、背景色。重绘不会带来DOM元素的重新计算，所以**重绘并不一定伴随重排（回流），但是重排一定会引起浏览器的重绘**

### **三、问题：** ###

重绘，重排太过频繁，就会影响网页的执行性能。亲，你想想：你的页面本来一次可以重排好，你得多重排一次，那肯定是影响性能的。重绘一次就可以，你非得多重绘继承，那肯定也是影响性能的。

跟生活中一样。

重绘：你不停地擦掉重画，擦掉重画，肯定不如一次画到位好

重排：你总是重复性的把某个物体不停地挪动。跟家里的家具要换位置的道理一样。你如果想不来，今晚回去思考一下：假定你要把家里的家具重新布局（从A布局变成B布局），你在家具搬动的过程中，可以出几套搬动方案。看看哪一种搬动方案是挪动家具次数最少的，那么这种方案就是重排的最优方案。

### **四、浏览器的性能优化方案** ###

浏览器也是很聪明的，由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：

offsetTop、offsetLeft、offsetWidth、offsetHeight

scrollTop、scrollLeft、scrollWidth、scrollHeight

clientTop、clientLeft、clientWidth、clientHeight