浏览器重排或不重排



我的问题很简单,

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

我刚刚读了这个=>

offsetTop, offsetLeft, offsetWidth, offsetHeight, 滚动顶部/左侧/宽度/高度, 客户端顶部/左侧/宽度/高度, getComputedStyle(),或IE中的currentStyle

以上所有这些本质上都是请求有关以下方面的样式信息 一个节点,任何时候你这样做,浏览器都必须给你最多的 最新值。为此,它需要应用所有预定的 更改,刷新队列,咬紧牙关并进行回流。

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

element.offsetHeight;

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

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

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

$(window).scrollTop();

我(也许)找到了答案,这要归功于克里斯托夫

我如何可视化该读取元素.offsetWidth 导致重新计算/重排

好的,如果我明白了:

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

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

相关内容

  • 没有找到相关文章

最新更新