回答編集履歴
1
リンクに誤記があったため修正
answer
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
つまり、HTMLに<script>alert("!");</script>と直書きされているもの。
|
|
35
35
|
この場合、DOMのレンダリングが一旦中断され、スクリプトが実行された後に、DOMレンダリングが再開されます。
|
|
36
36
|
|
|
37
|
-
**［2］かつ［A］**：[https://html.spec.whatwg.org/multipage/scripting.html#script-processing-src
|
|
37
|
+
**［2］かつ［A］**：[https://html.spec.whatwg.org/multipage/scripting.html#script-processing-src](https://html.spec.whatwg.org/multipage/scripting.html#script-processing-src)
|
|
38
38
|
今回のご質問のパターンです。
|
|
39
39
|
つまり、動的に以下のようにscript要素を生成した場合です。
|
|
40
40
|
var s = document.createElement("script");
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
document.body.appendChild(s);
|
|
43
43
|
この場合、スクリプトの読み込みが完了し次第、実行されます。
|
|
44
44
|
DOMレンダリングは即座には中断されませんが、レンダリング途中であっても読み込みが完了すればその時点で実行されます。
|
|
45
|
-
こういうscript要素は
|
|
45
|
+
こういうscript要素は __set of scripts that will execute as soon as possible__ というリストに追加され、読み込みが完了次第実行されるという仕組みになっています。
|
|
46
46
|
|
|
47
47
|
**［2］かつ［B］**：[https://html.spec.whatwg.org/multipage/scripting.html#script-processing-inline](https://html.spec.whatwg.org/multipage/scripting.html#script-processing-inline)
|
|
48
48
|
つまり、動的に以下のようにscript要素を生成した場合です。
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
かなりややこしいですが、ご参考になれば幸いです。
|
|
58
58
|
|
|
59
59
|
ちなみに、非同期で読み込みたいのであればasync属性を追加してやるだけで十分です。（IE9以下非対応ですが）
|
|
60
|
-
おおよそ［2］かつ［A］と同じようになります。
|
|
60
|
+
おおよそ［2］かつ［A］と同じようになります。
|
|
61
61
|
```lang-＜ここに言語を入力＞
|
|
62
62
|
<script src="xxx.js" async></script>
|
|
63
63
|
```
|