JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

スクリプトはHTMLのheadタグとbodyタグのどちらに書くべき？パフォーマンスを意識した正しい配置方法

JavaScriptの<script>タグは、HTML文書内の<head>タグまたは<body>タグのどちらにも記述できます。一般的にはどちらの位置でも動作しますが、ページの表示速度（パフォーマンス）を考慮するのであれば、<body>要素内にスクリプトを配置するのがおすすめです。

なぜbody要素内に置くとパフォーマンスが向上するのか？

ブラウザはHTMLソースコードを上から順番に読み込みながらページを構築していきます。<head>内に重いスクリプトを記述すると、そのスクリプトの読み込みと実行が完了するまでページの描画がブロックされてしまい、画面表示が遅くなる原因になります。

一方、<body>要素の末尾（</body>タグの直前）にスクリプトを配置すれば、テキストや画像などの主要コンテンツが先に表示されるため、ユーザーはストレスなくページを閲覧できます。これはWebサイトの高速化における基本的なベストプラクティスの一つです。

サンプルコード

<body>〜</body>の中に<script>タグを追加した具体例は以下の通りです。

<html>
   <body>
      <script>
         <!--
            document.write("Hello World!")
         //-->
      </script>
   </body>
</html>

この例では、document.write()を使って「Hello World!」という文字列をページに出力しています。スクリプトが<body>内にあるため、HTMLの解析後に実行されます。

補足：モダンな代替手段

近年では、スクリプトを<head>内に置く場合でも、defer属性やasync属性を付与することで描画のブロックを回避できます。特にdefer属性は、HTMLの解析完了後にスクリプトを実行してくれるため、<body>末尾に置くのとほぼ同等の効果が得られます。状況に応じて使い分けると良いでしょう。

  1. 【初心者向け】<script>タグでクライアント側のJavaScriptを定義する方法

    HTMLの<script>タグは、HTMLドキュメント内にスクリプトを宣言するために使用されます。このタグを使うことで、クライアント側（ブラウザ側）で動作するJavaScriptを定義できます。 <script>タグと</script>タグの間に記述したコードは、ブラウザによって解釈・実行されます。また、src属性を使えば、外部のJavaScriptファイルを読み込むことも可能です。 <script>タグの主な属性 属性値説明 asyncasyncスクリプトが非同期で実行されることを指定します。ページの読み込みをブロックせずにスクリプトを

  2. HTMLのheadタグとは？主な要素と使い方をわかりやすく解説

    HTMLの<head>タグとはHTMLの<head>タグは、<title>、<style>、<base>、<link>、<meta>、<script>、<noscript>といった要素を格納するためのコンテナとして機能します。<head>内の内容はブラウザ上に直接表示されませんが、文書のタイトルやメタ情報、スタイル、スクリプトの読み込みなど、ページ全体の動作を制御する重要な役割を担っています。なお、HTML5では<head>要素を省略してHTML文書を記述すること