JavaScriptの記述場所まとめ

HTMLのどこでJavaScriptを記述するか、選択肢が多すぎて迷ったので、まとめてみた。

head tag

defer/asyncなし

• HTMLのレンダリング前に同期的にロード・実行
• HTMLのレンダリング前に実行する必要があり、他のJavaScriptと依存関係がある場合のみ使う
• HTMLのレンダリング・他のコンテンツのロードが遅れるのでできるだけ少なくするべし

deferあり

• HTMLのレンダリングと並行して非同期でロード
• HTMLのレンダリング後に同期的に実行
• HTMLのレンダリング後に実行する必要があり、他のJavaScriptと依存関係がない場合
  • 本来はJavaScriptの実行順序は保証されるという仕様だが、保証されないブラウザも存在するらしいので、他のJavaScriptと依存関係がある場合は使えない

asyncあり

• HTMLのレンダリングと並行して非同期でロード
• HTMLのレンダリングと並行して非同期で、ロード完了次第実行
• HTMLのレンダリング状況に依らず実行可能で、他のJavaScriptと依存関係がない場合
  • 例えばdocument.write()などを使っている時は使えない
  • また、HTML5の仕様なので、古いブラウザでは使えない

body tagの最後

• HTMLのレンダリング後に同期的にロード・実行
• HTMLのレンダリング後に実行する必要があり、他のJavaScriptとも依存関係がある場合
• 一番わかりやすく一般的。迷ったりよくわからなかったらこれ。

elementの中

• 非推奨

まとめ

if (HTMLレンダリング前に実行が必要？)
  →head tag without defer or async
else if (HTMLレンダリング後に実行が必要？)
  if (他のJavaScriptとの依存関係はある？)
     →body tagの最後
  else
     →head tag with defer
else
  if (他のJavaScriptとの依存関係はある？)
     →body tagの最後
  else
     if (HTML5非対応ブラウザもターゲット？)
         →head tag with async
     else
         →head tag with defer and async

参考

scriptのdefer/asyncを理解し、ページの高速化方法を探る
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
jQueryをページの最後にロードのススメ
scriptタグの位置でもやもや
JavaScriptの記述場所
JavaScirptの記入場所