位置粘

Question

我知道很高兴网络开发人员现在可以在没有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找到位置：-webkit-sticky，并且与上面的javascript有一些相同的渲染？

Answer 1

  

从本质上讲，浏览器中有一个较低级别的代码可以让CSS找到位置：-webkit-sticky，并且与上面的javascript有点相同的渲染？

没有。浏览器不必做同样的事情。

对于粘性区域的本机支持，对于每个剪切区域，浏览器可以维护两个单独的图形缓冲区 - 一个用于非粘性内容，其大小适合容器，另一个用于粘贴内容，其大小适合视口。滚动时，它

1. 抓住第一个的可见区域
2. 复合与第二个（考虑到z-indices）
3. 将它暴露在屏幕上。

浏览器根本不需要处理DOM。

将其与JS onscroll方法进行比较。

1. 抓住一个锁，以防来自另一个框架的JS当前正在计算当前框架中的内容
2. 设置JS执行上下文
3. 运行用户功能
4. 检查是否需要重新应用任何CSS选择器
5. 检查DOM是否需要布局
6. 检查是否需要触发DOM修改事件侦听器
7. 找出需要重新渲染DOM的哪些位 - 这不是移动已经渲染的矩形的问题
8. 重新渲染
9. 复合
10. 的blit