浏览器回流还是不回流？答案

【问题标题】：browser reflow or not reflow?浏览器回流还是不回流？
【发布时间】：2013-10-25 23:56:32
【问题描述】：

我的问题很简单，

为什么当我尝试获取元素的偏移位置时，我会在 chrome devtool 时间轴上看到任何回流？

我刚刚读过这个=>

offsetTop, offsetLeft, offsetWidth, offsetHeight, scrollTop/Left/Width/Height, ClientTop/Left/Width/Height, getComputedStyle() 或 IE 中的 currentStyle

以上所有这些本质上都是在请求关于一个节点，任何时候你这样做，浏览器都必须给你最最新的价值。为此，它需要应用所有预定的更改，刷新队列，咬紧牙关并进行重排。

所以我打开了我的 chrome devtool 时间线，但是当我尝试这个时我没有看到任何重新计算的样式（紫色的东西）：

element.offsetHeight;

查看某些渲染的唯一方法是更改元素的样式：

element.style.left = element.offsetLeft + 10 + "px";

我希望每次尝试滚动到窗口顶部时都会看到重排，但没有：/

$(window).scrollTop();

【问题讨论】：

标签： performance rendering google-chrome-devtools reflow

【解决方案1】：

感谢克里斯托夫，我（也许）找到了答案

How can I visualize that reading element.offsetWidth causes a recalc/reflow

好吧，如果我明白了：

offsetHeight 将刷新渲染队列，如果样式信息没有被修改（对于他和他的父母）那么浏览器已经有了信息并且不会进行重排:)

这就是为什么我们看不到任何回流 :)

【讨论】：