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

Question

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

• innerHTML
• offsetParent
• 风格
• 滚动顶部

Answer 1

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

不能影响元素大小或位置的属性(例如背景颜色)不应触发重排，但不能保证每个浏览器都足够智能以实现此目的。

在您的列表中:

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

offsetParent 在我看来是一个只读属性，不是您直接设置的属性，因此如果没有安排，读取它不会导致重排。

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

scrollTop 不需要引起回流，因为布局通常不会改变，只是一个元素(及其子元素)的滚动位置。布局应保持不变，只需重新绘制即可。

可能还值得一提的是，大多数导致回流的属性不会立即导致回流，而是将回流安排在未来的某个短时间内。这样，如果某些 javascript 运行更改了一堆不同的属性，每个属性都需要回流，则浏览器不会进行 N 次回流，而是安排回流，等待当前执行的 javascript 线程完成，然后然后它只执行一次需要的任何回流。有一些属性在读取时会导致所有待处理的回流立即完成，因为如果不立即完成回流，这些属性可能具有不准确的值。您可以在之前的帖子中阅读相关内容:Forcing a DOM refresh in Internet explorer after javascript dom manipulation