「scriptタグの属性（なし、defer、async）」と「headタグ内とbodyの最後あたり」によって JavaScriptファイルを読み込みがどう違ってくるのかを表にしました。
| headタグ内 | bodyの最後あたり | Reder blocking | JSコード実行タイミング | |
|---|---|---|---|---|
| なし | Initial priority: High Priority: High | Initial priority: Medium Priority: Medium | ブロックする | readyState=interactiveの前 |
| defer | Initial priority: Low Priority: Low | Initial priority: Low Priority: Low | ブロックしない | readyState=interactiveの後でDOMContentLoadedの前 |
| async | Initial priority: Low Priority: Low | Initial priority: Low Priority: Low | ブロックする | DOMContentLoadedの後でloadの前 |
※ Initial priority と Priority は、Chrome DevTools の Performanceパネルに表示される値です。
※ Render blocking や JSコードの実行タイミングも、Chrome DevTools の Performanceパネルに表示される情報です。
関連
