4

私はHTML5Rocksに関する記事を読んでいて、Webページをスクロールし、DOM要素offsetTopの配列をチェックしてそれらが表示されるかどうかを確認する例を示しました。

この記事によると、これを行うためのベストプラクティスの方法は、スクロールイベントが発生するたびに、ウィンドウの現在のオフセットトップで変数を更新することです。最初のスクロールイベントが発生すると、DOM要素のoffsetTopをチェックするrequestAnimationFrameプロセスがトリガーされます。これにより、可視性ロジックがスクロールイベントから切り離されます。

これら2つのプロセスを確実に分離することの利点は理解していますが（スクロールイベントは1秒間に数百回呼び出される可能性があるため）、最初のスクロールイベントの16ミリ秒ごとに可視性ロジックを実行することの利点はわかりません。ユーザーが移動を続けているかどうか。

誰かが私がここで欠けているプロセスのどの部分を説明できますか？

4

1 に答える 1

3

記事でよく説明されていると思います。

他に何ができますか？一つには、私たちは常にrequestAnimationFrameを実行していますが、何も変更されないため、スクロールしただけでは必要ありません。onScrollにrequestAnimationFrameを開始させることを修正するには

これで、スクロールするたびにrequestAnimationFrameを呼び出そうとしますが、1つがすでに要求されている場合は、もう1つを開始しません。これは重要な最適化です。ブラウザーは繰り返されるすべてのrAF要求をスタックし、必要以上に更新の呼び出しがある状況に戻るためです。

この設定のおかげで、更新の先頭でrequestAnimationFrameを呼び出す必要がなくなりました。これは、1つ以上のスクロールイベントが発生したときにのみ要求されることがわかっているためです。また、下部のキックオフコールも不要になったので、それに応じて更新しましょう。

var latestKnownScrollY = 0,
    ticking = false;

function onScroll() {
    latestKnownScrollY = window.scrollY;
    if (!ticking) {
        requestAnimationFrame(update);
    }
    ticking = true;
}
function update() {
    ticking = false; // reset the tick so we can capture the next onScroll

    var currentScrollY = latestKnownScrollY;

    // Do visibilty logic and animation here
}

したがって、「ユーザーが移動を続けているかどうかに関係なく」は実際には真実ではありません。updateは、スクロール中（またはスクロール後少し後）にのみ呼び出され、1秒あたり数百のイベントのレートではなく、ブラウザが選択したフレームレートで呼び出されます。

于 2012-11-04T10:51:29.470 に答える