修改时，哪些DOM元素属性会导致浏览器执行回流操作

Which DOM element properties can cause the browser to perform a reflow operation when modified?

本文关键字：浏览器 执行 操作 哪些 DOM 属性 元素 修改      更新时间：2024-01-04

以下哪些DOM元素属性会导致浏览器执行回流操作？

  • innerHTML
  • offsetParent
  • style
  • scrollTop

简而言之，任何导致元素改变大小或移动的属性都会导致回流，因为大小或位置的改变会影响其他元素。浏览器会尽可能高效地识别可能需要回流的内容，但每个浏览器都有不同的方法。

不会影响元素大小或位置的属性（如背景色）不应触发回流，尽管不能保证每个浏览器都足够智能，可以实现这一点。

在您的列表中：

innerHTML更改对象的HTML，这肯定会影响大小和位置，并将触发至少部分回流。

在我看来，offsetParent是一个只读属性，不是你直接设置的，所以如果没有安排，读取它不应该导致回流。

style是许多属性的网关，包括height和width，这显然会导致至少部分回流。

scrollTop不需要引起回流，因为布局通常不会改变，只是一个元素（及其子元素）的滚动位置。布局应该保持不变，只需要重新喷漆。

可能还值得一提的是，大多数导致回流的特性不会立即导致回流，而是会在未来短时间内安排回流。这样，如果一些javascript运行更改了一系列不同的属性，每个属性都需要回流，浏览器就不会进行N次回流，而是安排回流，等待当前执行的javascript线程完成，然后只执行一次所需的任何回流。有些属性在读取时会导致所有挂起的回流立即完成，因为如果不立即完成回流，这些属性的值可能不准确。您可以在前面的文章中了解到这一点：在javascript-DOM操作

之后，在InternetExplorer中强制刷新DOM

这取决于情况。

  • innerHTML只会在设置更改DOM时触发回流
  • offsetParent不应该做任何事情，获取它可能会刷新渲染树队列
  • style可能会在设置它（或它的属性）或链接这些操作时触发回流和重新绘制。某些属性（如color）应该只触发重新绘制
  • scrollTop将在设置时触发重新绘制，获取它可能会刷新队列

奇怪的是，我确信所有这些都会导致回流&甚至重新喷漆。

下面是一篇关于这一切的文章：回流&重新打印

相关文章：