kanta's spike

scriptタグに設定されているdeferって何だ?

調査結果

HTMLのページ内に<script src="..."></script>のようなscriptタグがあると、スクリプトがダウンロードされ、さらに実行されるまで、ページの解析がブロックされるためページ表示に時間がかかってしまう。

ページの表示時間を改善するためにdeferがある。HTMLのページ内に<script defer src="..."></script>がある場合、ページの解析と並行してスクリプトがダウンロードされる。 そして、ページの解析が完了してDOMContentLoadedイベントを発行する直前にスクリプトを実行する。

ページの解析とスクリプトとダウンロードを並行処理することでHTMLの表示時間を改善している。 ¹

参考

• スクリプト: async, defer
• : スクリプト要素 - HTML: HyperText Markup Language | MDN
• Document: DOMContentLoaded イベント - Web API | MDN