Javascript 位置粘性

我知道web开发人员现在不用js就能完成这样的任务，这很好：

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

vs

.粘的{
位置：固定；
排名：0；
}
.标题{
宽度：100%；
背景#F6D565；
填充：25px0；
}
var header=document.querySelector（'.header'）；
var origOffsetY=header.offsetTop；
函数onScroll（e）{
window.scrollY>=origOffsetY？header.classList.add（'sticky'）：
header.classList.remove（'sticky'）；
}
文件。添加的文件列表（“滚动”，在滚动条上）；

但是在实际浏览器的引擎盖下，它不是在做同样的渲染，并且占用同样的内存量吗。从本质上讲，浏览器中是否有较低级别的代码呈现CSS的位置：-webkit粘滞，并且呈现方式与上面的javascript相同

从本质上讲，浏览器中是否有较低级别的代码呈现CSS的位置：-webkit粘滞，并且呈现方式与上面的javascript相同

不需要。浏览器不必做同样的事情

通过对粘性区域的本机支持，对于每个剪裁区域，浏览器可以维护两个单独的图形缓冲区——一个用于非粘性内容（大小为容器），另一个用于粘性内容（大小为视口）。在卷轴上，它

抓住第一个的可见区域

与第二个组合（考虑z指数）

将其显示在屏幕上

浏览器根本不需要处理DOM

将其与JS onscroll方法进行比较

抓取一个锁，以防来自另一个帧的JS当前正在计算当前帧中的某些内容

设置JS执行上下文

运行用户函数

检查是否需要重新应用任何CSS选择器

检查是否需要布置DOM

检查是否需要激发DOM修改事件侦听器

弄清楚DOM的哪些部分需要重新渲染——这不是在已经渲染的矩形周围移动的问题

重新渲染

复合材料

布利特

---

浏览器可能正在执行类似的操作，并且可能已经优化。你到底在问什么？如果浏览器中较低级别的速度有差异，为什么？我想这至少是Webkit控制速度的一部分：谢谢你，迈克，不知道浏览器可以维护多个图形缓冲区比在浏览器的较低级别代码基上操作DOM更有意义。@1337，许多窗口系统使用多个缓冲区来实现平滑的无闪烁扫描。当渲染器无法控制屏幕刷新的时间时，这一点尤为重要。解释。

<style>
.sticky {
  position: fixed;
  top: 0;
}
.header {
  width: 100%;
  background: #F6D565;
  padding: 25px 0;
}
</style>

<div class="header"></div>

<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;

function onScroll(e) {
  window.scrollY >= origOffsetY ? header.classList.add('sticky') :
                                  header.classList.remove('sticky');
}

document.addEventListener('scroll', onScroll);
</script>