Scriptタグのリソース読み込み順序についてのメモ

ちょっとトラブってしまったので、反省しつつ整理。

リンク先の画像がすごいわかりやすいので、これ見たら解決するけど。

HTML Standard

パターン

<script>
<script defer>
<script async>
<script type="module">
<script type="module" async>

この5個がある。2018/01/29時点では module のサポート状況微妙だけど。

Can I use... Support tables for HTML5, CSS3, etc

Classic Scripts

module scriptsではない方を参照先ではこう読んでいたので倣っておく。

	fetch	evaluate
[default]	HTMLのパースをブロックしてFetchする	Fetch直後にJSの評価を開始する
async	HTMLのパースをブロックせずにパラレルでFetchする	Fetch完了直後にHTMLのパースをブロックしてJSの評価を開始する
defer	HTMLのパースをブロックせずにパラレルでFetchする	HTMLのパースが完了したらJSの評価を開始する

Module Scripts

	fetch	evaluate
[default]	HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする	HTMLのパースが完了したらJSの評価を開始する
async	HTMLのパースをブロックせずにパラレルでFetch、依存先もFetchする	依存先も含めたFetch完了直後に、HTMLのパースをブロックしてJSの評価を開始する

module scriptsにはdeferつけてもデフォルトのまま。と説明あるけど、要はClassic Scriptsでのdefer属性付きと似たような動作がデフォルトということのよう。

昔読んだWebの基礎についての本にも載ってたのかもしれないけど、当時はそれを理解できるベースがなかったんだろうなと思うと感慨深い。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか