google-chrome - 如何可视化读取 element.offsetWidth 导致重新计算/重排

Question

到处都写着读取element.offsetWidth会导致元素尺寸的重新计算（甚至是回流？）。

但是，我正在努力使这种效果可见。

在 chrome 中，我希望我能够通过 3 个简单的步骤使其可见：

1. 打开 Chrome 开发工具
2. 转到元素选项卡并选择要导致重新计算/重排的元素
3. 转到时间线选项卡并开始录制
4. 转到控制台并键入$0.offsetWidth

现在，如果我转到时间线选项卡，我会假设看到绘制的回流。然而，我什么也没看到。所以我一定是搞错了。

Answer 1

经过更多研究，我想我可以回答我自己的问题。并不是阅读offsetWidth直接导致回流。更重要的是它会导致浏览器立即执行渲染队列中堆叠的所有操作。如果您以错误的顺序组织对 DOM 的读取和写入，这反过来可能意味着多次重排。