質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17082questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4195questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    268questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

外部ファイルを使うときのscriptタグの位置について(canvas関連)

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,156

SatoshiAizawa

score 38

先日、canvasを勉強していると外部ファイルのscriptタグがbodyの最後に書かれていました。今までずっとヘッダーの中に書いていた自分としてはすごく気持ち悪い感じがしてwindow.onloadを使ってごまかしたのですが、そもそも外部ファイルを呼ぶときのscriptタグをヘッダーの中に書くメリットはどれくらいあるのでしょうか。今回の話でいうならば、何も気にせずbodyに書いてしまうのかヘッダーの中に書き続けるべきなのか、どちらがいいのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

<script> タグをどこに書くのが正しいか、の答えは「どこに書いても正しい」です。
ただし、外部ファイルを読み込む場合、注意すべき点はあります。

<script>タグは他の<div>や<img>や等と同様に、HTMLファイルの上から下へ向かって、記述された通りの順番で評価されます。例えば次のような記述がある場合・・・

<p>hello</p>
<script src="myscript.js"></script>
<p>world</p>

mysrcipt.js が読み込まれ、スクリプトファイルの内容をファイルの先頭から最後まで、すべての実行(評価)が完了するまで "world" は画面に表示されません。
このため、ページ読み込み時のレスポンスを重視する場合、<script> タグを <body> の末尾に書くことがあります。(これにより、ページの要素がすべて画面に表示されるまで、外部スクリプトの読み込みを行わないように制御できるため)

ご参考になれば。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

どこでもよいと思います。
ただ、読み込みに時間のかかるスクリプト(外部リソースなど)がある場合に、描画を止めてしまう可能性があるため、最後に書くことが増えたようです。

【[JS] JavaScriptの読み込み位置をページ最後にしたほうがよい理由 | memocarilog】
http://memocarilog.info/jquery/5842

【2/2 外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About】
http://allabout.co.jp/gm/gc/380498/2/

【第4回 JavaScript読み込み位置による起動時間パフォーマンス差を計測する:HTML5とPhoneGapで作る,iPhone/Androidアプリ開発TIPS|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/serial/01/phonegap_tips/0004

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

 </body> 直前に script 要素を置く理由

既に指摘されているように </body> 直前に script 要素を置くのがHTMLパーサの動作をブロックさせない為です。
外部ファイルのリソース読み込みが完了するまでHTMLパーサは構文解析を停止する為、後に構文解析するものがない </body> 直前に置く事でパーサを効率よく動かす事ができます。
<head> 内に置いても非同期読み込みする機能に <script async> があります。

 <head> 内に script 要素をおくべき理由

多くの場合、body 要素内の要素ノードに参照する為に DOMContentLoaded を利用しようとしますが、逆に言えば body 要素外の DOM を参照する場合はこの限りではありません。

  • document.onclick な処理をする
  • document.styleSheets を操作する

 async 属性

<script async> は次の特徴があります。

  • 外部リソースの読み込みを非同期にする
  • <script async> が複数存在した場合、定義順に実行される事は保証されない

この機能のおかげで <head> 内に外部スクリプトを置いてもHTMLパーサの構文解析をブロックしないように出来ます。
ただし、複数のリソースを読み込んだ場合に呼び出し順が保証されないので対策が必要になります。

  • 順序保証がなくても良いコードを組む
  • 外部スクリプトを一つのファイルに連結する
  • 外部スクリプトファイルを非同期に読み込み⇒定義順に実行するJavaScriptコードを書く

 async 属性に未対応な IE9 を考慮する

async 属性に対応しない IE9 用にコードを書くと次のようになります。

<script src="test.js" async></script>
'use strict';
(function () {
  function handleDOMContentLoaded (event) {
    console.log(event.type);
    console.log(event.target.readyState); // "interactive"
  }

  function main () {
    var doc = this.document,
        readyState = doc.readyState;

    if (readyState === 'interactive' || readyState === 'complete') {
      handleDOMContentLoaded.call(doc, {target: doc});
    } else {
      doc.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
    }
  }

  main.call(this);
}.call(this));

Re: SatoshiAizawa さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17082questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    4195questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • canvas

    268questions

    HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。