哪些DOM元素属性可以导致浏览器在修改时执行重排操作？

Question

哪些DOM元素属性可以导致浏览器执行重排操作？

• innerHTML
• offsetParent
• style
• scrollTop

Answer 1

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

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

在您的列表中：

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

offsetParent在我看来是一个只读属性，不是你直接设置的，所以读取它不应该导致重排，如果没有其他方式已经安排。

style是许多属性的门户，包括height和width，这显然会导致至少部分重排。

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

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

Answer 2

奇怪的是，我很确定所有这些都会导致回流和放电。甚至重绘。

这是一篇关于这一切的文章： Reflows & Repaints

Answer 3

取决于。

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