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 と同じレンダリングを行う下位レベルのコードがありますか?

いいえ。ブラウザは同じことをする必要はありません。

スティッキー領域のネイティブ サポートにより、クリップされた領域ごとに、ブラウザーは 2 つの個別のグラフィック バッファーを維持できます。スクロールすると、

  1. 最初の可視領域を取得し、
  2. 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 に答える