パフォーマンスの最適化：デボンシングとスロットリングの使用-jsチュートリアル-php.cn

パフォーマンスの最適化：デボンシングとスロットリングの使用

Mary-Kate Olsen

リリース： 2025-01-30 00:32:08

オリジナル

497 人が閲覧しました

Optimizing Performance: Using Debouncing and Throttling

？ 接続しましょう！新しいプロジェクトの最新情報については、githubで私を見つけてください。

はじめに

今日のペースの速い開発環境では、高性能のWebアプリケーションが重要です。特に動的なコンテンツとユーザーのやり取りを扱う場合、効率的なイベント処理が重要です。デバウニングとスロットリングは、イベントハンドラーの実行頻度を制御することによりパフォーマンスを最適化する強力なテクニックです。このガイドでは、これらの方法を調査し、それらの違いと実用的なJavaScriptとReactの実装を強調しています。

debouncing and throttling：比較

debouncingとthrottlingの両方が関数の実行を調節しますが、それらのアプリケーションは異なります。

debouncing：

は、指定された期間の非アクティブの後にのみ関数を実行します。検索バーやウィンドウのサイズ変更など、継続的な入力があるシナリオに最適です。演技の前に「ノイズ」が落ち着くのを待っていると考えてください。 rottling：

イベントのトリガー回数に関係なく、特定の時間間隔で最大1回関数を実行します。スクロールやマウスの動きなどの高周波イベントに役立ちます。一貫した実行率を保証します

javaScriptの実装

プレーンJavaScriptでの脱clowingとスロットリングの実用的な例を探りましょう。 debouncing（vanilla javascript）：

オートコンプリート検索機能は完璧なユースケースです。

スロットリング（バニラjavascript）：スクロールパフォーマンスの最適化は一般的なアプリケーションです。

<code class="language-javascript">function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Example: Debouncing a search input
const searchInput = document.getElementById('search');
const handleSearch = (event) => {
  console.log(`Searching for: ${event.target.value}`);
};

searchInput.addEventListener('input', debounce(handleSearch, 300));</code>

ログイン後にコピー

反応実装

Reactは、フックを使用してデバウニングとスロットリングを実装する柔軟な方法を提供します。また、合理化された実装のためにLodashのようなライブラリを活用することもできます。

<code class="language-javascript">function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function (...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(() => {
        if (Date.now() - lastRan >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

// Example: Throttling a scroll event
const handleScroll = () => {
  console.log('Scroll event triggered');
};

window.addEventListener('scroll', throttle(handleScroll, 200));</code>

ログイン後にコピー

反応でのdebouncing：

bounted検索入力フィールド。

反応でのスロットリング：

スロットルされたスクロールイベントハンドラー。

Lodashを使用する

：

<code class="language-javascript">import React, { useState, useCallback } from 'react';

const DebouncedSearch = () => {
  // ... (State and debounce function remain the same) ...
};</code>

ログイン後にコピー

lodashは実装を簡素化します。

。を使用してインストールします

<code class="language-javascript">import React, { useState, useEffect } from 'react';

const ThrottledScroll = () => {
  // ... (State and throttle function remain the same) ...
};</code>

ログイン後にコピー

実世界のアプリケーション npm install lodash debouncing and throttlingは、応答性の高い効率的なアプリケーションを構築するために不可欠です。

<code class="language-javascript">import { debounce, throttle } from 'lodash';
// ... use debounce and throttle directly ...</code>

ログイン後にコピー

検索最適化：

debouncing検索機能のAPI呼び出しを最小限に抑えます滑らかなスクロール：

スロットリングは、スクロール中のパフォーマンスの問題を防ぎます

イベント駆動型アプリ：

結論
高性能Webアプリケーションを作成するには、debouncing and throttlingが不可欠です。イベントの実行頻度を管理することにより、これらの手法はリソースの使用を最適化し、ユーザーエクスペリエンスを向上させます。これらのテクニックを習得することは、現代のWeb開発者にとって重要です。

メタの説明：debouncingとrottlingでWebアプリのパフォーマンスを強化します。違い、JavaScriptとReactの実装、および実際のアプリケーションを学びましょう。

tldr：
イベントバースト（検索バー）の後のまれな実行のためのdebounce;間隔内で一貫した実行のためのスロットル（スクロール）。簡単に実装するために、React HookまたはLodashを使用してください。アプリのパフォーマンスとユーザーエクスペリエンスを向上させます！

コメントでのdebouncingとthrottlingであなたの経験を共有してください！

以上がパフォーマンスの最適化：デボンシングとスロットリングの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。