開発者のための優れた JavaScript パフォーマンス最適化テクニック-jsチュートリアル-php.cn

owerful JavaScript Performance Optimization Techniques for Developers

開発者として、応答性が高く効率的な Web アプリケーションを作成するには、JavaScript のパフォーマンスを最適化することが重要であることがわかりました。長年にわたって、私はコードのパフォーマンスをプロファイリングして改善するためのさまざまな手法を模索してきました。私が使用して成功した 7 つの強力な方法を以下に示します。

ブラウザ開発者ツールは、パフォーマンスプロファイリングのための貴重なリソースです。私は Web アプリケーションを分析するために Chrome DevTools を頻繁に使用します。 [パフォーマンス] パネルには、ロード時間、CPU 使用率、メモリ消費量に関する豊富な情報が表示されます。プロファイリングを開始するには、DevTools を開き、[パフォーマンス] タブに移動して、記録ボタンをクリックします。アプリケーションを操作した後、記録を停止し、結果を調べます。

パフォーマンスパネルのフレームチャートは特に便利です。どの関数の実行に最も時間がかかっているかが表示されます。グラフの特定の領域を拡大して、関数呼び出しとその期間の詳細な内訳を確認できます。これは、他の方法では気づかなかったコード内のボトルネックを特定するのに役立ちます。

私が便利だと思うもう 1 つの機能は、[ネットワーク] パネルです。これにより、各リソースの読み込みにかかる時間を確認できます。これは、ページの初期読み込み時間を最適化するために重要です。さまざまなネットワーク条件をシミュレートして、低速の接続でもアプリケーションが適切に動作することを確認できます。

Lighthouse は、Chrome DevTools に統合されたもう 1 つの強力なツールです。パフォーマンス、アクセシビリティ、プログレッシブ Web アプリなどの自動監査を提供します。私は Web アプリケーションに対して Lighthouse 監査を実行して、パフォーマンスの包括的な概要を把握することがよくあります。

Lighthouse を使用するには、DevTools を開いて [Lighthouse] タブに移動し、監査するカテゴリを選択して、[レポートの生成] をクリックします。結果として得られるレポートには、アプリケーションのさまざまな側面のスコアが表示され、改善のための具体的な提案が提供されます。

Lighthouse の最も価値のある機能の 1 つは、モバイルデバイスと低速のネットワーク接続をシミュレートする機能です。これは、さまざまなデバイスやネットワーク条件にわたってアプリケーションが適切に動作することを確認するのに役立ちます。

パフォーマンスタイムライン API は、コードを計測し、特定の操作を測定するための強力なツールです。これを使用して、アプリケーションの重要な部分の実行時間を追跡するのに役立つカスタムパフォーマンスエントリを作成します。

パフォーマンスタイムライン API の使用例を次に示します。

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

ログイン後にコピー

このコードは、複雑な操作の開始時と終了時にマークを作成し、これらのマーク間の時間を測定し、継続時間を記録します。これは、コードの特定部分のパフォーマンスを追跡するためのシンプルかつ効果的な方法です。

ユーザータイミング API はパフォーマンスタイムライン API と密接に関連しており、ブラウザのパフォーマンスタイムラインにカスタムタイミングデータを追加する方法を提供します。これは、アプリケーションの重要な機能やプロセスの継続時間を測定するのに特に便利です。

User Timing API の使用例を次に示します。

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

ログイン後にコピー

このコードは、プロセスの開始と終了をマークし、これらのマークの間の時間を測定し、継続時間を記録します。これは、アプリケーションの特定部分の正確なタイミング情報を取得する優れた方法です。

Chrome Tracing は、JavaScript の実行とレンダリングを詳細に分析するための詳細なパフォーマンスデータをキャプチャできる、より高度なツールです。ブラウザーに組み込まれている開発者ツールよりも使用が複雑ですが、ブラウザーで何が起こっているかについて、前例のないレベルの詳細を提供します。

Chrome トレースを使用するには、通常次の手順に従います:

Chrome を開き、chrome://tracing に移動します
「記録」をクリックし、トレースしたいカテゴリを選択します
アプリケーションを操作する
記録を停止し、結果を分析します

結果として得られるトレースファイルには、JavaScript の実行、レイアウト計算、描画など、ブラウザがミリ秒ごとに何を行っていたのかが正確に表示されます。アプリケーションの特に複雑な部分やパフォーマンスが重要な部分を最適化しようとする場合、この詳細レベルは非常に貴重です。

メモリスナップショットは、Chrome DevTools のもう 1 つの強力な機能で、メモリリークを特定し、オブジェクト保持パターンを分析するために使用しています。メモリリークは、時間の経過とともに重大なパフォーマンスの問題を引き起こす可能性があるため、メモリリークを特定して修正することが重要です。

メモリのスナップショットを撮るには、次の手順に従います:

Chrome DevTools を開き、[メモリ] タブに移動します
「ヒープスナップショット」を選択し、「スナップショットを作成」をクリックします
アプリケーションを操作する
別のスナップショットを作成します
スナップショットを比較して、不必要に保持されているオブジェクトを特定します

メモリリークを引き起こす可能性のあるコードの簡単な例を次に示します。

performance.mark('startProcess');
// Complex process
for (let i = 0; i < 1000000; i++) {
    // Some complex operation
}
performance.mark('endProcess');

performance.measure('processTime', 'startProcess', 'endProcess');

const measurements = performance.getEntriesByName('processTime');
console.log(`Process took ${measurements[0].duration} milliseconds`);

ログイン後にコピー

この場合、leak.someMethod がそれへの参照を保持しているため、createLeak の実行が終了した後でも、largeArray はメモリ内に保持されます。メモリのスナップショットは、この問題を特定するのに役立ちます。

フレームチャートは、JavaScript コードの実行フローを理解するのに特に役立つ視覚化ツールです。一定期間のコールスタックが表示されるので、どの関数の実行に最も時間がかかっているかが簡単にわかります。

Chrome DevTools は、パフォーマンスを記録するときにフレームチャートを自動的に生成します。 X 軸は時間を表し、Y 軸は呼び出しスタックを示します。グラフ内の各バーは関数呼び出しを表し、バーの幅は関数の実行にかかった時間を示します。

私は頻繁に呼び出される関数や実行に時間がかかる関数を特定するためにフレームチャートをよく使用します。これにより、全体的なパフォーマンスに最も大きな影響を与えるコードの部分に最適化の取り組みを集中させることができます。

JavaScript のパフォーマンスを最適化するときは、時期尚早に最適化するとコードがより複雑になり、保守が困難になる可能性があることを覚えておくことが重要です。私は常に、クリーンで読みやすいコードを書くことから始めて、次にこれらのプロファイリング手法を使用して実際のボトルネックを特定します。

私が特に効果的だと感じたテクニックの 1 つは、遅延読み込みです。これには、必要になるまで非クリティカルなリソースの読み込みを延期することが含まれます。簡単な例を次に示します:

performance.mark('startFunction');
// Complex function or operation
complexOperation();
performance.mark('endFunction');

performance.measure('functionDuration', 'startFunction', 'endFunction');

const measures = performance.getEntriesByType('measure');
console.log(measures[0].duration);

ログイン後にコピー

このコードは Intersection Observer API を使用して、画像が表示されたときにのみ画像をロードすることで、多くの画像を含むページの最初のページ読み込み時間を大幅に短縮します。

私がよく使うもう 1 つのテクニックはデバウンスです。これは、スクロールやサイズ変更のイベントハンドラーなど、頻繁に呼び出される関数に特に役立ちます。以下に例を示します:

performance.mark('startProcess');
// Complex process
for (let i = 0; i < 1000000; i++) {
    // Some complex operation
}
performance.mark('endProcess');

performance.measure('processTime', 'startProcess', 'endProcess');

const measurements = performance.getEntriesByName('processTime');
console.log(`Process took ${measurements[0].duration} milliseconds`);

ログイン後にコピー

このデバウンス関数により、ユーザーがウィンドウのサイズ変更を 250 ミリ秒停止した場合にのみサイズ変更ハンドラーが実行されるようになり、関数の呼び出し回数が削減されます。

ループの最適化に関しては、map、filter、reduce などの配列メソッドを使用すると、従来の for ループよりも読みやすく、場合によってはパフォーマンスの高いコードが得られることがわかりました。以下に例を示します:

let leak = null;

function createLeak() {
    const largeArray = new Array(1000000).fill('leaky');
    leak = {
        someMethod: () => {
            console.log(largeArray.length);
        }
    };
}

createLeak();

ログイン後にコピー

JavaScript のパフォーマンスのもう 1 つの重要な側面は、非同期操作を効果的に管理することです。 Promise と async/await 構文は、非同期コードを読みやすくし、推論しやすくするのに役立ちます。以下に例を示します:

function lazyLoad(element) {
    if ('IntersectionObserver' in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let img = entry.target;
                    img.src = img.dataset.src;
                    observer.unobserve(img);
                }
            });
        });
        observer.observe(element);
    } else {
        // Fallback for browsers that don't support IntersectionObserver
        element.src = element.dataset.src;
    }
}

// Usage
document.querySelectorAll('img[data-src]').forEach(lazyLoad);

ログイン後にコピー

この非同期関数はエラー処理に try/catch を使用し、非同期操作の結果を待つため、ネストされたコールバックと比較してコードの読み取りと保守が容易になります。

DOM 操作に関しては、直接操作と変更のバッチ処理を最小限に抑えると、パフォーマンスが大幅に向上することがわかりました。文書フラグメントの使用は特に効果的です:

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
}

// Usage
window.addEventListener('resize', debounce(() => {
    console.log('Window resized');
}, 250));

ログイン後にコピー

このアプローチにより、DOM の更新回数が最小限に抑えられるため、多数の要素のパフォーマンスが大幅に向上します。

結論として、JavaScript のパフォーマンスのプロファイリングと最適化は継続的なプロセスです。 Web アプリケーションが複雑になるにつれて、パフォーマンスを定期的に評価して改善することが重要になります。ブラウザ開発者ツールや Lighthouse の使用から、遅延読み込みや効率的な DOM 操作の実装に至るまで、ここで説明したテクニックは、私の仕事において非常に貴重なものでした。これらの方法を適用し、新しいパフォーマンス最適化手法を継続的に学習することで、より優れたユーザーエクスペリエンスを提供する、より高速で効率的な Web アプリケーションを作成できます。

101冊

101 Books は、著者 Aarav Joshi が共同設立した AI 主導の出版社です。高度な AI テクノロジーを活用することで、出版コストを信じられないほど低く抑えており、書籍によっては $4 という低価格で販売されており、誰もが質の高い知識にアクセスできるようになっています。

Amazon で入手できる私たちの書籍 Golang Clean Code をチェックしてください。

最新情報とエキサイティングなニュースにご期待ください。本を購入する際は、Aarav Joshi を検索して、さらに多くのタイトルを見つけてください。提供されたリンクを使用して特別割引をお楽しみください!