HTMLページにおけるJavaScriptの読み込みは、ページのパフォーマンスやユーザー体験に大きな影響を与えます。特に、スクリプトがどのように非同期的に読み込まれるか（async）や、スクリプトの実行を遅延させる方法（defer）は、ページの読み込み速度やインタラクティブ性に重要な役割を果たします。ここでは、これらの属性がどのように機能し、どのように使用すべきかについて詳しく説明します。
1. JavaScriptの同期的な読み込み
通常、HTMLファイル内でJavaScriptを読み込む場合、ブラウザはスクリプトを読み込んだ後、そのスクリプトを実行し、実行が完了するまで次の処理を行いません。これは「同期的な読み込み」と呼ばれ、以下のように記述されます。
この方法では、スクリプトの読み込みと実行がページのレンダリングをブロックするため、ページの読み込みが遅くなる可能性があります。特に大きなスクリプトファイルを読み込んでいる場合や、複数のスクリプトを順番に読み込んでいる場合、ページが全て表示されるまで待たなければならなくなるため、ユーザー体験が損なわれることがあります。
2. async属性による非同期読み込み
async属性を使用することで、スクリプトを非同期に読み込むことができます。非同期読み込みとは、スクリプトの読み込みと実行が他のページのレンダリングと並行して行われることを意味します。これにより、ページの読み込みがブロックされず、ページのレンダリングが速くなります。
asyncを使うと、スクリプトは他のリソース（例えばHTMLやCSS）の読み込みとは並行して非同期に読み込まれますが、スクリプトが読み込まれるとすぐに実行されます。実行順序は、スクリプトの読み込みが完了した順番に依存するため、複数のスクリプトをasyncで指定した場合、その実行順序は保証されません。
例えば、以下のように複数のスクリプトを非同期で読み込むと、script1.jsとscript2.jsが読み込み順に実行されるわけではなく、どちらが先に読み込まれるかによって実行順が決まります。
この方法は、スクリプト間で依存関係がない場合に適しています。もし依存関係がある場合、順序が保証されないため、asyncを使用することは避けるべきです。
3. defer属性による遅延読み込み
defer属性を使用することで、スクリプトの読み込みと実行を遅延させることができます。deferを指定すると、スクリプトは非同期的に読み込まれ、ページの解析が完了した後に順番通りに実行されます。これにより、ページのレンダリングがスクリプトの実行によってブロックされることなく、ユーザーがコンテンツをすぐに見ることができるようになります。
deferは、複数のスクリプトが依存関係を持っている場合に非常に有用です。なぜなら、deferを使用すると、スクリプトがページの解析（HTMLの読み込みと構築）が完了した後に実行されるため、スクリプトが他のスクリプトに依存していても順序通りに実行されます。例えば、以下のように複数のスクリプトをdeferで指定した場合、script1.jsが先に、script2.jsが後に実行されることが保証されます。
この方法は、ページの読み込みを遅延させることなく、スクリプトが確実に順番通りに実行されるため、依存関係のあるスクリプトを使用する場合に非常に便利です。
4. asyncとdeferの使い分け
asyncとdeferの主な違いは、スクリプトの実行タイミングと順序にあります。それぞれの使用場面を理解することが重要です。
async: スクリプトが独立しており、他のスクリプトやHTMLの読み込みを待たずに非同期で実行したい場合に使用します。スクリプトの実行順序は保証されません。defer: スクリプトの実行順序が重要で、ページの解析が完了した後に順番通りに実行したい場合に使用します。
5. まとめ
JavaScriptの読み込み方法を適切に選択することで、ページのパフォーマンスやユーザー体験を大きく改善できます。asyncとdeferは、ページの読み込み速度を最適化するための強力なツールですが、それぞれの特性を理解し、使用する場面に応じて選択することが重要です。
asyncはスクリプトの読み込みを非同期で行い、順序に依存しない場合に使用します。deferはスクリプトの実行を遅延させ、順番通りに実行することを保証するため、依存関係がある場合に適しています。
適切なスクリプトの読み込み戦略を採用することで、より高速でスムーズなページを作成し、ユーザーの満足度を向上させることができます。
