粘性定位

Question

我知道现在Web开发人员可以不使用JS完成这样的事情很棒：

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

vs

<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>

但在实际浏览器的内部，它不是在做相同类型的渲染并占用相同数量的内存吗？本质上，浏览器中是否有更低级别的代码来呈现CSS找到position: -webkit-sticky，并执行与上面的JavaScript类似的渲染？

- 1337

---

浏览器可能在做类似的事情，而且可能进行了优化。你具体是在问什么？ - bfavaretto

如果浏览器内部的低级别存在速度差异，那么为什么会出现这种情况？ - 1337

我认为这至少是Webkit控制它的一部分：https://github.com/WebKit/webkit/blob/8969a62271d35b53a978416cfb1d6f69718b0153/Source/WebCore/page/scrolling/ScrollingStateStickyNode.h - Explosion Pills

Answer 1

基本上，浏览器中没有低级别的代码来呈现CSS并找到位置：-webkit-sticky，并执行与上面Javascript类似的呈现。有原生支持粘性区域，对于每个被剪切的区域，浏览器可以维护两个单独的图形缓冲区--一个用于大小为容器的非粘性内容，另一个用于大小为视口的粘性内容。在滚动时：

1.获取第一个可见区域， 2.将其合成到第二个中（考虑z-index） 3.将其复制到屏幕上。

浏览器根本不需要处理DOM。与JS onscroll方法相比，

1.获取锁定，以防其他帧中的JS正在计算当前帧的内容 2.设置JS执行上下文 3.运行用户功能 4.检查是否需要重新应用任何CSS选择器 5.检查DOM是否需要布局 6.检查DOM修改事件侦听器是否需要触发 7.找出需要重新呈现的DOM部分--这不是移动已呈现的矩形的问题 8.重新呈现 9.合成 10.复制

- Mike Samuel

---

谢谢你，Mike。我不知道浏览器可以维护多个图形缓冲区，这比在较低级别的代码基础上操作DOM更有意义。 - 1337

@1337，许多窗口系统使用多个缓冲区来实现平滑、无闪烁的滚动。当渲染器无法控制屏幕刷新发生的时间时，这一点尤为重要。请参阅http://en.wikipedia.org/wiki/Multiple_buffering。 - Mike Samuel