HTML では、JavaScript ファイルを含める方法がいくつかあります。 4 つの異なる方法とその欠点を説明し、最後に最良のアプローチを紹介します。

1.

このアプローチでは、コードを解析する際に、本文内の HTML より先に JavaScript ファイルが読み込まれます。JavaScript がまだ解析されていない本文内の要素を操作しようとすると、HTML コンテンツが完全に解析されていないため、エラーが発生する可能性があります。ロードされました。

このブロック動作により、ページの残りの部分の解析とレンダリングが遅れ、パフォーマンスとユーザー エクスペリエンスに影響します。

2.

このアプローチでは、JavaScript がロードされて実行される前に HTML が完全に解析され、DOM 要素の欠落に関連するエラーが防止されます。このアプローチはすべて良いのですが、HTML の解析と JavaScript の読み込みが順番に行われるため、2 つのプロセスが異なる時間に発生するため、全体的に時間がかかる可能性があります

3.

このアプローチでは、JavaScript を非同期にするため、HTML の読み込みがブロックされません。 HTML の解析と JavaScript の読み込みは両方とも並行して行われます。ただし、HTML が完全に解析される前に JavaScript が実行され、js がまだ読み込まれていない HTML 要素を操作しようとすると、エラーが発生する可能性があります。
注: — このアプローチは、html と js を同時にロードすることで時間を節約できますが、エラーに対してより脆弱です

4.

このアプローチは 3 番目のアプローチと似ており、HTML の解析と JavaScript の読み込みの両方が並行して行われます。ただし、JavaScript が最初に読み込まれる場合でも、ブラウザは HTML が完全に解析されるまで待ってからスクリプトを実行します

まとめ: 最善のアプローチ

通常、最良の方法は次を使用することです:

なぜ：

• HTML 解析はブロックされません (ノンブロッキング ダウンロード)。
• これにより、DOM が完全に解析された後にスクリプトが実行されるようになり、DOM 要素の操作がより安全になります。
• 複数の遅延スクリプトがある場合、スクリプトの実行順序が保持されます。

スクリプトが DOM コンテンツから独立している場合 (スクリプトや広告の追跡など)、非同期を使用するとパフォーマンスが向上します。