ホームページ >ウェブフロントエンド >jsチュートリアル >Web アプリを高速化する実証済みの JavaScript パフォーマンス最適化手法
Web アプリを高速化する実証済みの JavaScript パフォーマンス最適化手法
- Susan Sarandonオリジナル
- 2024-12-13 16:43:06939ブラウズ
JavaScript のパフォーマンスの最適化は、高速で応答性の高い Web アプリケーションを作成するために重要です。開発者として、私はこれらの戦略を実装すると JavaScript コードの速度と効率が大幅に向上することがわかりました。
DOM 操作を最小限に抑えることは、JavaScript のパフォーマンスを最適化するための重要な要素です。ドキュメント オブジェクト モデル (DOM) は Web ページの HTML 構造を表現したものであり、その操作には計算コストがかかる場合があります。 DOM 操作の影響を軽減するために、私は常に更新をバッチ処理し、ドキュメントのフラグメントを使用するようにしています。
ドキュメントフラグメントを使用して DOM 操作を最小限に抑える方法の例を次に示します。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const element = document.createElement('div');
element.textContent = `Item ${i}`;
fragment.appendChild(element);
}
document.body.appendChild(fragment);
ドキュメント フラグメントを使用すると、メモリ内ですべての DOM 操作を実行し、1 回の操作でフラグメントを DOM に追加できるため、リフローと再ペイントの回数が減ります。
遅延読み込みの実装は、JavaScript のパフォーマンスを向上させるもう 1 つの効果的な戦略です。この手法では、すべてを事前にロードするのではなく、必要なときにのみリソースをロードしてスクリプトを実行します。このアプローチにより、特に大規模なアプリケーションの場合、初期ロード時間を大幅に短縮できます。
画像を遅延ロードする簡単な例を次に示します:
function lazyLoadImage(img) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
observer.observe(img);
}
document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);
このコードは Intersection Observer API を使用して、画像が表示されたときにのみ画像をロードすることで、最初のページの読み込み時間を短縮します。
Web ワーカーの利用は、特に計算量の多いタスクの場合、JavaScript のパフォーマンスを向上させるための強力な戦略です。 Web ワーカーを使用すると、バックグラウンド スレッドでスクリプトを実行できるため、メイン スレッドの応答性を維持し、UI のフリーズを防ぐことができます。
Web ワーカーを使用して負荷の高い計算を実行する例を次に示します。
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });
// worker.js
self.onmessage = function(event) {
const result = fibonacci(event.data.number);
self.postMessage(result);
};
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
この例では、大きなフィボナッチ数の計算を Web ワーカーにオフロードし、メイン スレッドがブロックされるのを防ぎます。
ループと反復の最適化は、JavaScript の実行速度を向上させるために重要です。適切な配列メソッドを使用し、不必要な反復を回避すると、パフォーマンスに大きな違いが生じる可能性があります。
ループを最適化する次の例を考えてみましょう:
// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
最適化されたバージョンでは、reduce メソッドが使用されます。これは一般に、従来の for ループよりも高速かつ簡潔です。
キャッシュ メカニズムの実装は、JavaScript のパフォーマンスを向上させるためのもう 1 つの効果的な戦略です。頻繁にアクセスされるデータをメモリまたはローカル ストレージに保存することで、サーバー リクエストの数を減らし、アプリケーションを高速化できます。
簡単なキャッシュ メカニズムの例を次に示します。
const cache = new Map();
async function fetchData(url) {
if (cache.has(url)) {
return cache.get(url);
}
const response = await fetch(url);
const data = await response.json();
cache.set(url, data);
return data;
}
この関数は、ネットワーク リクエストを行う前に、リクエストされたデータがキャッシュにあるかどうかを確認し、時間とリソースを節約できる可能性があります。
JavaScript アプリケーションのパフォーマンスの問題を特定して解決するには、ブラウザー開発者ツールを活用することが不可欠です。これらのツールは、実行時間、メモリ使用量、潜在的なボトルネックに関する貴重な洞察を提供します。
たとえば、Chrome DevTools の [パフォーマンス] タブを使用すると、パフォーマンス プロファイルを記録し、コードが最も時間を費やしている箇所を分析できます。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const element = document.createElement('div');
element.textContent = `Item ${i}`;
fragment.appendChild(element);
}
document.body.appendChild(fragment);
関数を console.time と console.timeEnd でラップすることで、ブラウザのコンソールで実行時間を測定できます。
コード分割の採用は、特に大規模なアプリケーションで JavaScript のパフォーマンスを最適化するための強力な手法です。 JavaScript バンドルを小さなチャンクに分割し、各ルートまたは機能に必要なコードのみをロードすることで、初期ロード時間を大幅に短縮できます。
ここでは、動的インポートを使用して React アプリケーションでコード分割を実装する方法の例を示します。
function lazyLoadImage(img) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
observer.observe(img);
}
document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);
この例では、LazyComponent は MyComponent がレンダリングされるときにのみロードされ、初期バンドル サイズが削減されます。
これらの戦略は、JavaScript のパフォーマンスを最適化するための強固な基盤を形成しますが、パフォーマンスの最適化は継続的なプロセスであることを覚えておくことが重要です。アプリケーションが成長し、進化するにつれて、最適なパフォーマンスを確保するためにコードを継続的に監視し、改良する必要があります。
私が特に効果的であると感じた戦略の 1 つは、高価な計算にメモ化を使用することです。メモ化には、関数呼び出しの結果をキャッシュし、同じ入力が再度発生したときにキャッシュされた結果を返すことが含まれます。これにより、同じ引数で頻繁に呼び出される関数の速度が大幅に向上します。
メモ化された関数の例を次に示します:
// main.js
const worker = new Worker('worker.js');
worker.onmessage = function(event) {
console.log('Result:', event.data);
};
worker.postMessage({ number: 1000000 });
// worker.js
self.onmessage = function(event) {
const result = fibonacci(event.data.number);
self.postMessage(result);
};
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
JavaScript のパフォーマンス最適化のもう 1 つの重要な側面は、効率的なメモリ管理です。 JavaScript は自動ガベージ コレクションを使用しますが、注意しないとメモリ リークが発生する可能性があります。メモリ リークの一般的な原因の 1 つは、イベント リスナーが忘れられたことです。
これを防ぐには、イベント リスナーが不要になったときに常に削除する必要があります。
// Unoptimized
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
// Optimized
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
この関数は、一度トリガーされると自動的に削除されるイベント リスナーを追加し、メモリ内に残ることを防ぎます。
大規模なデータセットを操作する場合、適切なデータ構造を使用するとパフォーマンスが大幅に向上します。たとえば、大規模なコレクションの場合、メンバーシップのチェックに配列の代わりにセットを使用すると、はるかに高速になります。
const cache = new Map();
async function fetchData(url) {
if (cache.has(url)) {
return cache.get(url);
}
const response = await fetch(url);
const data = await response.json();
cache.set(url, data);
return data;
}
通常、特に大規模なデータセットの場合、Set 操作ははるかに高速です。
私が便利だと感じたもう 1 つのテクニックは、特に頻繁にトリガーされる可能性のあるイベント ハンドラー (スクロール イベントやサイズ変更イベントなど) の場合、関数呼び出しのデバウンスまたはスロットリングです。デバウンスにより、関数が最後に呼び出されてから一定の時間が経過した後にのみ呼び出されるようになります。一方、スロットリングにより、関数を呼び出せる頻度が制限されます。
デバウンス関数の例を次に示します:
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const element = document.createElement('div');
element.textContent = `Item ${i}`;
fragment.appendChild(element);
}
document.body.appendChild(fragment);
このデバウンス関数は「Resize!」のみをログに記録します。ウィンドウのサイズ変更が 250 ミリ秒停止した後。
非同期操作を扱う場合、Promises または async/await を使用すると、コールバックベースのアプローチと比較してコードが読みやすく保守しやすくなります。ただし、パフォーマンスの問題を引き起こす可能性がある未処理の Promise 拒否を防ぐために、エラーを適切に処理することが重要です。
function lazyLoadImage(img) {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
observer.observe(img);
}
document.querySelectorAll('img[data-src]').forEach(lazyLoadImage);
この関数は、フェッチ操作における潜在的なエラーを適切に処理し、アプリケーション内の他の場所で問題が発生するのを防ぎます。
大きなリストやテーブルを扱う場合、仮想スクロールを実装するとパフォーマンスが大幅に向上します。仮想スクロールには、ビューポートに現在表示されている項目のレンダリングのみが含まれます。これにより、DOM 要素の数が大幅に削減され、スクロールのパフォーマンスが向上します。
クラス VirtualList {
コンストラクター(コンテナー、アイテム高さ、レンダーアイテム) {
this.container = コンテナ;
this.itemHeight = itemHeight;
this.renderItem = renderItem;
this.items = [];
this.scrollTop = 0;
this.visibleItems = [];
this.container.addEventListener('scroll', this.onScroll.bind(this));
}
setItems(アイテム) {
this.items = アイテム;
this.container.style.height = `${items.length * this.itemHeight}px`;
this.render();
}
onScroll() {
this.scrollTop = this.container.scrollTop;
this.render();
}
与える（） {
const startIndex = Math.floor(this.scrollTop / this.itemHeight);
const endIndex = Math.min(this.items.length - 1, startIndex Math.ceil(this.container.clientHeight / this.itemHeight));
this.visibleItems = [];
for (let i = startIndex; i
<p>この仮想スクロールの実装では、スムーズなスクロールのパフォーマンスを維持しながら、数千の項目を含むリストを処理できます。</p><p>結論として、JavaScript のパフォーマンスの最適化は多面的なプロセスであり、コードとアプリケーション アーキテクチャのさまざまな側面に注意を払う必要があります。これらの戦略を実装し、コードを継続的に監視して改良することで、優れたユーザー エクスペリエンスを提供する、高速で効率的で応答性の高い JavaScript アプリケーションを作成できます。パフォーマンスの最適化は継続的なプロセスであり、最新のベスト プラクティスとツールを常に最新の状態に保つことが、高パフォーマンスの JavaScript アプリケーションを維持するために重要であることに注意してください。</p>
<hr>
<h2>
私たちの作品
</h2>
<p>私たちの作品をぜひチェックしてください:</p>
<p><strong>インベスターセントラル</strong> | <strong>スマートな暮らし</strong> | <strong>エポックとエコー</strong> | <strong>不可解な謎</strong> | <strong>ヒンドゥーヴァ</strong> | <strong>エリート開発者</strong> | <strong>JS スクール</strong></p>
<hr>
<h3>
私たちは中程度です
</h3>
<p><strong>Tech Koala Insights</strong> | <strong>エポックズ＆エコーズワールド</strong> | <strong>インベスター・セントラル・メディア</strong> | <strong>不可解な謎 中</strong> | <strong>科学とエポックミディアム</strong> | <strong>現代ヒンドゥーヴァ</strong></p>
以上がWeb アプリを高速化する実証済みの JavaScript パフォーマンス最適化手法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。