浏览器重绕或不重排?

时间:2013-10-17 13:08:56

标签: performance rendering google-chrome-devtools reflow

我的问题很简单,

为什么当我尝试获取元素的偏移位置时,我可以在chrome devtool时间轴上看到任何重排?

我刚读过这个=>

  

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

     

以上所有内容基本上都是请求关于的样式信息   一个节点,只要你这样做,浏览器就必须给你最大的帮助   最新的价值。为此,它需要应用所有预定的   改变,冲洗队列,咬紧牙关并进行回流。

所以我打开我的chrome devtool时间轴,但是当我尝试这个时,我没有看到任何重新计算的样式(紫色的东西):

element.offsetHeight;

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

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

我希望每次尝试获取窗口顶部的滚动时都会看到回流但是没有:/

$(window).scrollTop();

1 个答案:

答案 0 :(得分:1)

我(也许)感谢Christoph

找到了答案

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

好的,如果我明白了:

如果未修改样式信息(对于他和他的父母),offsetHeight将刷新渲染队列。然后浏览器已经有了信息并且没有进行重排:)

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