スクリーニングイベントのページ性能への影響を防ぐ

問題
scrollイベントは、ドキュメントまたはドキュメント要素のスクロール時にトリガされ、主にユーザがスクロールバーをドラッグします.

window.addEventListener('scroll', callback);

このイベントは連続的に大量にトリガされるので、その傍受関数の中には非常に計算された操作があるべきではない.
ソリューション
推奨された方法は、requestAnimationFrameまたはsetTimeoutを使用してイベントのトリガ周波数を制御し、customEventに関連して新しいイベントをスローすることができる.
request Animation Frame()

  var throttle = function (type, name, obj) {
    var obj = obj || window;
    var running = false;
    var func = function () {
      if (running) { return; }
      running = true;
      requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  //   scroll        optimizedScroll   
  throttle('scroll', 'optimizedScroll');
})();

window.addEventListener('optimizedScroll', function() {
  console.log('Resource conscious scroll callback!');
});

上記のコードでは、throttle関数はイベントトリガ周波数を制御するために使用され、requestAnimationFrame方法は、ページごとに書き換え(毎秒60回)、一回のscrollイベントの傍受関数のみをトリガすることを保証する.つまり、上記の方法は、scrollイベントのトリガ周波数を、毎秒60回に制限する.具体的には、scrollイベントは、周波数が毎秒60回を下回ると、optimizedScrollイベントをトリガし、optimizedScrollイベントの傍受関数を実行する.
set Timeout()setTimeout方法は、より大きな時間間隔を置くことができる.

(function() {
  window.addEventListener('scroll', scrollThrottler, false);

  var scrollTimeout;
  function scrollThrottler() {
    if (!scrollTimeout) {
      scrollTimeout = setTimeout(function () {
        scrollTimeout = null;
        actualScrollHandler();
      }, 66);
    }
  }

  function actualScrollHandler() {
    // ...
  }
}());

上記のコードでは、scrollイベント毎にscrollThrottler関数が実行される.この関数には、66ミリ秒ごとに実行されるタスクsetTimeoutがあります.
スロットル

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

window.addEventListener('scroll', throttle(callback, 1000));

上のコードはscrollイベントのトリガ周波数を一秒に一回に制限します.actualScrollHandler関数ライブラリは、既存のlodash関数を提供しており、直接使用することができる.

window.addEventListener('scroll', _.throttle(callback, 1000));

知識開拓throttleとdebounceのは別です.throttleは「節流」であり、一定期間に一回しか実行しないことを確保し、throttleは「手ぶれ防止」であり、連続操作が終了したら実行する.ウェブページのスクロールを例にとって、debounceはユーザがローリングを停止した後に実行し、debounceはユーザがウェブページをローリングしている場合、ローリング中に実行される.