HTML <script> async 属性

HTML <script> タグ

定義と使用方法

async 属性はボルン属性です。

設定されている場合： async 属性は、ページを解析する間に並行してダウンロードされ、利用可能になったときにすぐに実行されます。一旦スクリプトが完全にダウンロードされると、ページの解析は中断され、スクリプトが実行され、その後ページの残りの部分が解析されます。

注意：async 属性は外部スクリプト専用（src属性がある場合にのみ使用されるべきです）。

注意：外部スクリプトを実行するには、さまざまな方法があります：

  • async が設定されている場合：スクリプトはページを解析する間に並行してダウンロードされ、利用可能になったときにすぐに実行されます（解析が完了する前に）。
  • defer が設定されているが async が設定されていない場合：スクリプトはページを解析する間に並行してダウンロードされ、ページの解析が完了した後に実行されます。
  • async または defer が設定されていない場合：スクリプトはすぐにダウンロードされ実行され、ページの解析をブロックし、スクリプトの実行完了まで処理されません。

例

参照されているスクリプトは、ページを解析する間に並行してダウンロードされ、利用可能になったときにすぐに実行されます：

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

自分で試してみてください

文法

<script async>

アシンクリナススクリプトの実行

ブラウザが script 要素に直面したときのデフォルトの動作は、スクリプトの読み込みと実行中にページの処理を一時停止することです。各 script 要素は（定義された順序に従って）シンクロナス（スクリプトの読み込みと実行中に他のことには手を出さない）に実行されます。

スクリプトのデフォルトの処理方法として、シンクロナスな順序で実行されることは意義があります。しかし、そのような処理が必要でないスクリプトもあります。そのようなスクリプトには、 async 属性を用いてパフォーマンスを向上させます。この分野の典型的な例はトラッキングスクリプトです。このスクリプトは、広告会社がユーザーのウェブサイト訪問記録を報告し、ユーザーの習慣に基づいて広告をカスタマイズおよび配信するために使用されることがあります。また、ウェブサイト訪問者の統計データを収集し、分析に供することもあります。これらのスクリプトは独立しており、HTML ドキュメントの要素と相互作用する必要はありません。これらのスクリプトのロードを待ってからページの表示を遅らせることは、何の意味もありません。

使用 async 属性を使用すると、ブラウザは HTML の他の要素（他の script 要素を含む）を解析しながら、スクリプトを非同期にロードおよび実行します。適切に使用される場合、これは全体のロードパフォーマンスを大幅に向上させることができます。

注意：使用 async 属性の重要な結果として、ページ内のスクリプトが定義された順序で実行されなくなることがあります。したがって、他のスクリプトで定義された関数や値を使用する場合は、使用を避けるべきです。 async 属性。

ブラウザのサポート

表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

HTML <script> タグ