我如何可视化该读取element.offsetWidth导致重新计算/重排 [英] How can I visualize that reading element.offsetWidth causes a recalc/reflow
问题描述
随处可见，读取element.offsetWidth会导致对元素尺寸的重新计算(甚至是重排?).
It's written everywhere that reading element.offsetWidth causes a recalculation (or even a reflow?) of the element's dimensions.
但是，我正在努力使这种效果可见.
However, I'm struggling with making this effect visible.
在chrome中，我希望能够通过3个简单的步骤使其可见:
In chrome I would expect I would be able to make it visible with 3 simple steps:
- 打开Chrome开发工具
- 转到元素"标签，然后选择要在其上进行重新计算/重排的元素
- 转到时间轴标签并开始录制
- 转到控制台并键入
$0.offsetWidth
- open the Chrome dev tools
- Go to the element tab and select an element that you want to cause a recalc/reflow on
- Go to the timeline tab and start recording
- Go to the console and type
$0.offsetWidth
现在，如果我转到时间轴"选项卡，我将假定看到绘制了重排.但是，我什么也没看到.所以我一定弄错了.
Now if I go to the timeline tab I would assume to see a reflow drawn. However, I see nothing. So I must have gotten something wrong.
推荐答案
经过更多研究，我认为我可以回答自己的问题.并非直接读取offsetWidth会导致重排.不仅如此，它还导致浏览器立即执行渲染队列中堆叠的所有操作.如果您以错误的顺序组织对DOM的读写，则可能意味着多次重排.
After some more research, I think I can answer my own question. It's not that reading offsetWidth directly causes a reflow. It's more that it causes the browser to immediately perform all actions that are stacked in the rendering queue. That in turn can mean multiple reflows if you organize your reading and writing to the DOM in the wrong order.
这篇关于我如何可视化该读取element.offsetWidth导致重新计算/重排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
