认识达内从这里开始

web前端编程开发技术随着互联网的不断发展而被越来越多的程序员掌握，今天我们就通过案例分析来简单了解一下，web前端编程回流重绘问题分析。

“回流重绘”是什么?

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

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置;

重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制。

当我们对DOM的修改引发了DOM几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来。

当我们对DOM的修改导致了样式的变化(color或background-color)，却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流。

如何触发

要想减少回流和重绘的次数，先要了解回流和重绘是如何触发的。

回流触发时机

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

添加或删除可见的DOM元素

元素的位置发生变化

元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)

内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代

页面一开始渲染的时候(这避免不了)

浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

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

offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

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

除此还包括getComputedStyle方法，原理是一样的。

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状(回流)，再画上它原有的颜色(重绘)。

除此之外还有一些其他引起重绘行为：

颜色的修改

文本方向的修改

阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。

当你获取布局信息的操作的时候，会强制队列刷新，包括前面讲到的offsetTop等方法都会返回新的数据。

因此浏览器不得不清空队列，触发回流重绘来返回正确的值。

如何减少

我们了解了如何触发回流和重绘的场景，下面给出避免回流的经验：

如果想设定元素的样式，通过改变元素的class类名(尽可能在DOM树的里层)

避免设置多项内联样式

应用元素的动画，使用position属性的fixed值或absolute值(如前文示例所提)

避免使用table布局，table中每个元素的大小以及内容的改动，都会导致整个table的重新计算

对于那些复杂的动画，对其设置position:fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响

使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

避免使用CSS的JavaScript表达式

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。