为什么设置 textContent 会触发回流？

Question

我有一个简单的 countUp/Down 实用程序，它利用 requestAnimationFrame 设置特定 DOM 的 textContent。令人惊讶的是，每次我进行内容更新时，浏览器都会触发重排。有什么办法可以避免这种情况吗？

在 CodePen, using the performance tool of Chrome dev tool, you can see each callback call is followed by reflow (Layout)

中找到了关于 requestAnimationFrame 的简单演示

据我所知，设置 textContent 不应导致样式重新计算。我也试过给元素固定尺寸，但这没有帮助。

Answer 1

Unlike some methods，它不会触发回流同步，但是当下一次绘制发生时，浏览器仍然需要重新计算布局，因为textContent 更改可能会更改页面的布局。

我能想到的避免重排的唯一方法是在 中呈现此文本。