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

【问题标题】：Which DOM element properties can cause the browser to perform a reflow operation when modified?哪些 DOM 元素属性在修改时会导致浏览器执行重排操作？
【发布时间】：2012-07-23 16:29:50
【问题描述】：

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

innerHTML
offsetParent
style
scrollTop

【问题讨论】：

修改或访问某些属性会导致回流。即使是读取属性需要重新计算，比如访问offsetWidth，或者使用getComputedStyle，都会导致回流！！

标签： javascript dom

【解决方案1】：

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

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

在您的列表中：

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

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

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

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

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

【讨论】：

【解决方案2】：

奇怪的是，我很确定它们都会导致回流甚至重绘。

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

【讨论】：

这些都是 DOM 元素属性吗？
现在很明显，所有这些都会导致回流。但我的选择中哪个是最好的？我仍然对找到最佳选择感到困惑。
虽然这可能会回答问题，但it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

视情况而定。

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

【讨论】：