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

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

行動規範の内容に同意します

回答3件

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

ご参考になれば。

投稿2016/04/20 06:15

tkanda

総合スコア2425

</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 用にコードを書くと次のようになります。

async attribute for external scripts - Can I use

HTML
1<script src="test.js" async></script>

JavaScript
1'use strict';
2(function () {
3  function handleDOMContentLoaded (event) {
4    console.log(event.type);
5    console.log(event.target.readyState); // "interactive"
6  }
7
8  function main () {
9    var doc = this.document,
10        readyState = doc.readyState;
11
12    if (readyState === 'interactive' || readyState === 'complete') {
13      handleDOMContentLoaded.call(doc, {target: doc});
14    } else {
15      doc.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
16    }
17  }
18
19  main.call(this);
20}.call(this));

Re: SatoshiAizawa さん

投稿2016/04/20 08:02

think49

総合スコア18162

ベストアンサー

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

【[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

投稿2016/04/20 06:22