我的问题很简单,
为什么当我尝试获取元素的偏移位置时,我可以在 chrome devtool 时间轴上看到任何重排?
我刚刚读了这个=>
offsetTop, offsetLeft, offsetWidth, offsetHeight, 滚动顶部/左侧/宽度/高度, 客户端顶部/左侧/宽度/高度, getComputedStyle(),或IE中的currentStyle
以上所有这些本质上都是请求有关以下方面的样式信息 一个节点,任何时候你这样做,浏览器都必须给你最多的 最新值。为此,它需要应用所有预定的 更改,刷新队列,咬紧牙关并进行回流。
所以我打开了我的 chrome devtool 时间线,但当我尝试这个时我没有看到任何重新计算样式(紫色的东西):
element.offsetHeight;
查看某些渲染的唯一方法是更改元素的样式:
element.style.left = element.offsetLeft + 10 + "px";
我期待每次尝试获取窗口顶部的滚动时都会看到回流,但没有:/
$(window).scrollTop();
我(也许)找到了答案,这要归功于克里斯托夫
我如何可视化该读取元素.offsetWidth 导致重新计算/重排
好的,如果我明白了:
offsetHeight 将刷新渲染队列,如果样式信息没有被修改(对于他和他的父母),那么浏览器已经有了信息,并且不会进行重排:)
这就是为什么我们看不到任何回流:)