スクリプトタグをマスターする: 正確なスクリプト制御のための Async と Defer の使用

Web 開発の世界では、ページの読み込み時間を最適化することが非常に重要です。 の 2 つの強力な属性タグ (非同期と遅延) は、Web サイトのパフォーマンスに大きな影響を与える可能性があります。これらの属性を十分に理解せずに使用すると、パフォーマンスに影響し、バグが発生する可能性があります。基本から始めて、これらの属性が何をするのか、いつ使用するのかを学びましょう。

基本: スクリプトのロード方法

デフォルトでは、ブラウザが に遭遇すると、タグ、それ:

HTML 解析を一時停止します スクリプトをダウンロードします スクリプトを実行します HTML 解析を再開します

このプロセスにより、特に大規模なスクリプトや接続が遅い場合、ページのレンダリングが遅くなる可能性があります。さらに、特定の HTML 要素が完全に読み込まれる前にスクリプトが実行されると、バグが発生する可能性があります。これは、スクリプトがドキュメント内に正しく配置されていない場合によく発生します。

非同期と遅延: 両刃の剣

非同期

機能: HTML 解析を続行しながら、スクリプトを非同期的にダウンロードします。 実行時: ダウンロードされるとすぐに、HTML 解析を一時停止します。 使用する場合: 他のスクリプトや DOM コンテンツに依存しない独立したスクリプト。 警告: 順序どおりに実行されず、依存関係が壊れる可能性があります。

延期

機能: HTML 解析を続行しながらスクリプトをダウンロードします。 実行時: HTML 解析が完了した後、DOMContentLoaded イベントの前。 使用する場合: DOM コンテンツに依存するスクリプト、または特定の順序で実行する必要があるスクリプト。 警告: 重要な機能の実行が遅れる可能性があります。

動作の比較

Attribute Download Execution HTML Parsing Main Risk None Blocks Immediate Paused Slow Initial Render Async Parallel ASAP Paused when downloaded Race Conditions Defer Parallel After HTML Continues Delayed Functionality

実行順序: 非同期、遅延、および両方

依存関係を管理し、適切な機能を確保するには、さまざまな属性を持つスクリプトの実行順序を理解することが重要です。仕組みは次のとおりです:

通常のスクリプト (非同期または遅延なし):

ドキュメント内に出現する順序で実行します。 ダウンロードされて実行されるまで HTML 解析をブロックします。 非同期スクリプト:

並行してダウンロードし、利用可能になったらすぐに実行します。 実行順序は保証されていません。ダウンロードされるとすぐに実行されます。 DOM が完全にロードされる前に実行される可能性があります。 スクリプトの延期:

並行してダウンロードしますが、HTML 解析が完了した後にのみ実行します。 ドキュメント内に出現する順序で実行します。 DOMContentLoaded イベントの前に実行します。 非同期と遅延の両方を含むスクリプト:

最新のブラウザでは、async 属性が優先されます。 非同期をサポートしていない古いブラウザでは、遅延動作に戻ります。

実行順序の例:

可能な実行順序:

1.js (ブロック解析) 3.js または 2.js (どちらか先にダウンロードした方) 2.js または 3.js (どちらか 2 番目にダウンロードされる方) 4.js 5.js

2 と 3 は任意の順序で実行できますが、1.js のダウンロードに時間がかかる場合は 1 より前に実行することもできることに注意してください。

ベストプラクティス

分析などの独立したスクリプトには非同期を使用します。 DOM または他のスクリプトに依存するスクリプトには defer を使用します。 スクリプトを に配置します。非同期を使用するか、遅延してダウンロードを早期に開始します。 重要なスクリプトについては、 のインライン スクリプトを検討してください。

ブラウザのサポート

非同期と遅延はどちらも最新のブラウザーで広くサポートされています。古いブラウザの場合は、スクリプト ローダーを使用するか、 の最後にスクリプトを配置することを検討してください。