HTMLでscriptタグはなぜbodyタグの最後に配置するのか？その理由を説明

はじめに

この記事ではHTMLに記述するscriptタグが、なんでbodyタグの最後に書かれているのか、その理由を説明します。

scriptタグがbodyタグの最後に書かれている理由は、ページの表示速度を速くするためです。

ブラウザでは、ページを表示する前にHTMLを解析してDOMツリーを構築します。
解析処理の途中でスクリプトが出てくるたびに、HTMLの解析を途中で停止して、スクリプトを実行します。

もし外部のスクリプトを利用していて、そのスクリプトの読み込みに時間が掛かると、ページが表示されるまでの時間が長くなってしまいます。

HTMLの解析を先に終わらせてページを表示してから、JavaScriptを読み込ませた方が、ページの表示までの時間が短くなるため、bodyタグの最後にscriptタグが書かれているのです。

次のGoogleのドキュメントにもあるように、JavaScriptをインライン化したり、asyncを使って非同期にして、ページのレンダリングがブロックされないようにする方法もあります。