javascript - 位置置顶

Question

我知道 Web 开发人员现在可以在没有 js 的情况下完成这样的事情真是太好了:

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

对比

<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

In essence is there a lower level of code in the browser that renders the CSS finds the position: -webkit-sticky, and does somewhat of the same rendering as the javascript above?

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

有了对粘性区域的原生支持，对于每个裁剪区域，浏览器可以维护两个独立的图形缓冲区——一个用于非粘性内容，其大小与容器一致，另一个用于粘性内容，其大小与视口(viewport)一致。在滚动时，它

1. 抓取第一个的可见区域，
2. 将其与第二个相结合(考虑到 z 指数)
3. blits 到屏幕。

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

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

1. 获取锁以防来自另一个框架的 JS 当前正在计算当前框架中的某些东西
2. 设置一个JS执行上下文
3. 运行用户函数
4. 检查是否需要重新应用任何 CSS 选择器
5. 检查DOM是否需要布局
6. 检查是否需要触发 DOM 修改事件监听器
7. 找出 DOM 的哪些部分需要重新渲染——这不是在已经渲染过的矩形周围移动的问题
8. 重新渲染
9. 复合
10. block