3

我知道 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 渲染有些相同？

4

1 回答 1

4

本质上，在浏览器中是否存在渲染 CSS 的较低级别的代码找到位置：-webkit-sticky，并且与上面的 javascript 进行一些相同的渲染？

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

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

  1. 抓取第一个的可见区域，
  2. 将其与第二个复合（考虑 z 索引）
  3. 将其传送到屏幕上。

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

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

  1. 抓住一个锁，以防另一个帧的 JS 当前正在计算当前帧中的某些内容
  2. 设置 JS 执行上下文
  3. 运行用户函数
  4. 检查是否需要重新应用任何 CSS 选择器
  5. 检查DOM是否需要布局
  6. 检查是否需要触发 DOM 修改事件监听器
  7. 找出 DOM 的哪些位需要重新渲染——这不是在已经渲染的矩形周围移动的问题
  8. 重新渲染
  9. 合成的
  10. 位图
于 2013-05-21T21:49:46.340 回答