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

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

1)?イベントループ

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

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

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

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

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

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

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

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

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

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

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

例:

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

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

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

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

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

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

5) ? ブラウザがビジー狀態(tài)でないときにタスクを?qū)g行する

「requestIdleCallback」で実行されるタスクの優(yōu)先度が非常に低いため、ブラウザがアイドル狀態(tài)のときにのみ実行される點(diǎn)を除いて、イベント ループと非常に似ています。

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

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

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

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

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

以上がWeb ページを高速化するためのよく知られた JavaScript の概念の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。