为什么 textContent 不会触发回流

Question

我在 MDN 上查看了 textContent 和 insideText 之间的区别。它向我展示了一些让我很困惑的东西。

1.innerText 能够识别样式，并且不会返回隐藏元素的文本，而 textContent 会。（没问题，完全理解）

2.由于innerText能够识别CSS样式，因此它将触发回流，而textContent则不会。（为什么？）

Answer 1

建议我回答这个问题而不是留下评论。尽管在那之后我做了更多的研究。现在让我们再次看看差异。

innerText 能够识别样式，不会返回隐藏元素的文本

参考自MDN。

这意味着，innerText仅从可见元素（not display: none，nor visibility: hidden）获取文本。此外，应用于元素的 CSS 样式text-transform: uppercase也将被考虑在内。因此，innerText 将返回文本的大写版本，而 textContent 将返回未更改的版本。你可以在 jsfiddle 上尝试一下这个演示。

由于innerText需要知道元素最新的样式是什么，所以应该先触发回流（刷新排队的回流列表）并重新计算元素的样式。然后得到预期的结果。

而 textContent 不必这样做，因为它不知道样式。

如果您对innerText和textContent之间的差异感兴趣，可以阅读这篇 文章。