非同期と遅延: スクリプト読み込みの簡単な説明

Web サイトに JavaScript を読み込む場合、さまざまな読み込み方法が Web サイトのパフォーマンスや動作にどのような影響を与えるかを理解することが重要です。 JavaScript はさまざまな方法でロードできますが、主にデフォルトのロード方法である非同期および遅延を使用します。これらの方法にはそれぞれ独自の特徴と使用例があります。この投稿では、プロジェクトに対して情報に基づいた意思決定を行うのに役立つこれら 3 つの方法を検討します。

デフォルトのロード

デフォルトでは、JavaScript ファイルは HTML ドキュメントに含まれるときに同期的に読み込まれます。これは、ブラウザが HTML ドキュメントの解析を一時停止して、続行する前に JavaScript ファイルをダウンロードして実行することを意味します。

デフォルトの方法を使用してスクリプトを組み込む一般的な方法は次のとおりです。

<script src="script.js"></script>

非同期読み込み

async 属性を使用すると、ブラウザは HTML ドキュメントの解析を続行しながら、JavaScript ファイルを非同期的にダウンロードできます。スクリプトがダウンロードされると、HTML 解析が完了する前に、すぐに実行される可能性があります。

<script src="script.js" async></script>

読み込みを延期する

defer 属性も JavaScript ファイルを非同期でダウンロードしますが、主な違いは、HTML ドキュメントが完全に解析された後にのみスクリプトが実行されることです。

<script src="script.js" defer></script>

3 つの方法の比較

簡単なヒント

1. 重要でないスクリプトには非同期を使用します: DOM に依存しない分析、広告、その他のサードパーティ統合などのスクリプトの場合。
2. DOM に依存するスクリプトに defer を使用する: DOM を操作するスクリプト、または特定の順序で実行する必要があるスクリプトの場合。
3. デフォルトのスクリプト読み込みを最小限に抑える: 大規模なスクリプトまたは非同期でロードできるスクリプトのデフォルトの同期読み込みを回避します。
4. 本文の下部にスクリプトを読み込みます: デフォルトの読み込み動作を使用する必要がある場合は、 を配置します。 の最後にあるタグHTML コンテンツが最初に読み込まれるようにします。

結論

適切なスクリプト読み込み方法を選択すると、Web ページのパフォーマンスとユーザー エクスペリエンスが大幅に向上します。デフォルト、非同期、遅延の違いを理解することで、スクリプトを効率的にロードする方法について情報に基づいた決定を下すことができます。 async は独立したスクリプトに最適であり、defer は完全な DOM を必要とするスクリプトに最適であり、デフォルトの読み込みは絶対に必要な場合に限定する必要があることに注意してください。

以上が非同期と遅延: スクリプト読み込みの簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。