为啥设置 textContent 会触发重排？

Posted 2023-02-21

【中文标题】为啥设置 textContent 会触发重排？

【英文标题】：Why is setting textContent triggering reflow?为什么设置 textContent 会触发重排？

【发布时间】：2021-06-09 02:07:15

【问题描述】：

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

在CodePen找到requestAnimationFrame上有一个简单的demo，使用Chrome dev tool的性能工具，可以看到每个回调调用后面跟着reflow(Layout)

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

【参考方案1】：

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

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

【讨论】：

谢谢，我不知道并非所有的回流都是性能损失所必需的。玩画布，它确实没有触发回流，但是完成动画帧事件所需的时间并没有真正减少。所以我认为在我的用例中，让回流发生是安全的。