外部ファイルを使うときのscriptタグの位置について(canvas関連)
解決済
回答 3
投稿
- 評価
- クリップ 0
- VIEW 4,125
先日、canvasを勉強していると外部ファイルのscriptタグがbodyの最後に書かれていました。今までずっとヘッダーの中に書いていた自分としてはすごく気持ち悪い感じがしてwindow.onloadを使ってごまかしたのですが、そもそも外部ファイルを呼ぶときのscriptタグをヘッダーの中に書くメリットはどれくらいあるのでしょうか。今回の話でいうならば、何も気にせずbodyに書いてしまうのかヘッダーの中に書き続けるべきなのか、どちらがいいのでしょうか。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+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 さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.13%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる