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

Question

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

• innerHTML
• offsetParent
• style
• scrollTop

Answer 1

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

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

在你的清单中：

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

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

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

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

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

Answer 2

奇怪的是，我很确定它们都会引起回流，甚至重新粉刷。

这是一篇关于这一切的文章： 回流和重绘

Answer 3

这取决于。

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