Web ページを高速化するためのよく知られた JavaScript の概念

今日では、ほとんどの人が React またはその他の高レベルの TypeScript コードを作成していますが、F12 コンソールとブラウザーの JavaScript ランタイムの暗い領域に足を踏み入れなければならない場合もまだあります。

この記事では、より高速なページの作成に役立つ可能性が高い、理解する必要があるいくつかの重要な概念について説明します。

1)?イベントループ

JavaScript はシングルスレッドです。これは、言語自体が一度に 1 つのタスクしか実行できないことを意味します。この制限を回避するために、ブラウザーは「イベント ループ」メカニズムを提供します。

たとえば、「setInterval」関数を使用すると、ブラウザはバックグラウンドでタイマーを維持し、その間隔が経過すると、コールバック関数がイベント ループにプッシュされます。

一方、非同期ブラウザ API を使用しない JavaScript コードは、上から下に順番に実行されるだけです。メインスレッドが何も作業を行っていない場合、ブラウザはイベントループからタスクを取得して実行します。

2) ？バックグラウンドワーカー

実行に長い時間 (たとえば 500 ミリ秒) かかる集中的な操作を扱う場合、UI が遅くなる可能性があるため、これをメインスレッドで実行することは絶対に避けてください。

ここで Web ワーカーが役に立ちます。 Web ワーカーはブラウザのメイン スレッドとは別のスレッドで実行されるため、ここで実行されるタスクはページの読み込み速度に影響しません。

良い使用例は、たとえば、解析および計算を行う数千のレコードを含む複雑なチャートの時系列データがある場合です。ローダーを表示して Web ワーカーでチャートの計算を行うだけで、準備ができたら DOM を更新できます。

3) ⏸️不要不急のことは遅らせる

JavaScript はシングルスレッドであるため、メインスレッドを解放するためにできる限り遅延する必要があります。したがって、開始するのに最適な場所はコア ウェブ バイタルです。これは、遅延の可能性がある遅いコードを特定するのに役立つ重要な SEO 指標です。

その後、スクロール、ロード、DOMContentLoaded などのイベント リスナーを使用して、コードの実行を遅らせることができます。

通常、これはページの追跡を遅らせたり、フォールドの下にウィジェットをロードしたり、グラフをロードしたり、メインのフォールドの下にある他の A​​PI 呼び出しを行うために使用されます。

例:

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

ℹ️ DOMContentLoaded: 非同期 JS スクリプトを含まない HTML ドキュメント全体が最初に解析されるまで待機しますが、画像、CSS ファイル、iframe などの外部リソースは待機しません。 「load」イベントは、CSS、iframe、画像を含むすべてがロードされるのを待つ点を除いて似ています。

もう 1 つの便利な Web API は Intersection Observer です。これにより、要素の表示/非表示に基づいてコードをトリガーでき、ユーザーが特定の DOM 要素をスクロールしたとき (無限のページネーションを考えてください)、API 呼び出しを最小限に抑えるのに非常に役立ちます。

4) ⁉️ オフスクリーンキャンバス

Web ワーカーと同様に、「OffscreenCanvas」として知られるブラウザ API を使用して、集中的なキャンバス関連の操作をバックグラウンド タスクとして独自のスレッドにプッシュできます。

これは、リアルタイムの視覚化、画像操作、ゲーム、ビデオ編集などに役立ちます...

5) ⏳ ブラウザがビジー状態でないときにタスクを実行する

「requestIdleCallback」で実行されるタスクの優先度が非常に低いため、ブラウザがアイドル状態のときにのみ実行される点を除いて、イベント ループと非常に似ています。

これは、PWA でのオフライン アクセスのロギングやキャッシュなど、重要ではないタスクの実行に最適です。

? MDN Web ドキュメント [ボーナス - 役立つリソース]

https://developer.mozilla.org/en-US/
おそらくこのために Claude や LLM を使用していることはわかっていますが、AI の幻覚が問題であり、時には間違った情報を提供してしまうことがあるため、信頼できるしっかりとした文書化されたリファレンス ガイドを用意しておくとよいでしょう。

MDN はオープンソースで、Mozilla によって管理されており、さまざまな JavaScript、CSS、HTML ブラウザー API について学ぶのに最適な Web リソースであることは間違いありません。私はこれまでのキャリアを通じてこれを頻繁に使用しており、今でも使用しています。

追記: Web 開発、AI、Linux のチュートリアルとガイドについて詳しくは、KevinCoder

で私のブログをご覧ください。

以上がWeb ページを高速化するためのよく知られた JavaScript の概念の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。