为啥 textContent 不会触发重排

Posted 2023-02-21

【中文标题】为啥 textContent 不会触发重排

【英文标题】：why would textContent not trigger a reflow为什么 textContent 不会触发重排

【发布时间】：2016-01-21 10:45:50

【问题描述】：

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

1.innerText 知道样式，不会返回隐藏元素的文本，而 textContent 会。 （没问题，完全明白）

2. 由于 innerText 知道 CSS 样式，它会触发重排，而 textContent 不会。 （为什么？）

【问题讨论】：

@Nit 这样问可能有点傻。看来我还没有完全理解回流。我找到了一篇关于它的文章：developers.google.com/speed/articles/reflow现在我明白了。不管怎样，谢谢你的建议！

现在我完全明白了！由于innerText只获取可见文本，所以应该先触发reflow（刷新排队的reflow列表）并重新计算元素的样式。然后得到正确的结果。

而 textContent 没有这样做。

【参考方案1】：

有人建议我回答这个问题，而不是离开 cmets。虽然在那之后我做了更多的研究。现在让我们再看看它们的区别。

innerText 知道样式，不会返回隐藏的文本 元素

引用自MDN。

这意味着，innerText 只从可见元素中获取文本（不是display: none，也不是visibility: hidden）。此外，还将考虑应用于 text-transform: uppercase 等元素的 css 样式。因此，innerText 将返回文本的大写版本，而 textContent 将返回未更改的版本。你可以在 jsfiddle 上试试这个demo。

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

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

如果您对 innerText 和 textContent 之间差异的更多细节感兴趣，可以阅读此article。