Javascript 哪些DOM元素属性在修改时会导致浏览器执行回流操作？_Javascript_Dom

Javascript 哪些DOM元素属性在修改时会导致浏览器执行回流操作？

javascript dom

Javascript 哪些DOM元素属性在修改时会导致浏览器执行回流操作？,javascript,dom,Javascript,Dom,以下哪些DOM元素属性会导致浏览器执行回流操作 innerHTML offsetParent style scrollTop 奇怪的是，我确信所有这些都会导致回流，甚至重新喷漆以下是一篇关于这一切的文章：简而言之，任何导致元素改变大小或移动的属性都会导致回流，因为大小或位置的改变会影响其他元素。浏览器尽可能高效地识别可能需要回流的内容，但每种浏览器都有不同的方法不能影响元素大小或位置的属性（如背景色）不应触发回流，尽管不能保证每个浏览器都足够智能来实现这一点在您的列表中： innerH

以下哪些DOM元素属性会导致浏览器执行回流操作

```
innerHTML
```
```
offsetParent
```
```
style
```
```
scrollTop
```

奇怪的是，我确信所有这些都会导致回流，甚至重新喷漆

以下是一篇关于这一切的文章：

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

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

在您的列表中：

innerHTML

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

offsetParent

在我看来是一个只读属性，它不是您直接设置的，因此如果没有计划，读取它不应该导致回流

style

是通往许多房产的门户，包括

height

和

width

，这显然至少会导致部分回流

scrollTop

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

可能值得一提的是，大多数导致回流的特性不会立即导致回流，而是将回流安排在未来的一段短时间内。这样，如果某个javascript运行时更改了一组不同的属性（每个属性都需要回流），那么浏览器不会执行N次回流，而是安排回流，等待当前javascript执行线程完成，然后只执行一次所需的任何回流。有些属性在读取时会导致所有挂起的回流立即完成，因为如果不立即完成回流，这些属性的值可能不准确。你可以在这篇早期文章中读到这一点：

视情况而定

```
innerHTML
```
仅在设置更改DOM时触发回流
```
offsetParent
```
不应执行任何操作，获取它可能会刷新渲染树队列
```
style
```
在设置样式（或其属性）或链接这些操作时，可能会触发回流和重新绘制。某些属性（如
```
color
```
）只应触发重绘
```
scrollTop
```
将在设置时触发重新绘制，获取该设置可能会刷新队列

这些都是DOM元素属性吗？现在很明显，它们都会导致回流。但我的选择中哪一个是最好的？我仍然困惑于如何找到最佳选择。虽然这可能会回答问题，但请在此处包含答案的基本部分，并提供链接以供参考。修改或访问某些属性会导致回流。即使读取需要重新计算的属性，如访问

offsetWidth

，或使用

getComputedStyle

也会导致回流！！