当元素从相对位置定位到固定位置但腾出的空间保持固定高度时，是不是会发生页面重排

Posted 2023-02-21

【中文标题】当元素从相对位置定位到固定位置但腾出的空间保持固定高度时，是不是会发生页面重排

【英文标题】：Does a page reflow occur when an element is positioned from relative to fixed but the space vacated is maintained with a fixed height当元素从相对位置定位到固定位置但腾出的空间保持固定高度时，是否会发生页面重排

【发布时间】：2018-12-28 10:37:45

【问题描述】：

我正在研究一个元素，一旦你滚动过去，它就会在页面顶部变得粘滞。为了防止其下方的内容向上移动，我正在获取即将被粘住的元素的父级的当前高度，并将其添加为内联样式，纯粹是为了用户体验，这样用户就不会因为跳跃的东西而迷失方向。

我想知道这是否增加了性能优势？改变元素位置的事实是否会导致页面重排，或者我是否通过在使子元素具有粘性之前对元素父元素应用固定高度来防止页面重排？

【参考方案1】：

改变元素位置是否会导致页面重排

是的，请参阅What is DOM reflow?。即使您作为用户可能看不出有什么不同，网站也会重新粉刷。

我想知道这是否增加了性能优势？

重绘/重排通常很快，尤其是在您只更改一小部分布局的情况下。但是对性能影响更大的是您跟踪滚动的方式。从历史上看，这主要是通过使用addEventListener('scroll', /* ... */) 来完成的。但是，使用IntersectionObserver API 有更好、更高效的方法来做同样的事情。它有reasonable browser support，还有一个polyfill。

【讨论】：

更多关于IntersectionObserver：developer.mozilla.org/en-US/docs/Web/API/…。