JavaScript <script>タグ：なぜ</body>タグの後に配置してはいけないのか？

2024-06-14

<script> タグの適切な配置：徹底解説

本記事では、なぜ </body> タグの後に <script> タグを配置することが問題なのか、そして適切な配置方法について詳しく解説します。

なぜ </body> タグ後に配置すると問題なのか？

以下の2つの理由から、</body> タグ後に <script> タグを配置することは問題となります。

パフォーマンスへの影響

ブラウザは、HTMLドキュメントを上から順に読み込み、解析していきます。<script> タグに遭遇すると、その場でスクリプトを実行し、完了してからページの描画を続けます。

つまり、</body> タグ後に <script> タグを配置すると、ブラウザはまずページ全体の描画処理を完了してからスクリプトを実行することになります。

ページ全体の描画処理が完了してからスクリプトを実行するということは、ユーザーがページコンテンツを見られるまでの時間が遅くなる可能性があるということです。特に、 <script> タグが重い処理を実行する場合、この影響は顕著になります。

互換性の問題

古いブラウザの中には、</body> タグ後に配置された <script> タグを正しく認識しない場合があります。

その結果、意図したとおりにスクリプトが実行されない可能性があります。

<script> タグの適切な配置方法

<script> タグは、以下の2つの場所に配置することができます。

<head> タグ内

<head> タグ内に <script> タグを配置すると、ページ全体の描画処理前にスクリプトが実行されます。

これは、ページの初期化処理や、ユーザーとのインタラクションに関係するスクリプトを実行する場合に適しています。

<head>
  <script>
    // ページ全体の初期化処理
  </script>
</head>

<body> タグ内

これは、ページコンテンツに動的な要素を追加したり、分析ツールなどの外部スクリプトを読み込んだりするする場合に適しています。

<body>
  <script>
    // ページコンテンツに動的な要素を追加するスクリプト
  </script>

  <script src="https://example.com/analytics.js"></script>
</body>

その他の配置方法

上記以外にも、以下のような方法で <script> タグを配置することができます。

非同期読み込み: async 属性を使用すると、ブラウザは他のリソースの読み込みを待たずにスクリプトの読み込みを開始します。
遅延読み込み: defer 属性を使用すると、ブラウザはHTMLドキュメントの解析が完了してからスクリプトの読み込みを開始します。

これらの属性を使用することで、パフォーマンスと互換性のバランスを調整することができます。

まとめ

<script> タグを適切に配置することは、Webサイトのパフォーマンスと互換性を確保するために重要です。

一般的には、<head> タグ内に初期化処理系のスクリプトを、<body> タグ内にコンテンツに動的な要素を追加するスクリプトを配置するのがおすすめです。

上記に加え、async や defer などの属性を活用することで、さらにパフォーマンスを向上させることができます。

例1：<head> タグ内に初期化処理系のスクリプトを配置

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
  <script>
    // ページ全体の初期化処理
    function initialize() {
      // ...
    }

    window.addEventListener('DOMContentLoaded', initialize);
  </script>
</head>
<body>
  </body>
</html>

例2：<body> タグ内にコンテンツに動的な要素を追加するスクリプトを配置

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <script>
    // ページコンテンツに動的な要素を追加するスクリプト
    function addDynamicElement() {
      const element = document.createElement('div');
      element.textContent = '動的に追加された要素';
      document.body.appendChild(element);
    }

    addDynamicElement();
  </script>
</body>
</html>

例3：非同期読み込みと遅延読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <script async src="https://example.com/external-script.js"></script>

  <script defer src="https://example.com/analytics.js"></script>
</body>
</html>

この例では、https://example.com/external-script.js は非同期に読み込まれ、https://example.com/analytics.js はHTMLドキュメントの解析が完了してから読み込まれます。

上記はあくまでも一例であり、具体的な配置方法は状況に応じて調整する必要があります。

その他の <script> タグの読み込み方法

ES modulesは、JavaScriptのモジュールシステムであり、以下の利点があります。

コードの分割と再利用が可能
依存関係の管理が容易
コードの更新が容易

ES modulesを使用するには、 <script type="module"> タグを使用する必要があります。

<script type="module">
  import { addDynamicElement } from './module.js';

  addDynamicElement();
</script>

HTTP/2の preload 属性と fetch APIを組み合わせることで、 <script> タグよりも柔軟かつ効率的なスクリプトの読み込みが可能になります。

<link rel="preload" as="script" href="https://example.com/external-script.js">

fetch('https://example.com/external-script.js')
  .then(response => response.text())
  .then(script => {
    const element = document.createElement('script');
    element.textContent = script;
    document.body.appendChild(element);
  });

WebAssemblyは、パフォーマンスとポータビリティに優れたバイナリ形式のモジュールです。

C++ や Rust などの言語で記述されたコードを WebAssembly にコンパイルし、JavaScript から呼び出すことができます。

WebAssemblyを使用するには、専用のローダーとランタイムが必要となります。

<script src="https://example.com/wasm-loader.js"></script>
<script>
  const wasm = await WebAssembly.instantiateStreaming(fetch('https://example.com/module.wasm'));
  const add = wasm.instance.exports.add;
  console.log(add(1, 2)); // 3を出力
</script>