JavaScriptの読み込みタイミングをdefer, asyncで最適化する


スポンサーリンク

ブラウザはHTMLの上部のコードから順番に解析を行う。 head内にJavaScriptコードが存在する場合、そこにたどり着いた時点でJavaScriptファイルのダウンロードと実行が行われる。 しかし、場合によってはHTMLの解析終了後にJavaScriptを実行したいこともあるだろう。 そのようなときは、defer属性を設定するとよい。 "defer"とは、「延期する」「延ばす」という意味がある。

<head>
  <script src="script.js" defer></script>
  <script src="script2.js" defer></script>
</head>

defer属性が設定された場合、JavaScriptはHTML解析完了後に実行される。

一方で、HTMLファイルの解析を待たず、JavaScriptファイルを非同期で読み込み、即座に実行したい場合はasync属性を設定する。 asyncの場合、実行順は保証されない。