async/defer 属性と DOM 構築

TOP

このページについて

スクリプトの asyncdefer 属性の有無と DOM 構築の挙動を、視覚的に確認するページです。

メニューにある各ページでは、A.jsB.jsC.jsappendChild() メソッドを用いて、親である <p> 要素にテキストノードを追加します。その際、各スクリプトの読み込みにはそれぞれ3秒、2秒、1秒かかるよう、サーバー側でブロックしています。

これら挙動の理解を助けるため、WHATWG のドキュメントから主要な関連部分を抜粋・翻訳しました。参考にして下さい。

ドキュメントタイプと async/defer の書式

タイプ 書式 DTD 仕様
HTML 4.01 <script defer …>
HTML 1.0
HTML 1.1
<script defer="defer" …>
HTML 5 <script defer …>
<script async …>

async/defer に関する WHATWG 勧告

HTML5 における asyncdefer 属性の概要

asyncdefer 属性は論理型の属性(あれば true、なければ false)で、スクリプトがどのように実行されるべきかを表します。また src 属性がない場合は指定することができません。

これら属性の使い方には3つの選択肢があります。async 属性がある場合は、スクリプトが得られれば直ちに非同期に実行されます。async 属性がなく defer 属性だけの場合は、ページの解析が終了した時点で実行されます。どちらの属性もない場合、ユーザーエージェントがページの解析を進める前にスクリプトをフェッチし、直ちに実行されます。

これらの属性に関する正確な処理方法の詳細は、多くは歴史的な理由により、数ある HTML の観点からも、あまり明白ではありません。それゆえ実装要件は、仕様の至る所に散在せざるを得ません。(本章の)以下のアルゴリズムは、この処理のコア部分について説明しますが、これらのアルゴリズムのリファレンス先は、HTML や 外部コンテンツXML における スクリプト開始終了 タグの解析ルール、document.write() メソッドのルール、スクリプティング の扱い方など、多岐に渡ります。

defer 属性だけをサポートし async 属性をサポートしないレガシーな Web ブラウザのために、デフォルトの挙動である同期的なブロッキングの代わりに defer の挙動をさせるため、async 属性と共に defer 属性を指定することができます。

スクリプトの読み込みに関するパフォーマンス上の考慮点

要素が src 属性を持つ場合(中略…)、パフォーマンス上の理由から、要素が文書に挿入されることを見越し、ユーザーエージェントは src 属性のセット後、直ちにスクリプトのフェッチを開始することができます。

defer 属性と実行順序に関する仕様

要素が src 属性と defer 属性を持ち、parser-inserted フラグが付けられ、かつ async 属性を持たなければ、その要素を生成した Document の解析が終了した時点で実行されるスクリプトのリスト の最後に加えられます(訳注:仕様上は、このリストによりスクリプトの実行順が保存されることになります)。

async 属性と実行順序に関する仕様

要素が src 属性を持つ場合、スクリプトが属する Document の(スクリプトの実行準備アルゴリズム が開始された時に)可能な限り早期に実行されるスクリプトの集合 に加えられます(訳注:この集合はスクリプトの実行順を保存しません)。

サポートするブラウザ