我的问题很简单,
为什么当我尝试获取元素的偏移位置时,我可以在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();
答案 0 :(得分:1)
我(也许)感谢Christoph
找到了答案How can I visualize that reading element.offsetWidth causes a recalc/reflow
好的,如果我明白了:
如果未修改样式信息(对于他和他的父母),offsetHeight将刷新渲染队列。然后浏览器已经有了信息并且没有进行重排:)
这就是为什么我们没有看到任何回流:)