以下哪些DOM元素属性会导致浏览器执行回流操作？
innerHTMLoffsetParentstylescrollTop
3个回答
13
简而言之，任何导致元素大小或位置变化的属性都会引起回流，因为这种大小或位置的改变可能会影响其他元素。浏览器尽力试图识别可能需要重新布局的内容，但每个浏览器的实现方式不同。
不能影响元素大小或位置的属性（如背景颜色）不应触发回流，尽管并不保证每个浏览器都足够智能以实现这一点。
在您的列表中：
innerHTML更改对象的HTML，这肯定会影响大小和位置，并将触发至少部分回流。
offsetParent对我来说是只读属性，不是您直接设置的内容，因此如果没有其他计划好的回流，则读取它不应该引起回流。
style是许多属性的入口，包括height和width，这显然会导致至少部分回流。
scrollTop不必引起回流，因为通常不会更改布局，只是一个元素（及其子元素）的滚动位置。布局应该保持不变，只需要重绘即可。
值得一提的是，大多数导致回流的属性并不会立即引起回流，而是将回流安排在未来的某个短时间内。这样，如果运行了某些更改多个属性的javascript代码，每个属性都需要回流，浏览器不会进行N次回流，而是安排回流，等待当前javascript线程执行完成，然后只执行所需的任何回流一次。当读取某些属性时，会导致所有待处理的回流立即完成，因为如果不立即进行回流，这些属性可能具有不准确的值。您可以在此早期帖子中了解更多信息：强制Internet Explorer在javascript dom操作之后刷新DOM
不能影响元素大小或位置的属性（如背景颜色）不应触发回流，尽管并不保证每个浏览器都足够智能以实现这一点。
在您的列表中：
innerHTML更改对象的HTML，这肯定会影响大小和位置，并将触发至少部分回流。
offsetParent对我来说是只读属性，不是您直接设置的内容，因此如果没有其他计划好的回流，则读取它不应该引起回流。
style是许多属性的入口，包括height和width，这显然会导致至少部分回流。
scrollTop不必引起回流，因为通常不会更改布局，只是一个元素（及其子元素）的滚动位置。布局应该保持不变，只需要重绘即可。
值得一提的是，大多数导致回流的属性并不会立即引起回流，而是将回流安排在未来的某个短时间内。这样，如果运行了某些更改多个属性的javascript代码，每个属性都需要回流，浏览器不会进行N次回流，而是安排回流，等待当前javascript线程执行完成，然后只执行所需的任何回流一次。当读取某些属性时，会导致所有待处理的回流立即完成，因为如果不立即进行回流，这些属性可能具有不准确的值。您可以在此早期帖子中了解更多信息：强制Internet Explorer在javascript dom操作之后刷新DOM
- jfriend00
3
这取决于具体情况。
- 当设置
- 当设置
innerHTML 导致 DOM 改变时，它会触发回流。
- 获取 offsetParent 不会有任何影响，但是获取它可能会刷新渲染树队列。
- 设置 style（或其属性）可能会触发回流和重绘，或者链接这些操作。一些属性（如 color）只会触发重绘。
- 设置 scrollTop 会触发重绘，而获取它则可能会刷新队列。- Bergi
2
奇怪的是，我很确定它们都会导致回流和重绘。
这里有一篇相关文章： 回流和重绘
- Mark Pieszak - Trilon.io
3
这些都是DOM元素属性吗？ - Om3ga
现在很清楚，它们都会导致回流。但是哪个选项是最好的呢？我仍然困惑着寻找最佳选项。 - Om3ga
1虽然这可能回答了问题，但最好在此处包含答案的基本部分，并提供参考链接。 - jhpratt
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
offsetWidth或使用getComputedStyle，也会导致回流！！ - Om Shankar