如何可视化读取 element.offsetWidth 导致重新计算/回流

Question

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

然而，我正在努力让这种效果变得可见。

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

1. 打开 Chrome 开发工具
2. 转到元素选项卡并选择要对其进行重新计算/回流的元素
3. 转到时间线选项卡并开始录制
4. 转到控制台并输入$0.offsetWidth

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

Answer 1

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