【HTML】JavaScriptのソースを読み込む方法

プログラミングのKnow-howを共有しましょう

【HTML】JavaScriptのソースを読み込む方法

スポンサーリンク

基本中の基本、HTMLでJavaScriptのソースを読み込む方法について書いていきたいと思います。参考になれば幸いです。

JavaScriptのソースを読み込む方法

JavaScriptのソースを読み込む処理は以下の通りです。

上記の3、6行目が読み込みの処理です(どちらか一方でOK)。”JavaScriptのソースパス”の部分を書き換えて使いましょう。

さて、3、6行目と2パターンある理由についてです。
違いは処理を記述している場所で、以下のように分かれています。

  1. <head>タグ内で読み込む
  2. <body>タグ内で読み込む

それぞれJavaScriptのソースを読み込むという結果は変わりませんが
結果に至るまでの過程が少しだけ異なります。
どちらが優れているのでしょうか。

それでは、それぞれのパターンについてもう少しだけ見ていきましょう。

<head>タグ内で読み込む

<head>タグ内の場合、HTMLのコンテンツである<body>タグの内容を読み込む前に
JavaScriptのソースを読み込むことになります。
もしもJavaScriptのソース内容が膨大で読み込むだけで時間がかかってしまう程なら、
ページの読み込み速度に大きな影響を与えてしまうかもしれません。

<body>タグ内で読み込む

<body>タグ内の場合、同タグの全ての要素が読み込まれた後にJavaScriptが読み込まれます。
これによりJavaScriptのソースがいかに大量にあろうと、ページ自体は先に読み込んでくれるわけです。

<head>,<body>タグどちらに記述すべき?

深く調査していないので一概に断定できませんが、最近の傾向は<body>タグの最下層みたいです。
ページ読み込み速度が重視される時代だからですね。
特にこだわりがなければ、<body>タグの最下層で読み込ませるのがいいでしょう。

「HTMLでJavaScriptのソースを読み込む方法」については以上です。
よろしければ他のノウハウも見ていってください。