5

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

  • innerHTML
  • offsetParent
  • style
  • scrollTop
4

3 回答 3

12

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

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

在您的列表中：

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

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

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

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

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

于 2012-07-23T16:38:50.497 回答
2

这取决于。

  • innerHTML只有在设置它更改 DOM 时才会触发重排。
  • offsetParent不应该做任何事情，得到它可能会刷新渲染树队列。
  • style在设置它（或其属性）或链接这些操作时可能会触发重排和重绘。一些属性color应该只触发重绘。
  • scrollTop将触发设置重绘，获取它可能会刷新队列。
于 2012-07-23T16:47:30.993 回答
2

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

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

于 2012-07-23T16:33:42.070 回答