フロントエンドページの最適化 (1) パフォーマンス: 手ぶれ補正とスロットリング

フロントエンドのデバウンス機能とスロットリング機能は、イベントが頻繁にトリガーされる場合のパフォーマンスの問題を解決します。

1.手ぶれ補正

手ぶれ補正機能の機能は、イベントがトリガーされてから一定時間待機してから、対応する処理ロジックを実行することです。この期間内に同じイベントが再度トリガーされると、計時が再開されます。これにより、イベントが継続的にトリガーされる場合に処理ロジックが頻繁に実行されるのを回避できるため、スロットリング効果が得られます。

一般的な手ぶれ補正機能は次のように実装されます。

function debounce(func, delay) {
  let timer;
  
  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timer);
    timer = setTimeout(function() {
      func.apply(context, args);
    }, delay);
  };
}

このうち、funcは実行する必要がある処理ロジックを表し、delay遅延時間を表します。

2. スロットリング

スロットル機能の機能は、対応する処理ロジックを一定期間内に最大 1 回実行することです。この期間内にイベントが頻繁にトリガーされる場合、処理ロジックは初回のみ実行され、それ以降のトリガーは無視されます。

一般的なスロットル機能は次のように実装されます。

function throttle(func, interval) {
  let lastTime = 0;
  
  return function() {
    const context = this;
    const args = arguments;
    const currentTime = Date.now();
    
    if (currentTime - lastTime > interval) {
      func.apply(context, args);
      lastTime = currentTime;
    }
  };
}

このうち、funcは実行する必要がある処理ロジックを表し、interval時間間隔を表します。

手ぶれ補正機能とスロットリング機能を使用すると、機能の実行頻度を効果的に制御し、Web ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。たとえば、スクロールイベントをリッスンする場合、スロットル機能を使用してイベントトリガーの頻度を制限し、過剰な計算や更新操作を回避できます。また、入力ボックスの検索機能では、手ぶれ補正機能を使用してイベントトリガーの数を減らすことができます。リクエストを処理し、サーバーの負荷を軽減します。

フロントエンドページの最適化 (1) パフォーマンス: 手ぶれ補正とスロットリング

おすすめ