尽可能减少浏览器重排/回流(reflow)

228 阅读2分钟

重排,也称为回流,英文名都是reflow,是在网络浏览器中执行的一个流程,用于重新计算文档中各元素的位置和几何形状,以便重新呈现该文档的部分内容或全部内容

由于重排会阻止用户在浏览器中执行操作,因此开发者需要了解如何优化重排用时,以及各种文档属性(DOM 深度、CSS 规则效率和不同类型的样式更改)对重排用时的影响。

有时,对文档中的单个元素进行重排可能需要同时对其父元素及其后面的所有元素进行重排。

很多种用户操作和可能的 DHTML 更改都可以触发重排。

例如:

  • 调整浏览器窗口的大小
  • 使用涉及计算出的样式的 JavaScript 方法
  • 在 DOM 中添加或移除元素
  • 更改某个元素的 class
  • 元素的位置、尺寸发生变化
  • 元素的内容发生变化,例如文本内容变化,或者图片被另一张不同尺寸的图片替换
  • 。。。等等

PS:不同的操作,导致的重排用时是不同的,下图列出了重排用时的大致情况

10.png

准则

以下是一些简单的准则,可以尽可能地缩短网页中进行重排的用时:

  1. 减少不必要的 DOM 深度。在 DOM 树中的一个级别进行更改,可能会导致该树的所有级别(根节点、当前被修改的节点、子节点)都随之变化,这会导致花费更多的时间来执行重排;
  2. 尽可能减少 CSS 规则的数量,并移除未使用的 CSS 规则;
  3. 如果需要进行复杂的渲染更改(例如过渡动画),请在流程外执行操作(脱离文档流)。可以使用position: absolute;或者position: fixed;来实现;
  4. 避免使用非必要的、复杂的 CSS 选择器(尤其是后代选择器),因为此类选择器需要耗用更多的 CPU 处理能力来执行选择器的匹配;