外部javascriptファイルを読み込む際の同期、非道についての質問。

Question

こんばんは。外部のJSファイルを読み込む際の同期的、非同期的に関して質問があります。

以下の様にスクリプトタグを直接記述し、外部のjsファイルを読み込むと、同期的に行う為、DOMのレンダリングがブロックされてしまうという事実を本日知りました。

<script src="xxx.js"></script>

この解決策としてスクリプトタグを以下のように生成すると非同期で読み込みが可能になるとある記事で読みました。

<script>
  var s = document.createElement("script");
  s.src = "xxx.js";
  任意の場所にinsert;
</script>

ここで質問なのですが、何故このような挙動になるのでしょうか？スクリプトタグをdocument.createElementで生成して、そのsrcに外部JSファイルを付与してあげて、任意の場所にinsertするという処理は何故レンダリンをストップさせないのでしょうか？JSの中で行われている処理は全て非同期的に行われる感じでしょか？

色々調べてみたのですが、なかなか答えが見つからず、質問させていただきました。分かる方いらっしゃいましたらご回答の方お願い致します。

Answer 1

<script>の実行タイミングについての細かな動作は仕様に規定されています。 [https://html.spec.whatwg.org/multipage/scripting.html#prepare-a-script](https://html.spec.whatwg.org/multipage/scripting.html#prepare-a-script) 以下、内容を大まかに説明したいと思います。 （teratailでの回答は初めてで、文字装飾に慣れてなく文章が読みづらいかもしれませんが、ご容赦ください） --- script要素には、以下のような方法で2つに分類することができます。 **［1］ HTMLを解析する際に生じるscript要素** 例：HTMLに <script>alert();</script> などと書いてあるもの

［2］ 動的に生成して生じるscript要素
例：document.createElement("script") してDOMに挿入したもの
（内部的には、［1］のみに"parser-inserted"というフラグを付けることで区別されています）

また、以下のような分類も可能です。
［A］ src属性を持つもの
例：<script src="hoge.js"></script>
［B］ src属性を持たずに要素内にテキストを持つもの
例：<script>alert("!");</script>

これらの分類は互いに独立しています。つまり、あるscript要素は、［1］かつ［A］であったり、［2］かつ［B］であったります。
（今回の質問の場合であれば［2］かつ［A］ですね。）

---

そして、上の2種類の分類によって、script要素のコードが実行されるタイミングが変化するのです。

［1］かつ［A］：https://html.spec.whatwg.org/multipage/scripting.html#script-processing-parser-inserted
つまり、HTMLに<script src="hoge.js"></script>と直書きされているもの。
この場合、DOMのレンダリングが一旦中断され、外部スクリプトが読み込まれて実行された後に、DOMレンダリングが再開されます。
こういうscript要素を pending parsing-blocking script ともいいます。

［1］かつ［B］：https://html.spec.whatwg.org/multipage/scripting.html#script-processing-inline
つまり、HTMLに<script>alert("!");</script>と直書きされているもの。
この場合、DOMのレンダリングが一旦中断され、スクリプトが実行された後に、DOMレンダリングが再開されます。

［2］かつ［A］：https://html.spec.whatwg.org/multipage/scripting.html#script-processing-src
今回のご質問のパターンです。
つまり、動的に以下のようにscript要素を生成した場合です。
var s = document.createElement("script");
s.src = "xxx.js";
document.body.appendChild(s);
この場合、スクリプトの読み込みが完了し次第、実行されます。
DOMレンダリングは即座には中断されませんが、レンダリング途中であっても読み込みが完了すればその時点で実行されます。
こういうscript要素は set of scripts that will execute as soon as possible というリストに追加され、読み込みが完了次第実行されるという仕組みになっています。

［2］かつ［B］：https://html.spec.whatwg.org/multipage/scripting.html#script-processing-inline
つまり、動的に以下のようにscript要素を生成した場合です。
var s = document.createElement("script");
s.text = "alert(123)";
document.body.appendChild(s);
この場合、実行DOMのレンダリングはもちろんscript要素を追加したスクリプトも一旦中断され、スクリプトが実行された後に、DOMレンダリングが再開されます。
Document内のどこでもいいので、要素を追加した時点で即座に実行されます。

---

asyncやdefer属性なども考えるとさらに複雑になりますが、今回の質問の範囲であればこのあたりの説明で十分かと思います。
かなりややこしいですが、ご参考になれば幸いです。

ちなみに、非同期で読み込みたいのであればasync属性を追加してやるだけで十分です。（IE9以下非対応ですが）
おおよそ［2］かつ［A］と同じようになります。

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

Comments

[tk_matsumoto]

回答ありがとうございます！
詳しく説明して頂き本当に感謝です。

> DOMレンダリングは即座には中断されませんが、レンダリング途中であっても読み込みが完了すればその時点で実行されます。

という事は、外部JSファイルが読み込まれている際のレンダリングは動的にスクリプトを生成しようと関係なくブロックされるという認識で間違いないでしょうか？もし、そうだとした場合、動的に生成されたスクリプトはどの部分が非同期になる感じでしょうか？

Javascriptをあまり書いた事がなく、根本的に理解が間違っているかもしれません。

[kura]

> 外部JSファイルが読み込まれている際のレンダリングは動的にスクリプトを生成しようと関係なくブロックされるという認識で間違いないでしょうか
いいえ。
動的にスクリプトを生成した場合のみ、外部JSファイルの読み込みが非同期になります。
その場合、外部JSファイルが読み込まれている際のレンダリングはブロックされません。

具体例で示しますね。

例その１
　<p>1段落目</p>
　<script src="xxx.js"></script>
　<p>2段落目</p>
　<p>3段落目</p>
このHTMLは、以下の順でレンダリングされます。
　1.「1段落目」を表示する。
　2. xxx.js をサーバーから取得してくる。取得が終わるまで待機する。
　3. 取得が終わったら、xxx.js を実行する。
　4.「2段落目」を表示する。
　5.「3段落目」を表示する。

例その２
　<p>1段落目</p>
　<script>
　 var s = document.createElement("script");
　 s.src = "xxx.js";
　 document.body.appendChild(s);
　</script>
　<p>2段落目</p>
　<p>3段落目</p>
このHTMLは、以下の順でレンダリングされます。
　1.「1段落目」を表示する。
　2. スクリプトに従って <script src="xxx.js"></script> を挿入する。
　3. 挿入すると同時に xxx.js のサーバーからの取得を開始する。
　　 xxx.js は、取得が完了し次第実行する。（この部分が非同期的と言えるでしょう）
　4.「2段落目」を表示する。
　5.「3段落目」を表示する。
この場合、「2段落目」が表示される前（3.～4.の間）、「3段落目」が表示される前（4.～5.の間）、「3段落目」が表示された後（5.の後）の、どのタイミングでも xxx.js が実行される可能性があります。
なぜなら、xxx.js は、取得が完了し次第実行することになっているからです。

[tk_matsumoto]

再度回答して頂きありがとうございます！
具体例を示して頂く事で理解する事が出来ました。