【JavaScript】async 属性を付与して読み込み順番を変える

async属性を使用してスクリプトの読み込み順序を変更する例を示します。以下は、3つのスクリプトがあり、それぞれが異なる順序で非同期に読み込まれる例です。

目次

1. async属性とは？

2. 3つのスクリプトがすべてasync属性を持っている例

3. 非同期スクリプトと同期スクリプトの読み込み順番による実行時間の違い

4. まとめ

async属性とは？

async 属性は、HTMLの<script>タグに使用される属性であり、スクリプトの非同期読み込みを指定するためのものです。この属性を使用すると、スクリプトのダウンロードと実行が非同期に行われ、他の要素の読み込みをブロックせずにページの読み込みを進めることができます。

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

async 属性を使用すると、スクリプトが非同期的に読み込まれ、読み込みが完了したら即座に実行されます。一方で、通常の（async属性のない）スクリプトは同期的に読み込まれ、前のスクリプトの実行が完了するまで次のスクリプトの読み込みと実行をブロックします。

async 属性は、特に外部スクリプトの読み込みが他のページの要素に影響を与えないようにするために使用されます。ただし、スクリプトの実行順序が重要な場合は注意が必要です。

3つのスクリプトがすべてasync属性を持っている例

    <!-- Script 1: このスクリプトは最初に読み込まれます -->
    <script async src="script1.js"></script>

    <!-- Script 2: このスクリプトはScript 1の後に読み込まれます -->
    <script async src="script2.js"></script>

    <!-- Script 3: このスクリプトはScript 1およびScript 2の後に読み込まれます -->
    <script async src="script3.js"></script>

上記の例では、3つのスクリプトがすべてasync属性を持っています。これにより、スクリプトは非同期にダウンロードおよび実行され、読み込み順序はスクリプトが利用可能になるまでのダウンロード順序に依存します。したがって、Script 1が最初に読み込まれ、その後にScript 2、最後にScript 3が読み込まれます。

ただし、注意が必要です。async属性を使用すると、スクリプトの実行順序は保証されません。つまり、スクリプトがダウンロードされ次第、すぐに実行されます。したがって、スクリプト間の依存関係がある場合は、asyncを使用することで読み込み順序が変わる可能性があるため、注意が必要です。

非同期スクリプトと同期スクリプトの読み込み順番による実行時間の違い

非同期スクリプトと同期スクリプトの読み込み順番による実行時間の違いを示すためにスクリプトを作成しています。

続きはこちら
https://eguweb.jp/javascript/70410/