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

Question

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

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

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

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

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

Answer 1

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