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

Question

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

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

标签： htmlcssdom

Answer 1

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

是的，请参阅什么是 DOM 回流？. 即使您作为用户可能看不到任何差异，网站也会重新粉刷。

我想知道这是否增加了性能的好处？

重绘/重排通常很快，特别是如果您只更改布局的一小部分。但是对性能影响更大的是您跟踪滚动的方式。从历史上看，这主要是通过使用addEventListener('scroll', /* ... */). IntersectionObserver但是，使用API做同样的事情有更好、更高效的方法。它有合理的浏览器支持并且有一个polyfill。