jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか？

JSファイルはBodyタグの最後に読み込んだ方が何かとメリットがあるというのはよく聞きますが、
bodyタグ最後とheadタグのどっちでjQueryCDN読み込んでいるのか調べると普通にheadタグ内で読み込んでるサイトの方が多いように感じます。

そこで質問なのですが、逆にBodyタグ最後でJSファイルを読み込むことによるデメリットってあるんでしょうか？

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

回答3件

HTML
1  <script src="hoge.js"></script>
2</head>
3<body>
4  <p>It is a test.</p>
5</body>
6</html>

上記 HTML では hoge.js が読み込み終わって hoge.js 内のスクリプトコードが実行されるまで </head> 以降のHTML(It is a test)のレンダリングが停止します。

HTML
1</head>
2<body>
3  <p>It is a test.</p>
4  <script src="hoge.js"></script>
5</body>
6</html>

上記 HTML ではbody要素内の HTML(It is a test.) のレンダリングが終わってから hoge.js の読み込みを始める為、レンダリングの停止が発生しません。

</body> 直前に <script> を置くのはscript読み込み中のレンダリング停止をなくすのが目的であり、メリットです。
逆にレンダリング前にJavaScriptを実行させたければ <head> に置きますが、そうでなければ、</body> 直前に <script> を置くのがレンダリングの高速化に繋がるのでお勧めです。
副次的効果ですが、</body> 直前に置けば DOMContentLoaded を待つコードを省略出来ます。

投稿2015/08/17 05:21

think49

総合スコア18164

ベストアンサー

think49様が書かれている通り、bodyの閉じタグ直前にscriptタグを書いたほうが良いと言われていた理由はHTMLやCSSの読み込み・レンダリングをブロックしないという所です。

だだ、HTML5でサポートされたasync属性をつければHTMLやCSSのレンダリングをブロックせずにjavascriptを読み込むこともできますので、heahタグ内に書いても問題無くなってきています。
ex

html
1<head>
2  <script src="/maim.js" async></script>
3</head>

ただ、このasync属性は注意が必要で複数スクリプトがあった場合読み込まれる順番が担保されません。
具体的に言えば、jQueryと自分で作ったjQuery使用したjavascriptmain.jsを別ファイルで読み込ませる場合などは先にjQueryが読み込まれる担保ができませんので、予期しないエラーを発生させる可能性ができてしまいます。

html
1<head>
2  <script src="/jQuery" async></script> <!-- jQuery が先に読み込まれるとは限らない！ -->
3  <script src="/maim.js" async></script>
4</head>

このような使い方であれば、asyncを使わずに、bodyの閉じタグ前に書いてあげる方が読み込み順も担保できるので確実です

html
1  <script src="/jQuery"></script> <!-- jQuery が先に読み込まれる -->
2  <script src="/maim.js"></script>
3</body>

ですので、使用するjQueryなどのライブラリも1つのファイルにまとめる。もしくは、他のjavascriptファイルに依存しないファイルであればasync属性を使えばhead内に記述しても、レンダリングをブロックしてしまうということはありません。

[参考]
async属性で簡単！非同期でjsを読み込みレンダリングを速くしよう

[追記]

逆にBodyタグ最後でJSファイルを読み込むことによるデメリットってあるんでしょうか？

HTMLのレンダリングが完了する前に何かjsを動かしておきたいというような事があれば、bodyの閉じタグ前より先にスクリプトタグを書いておかなければ意図したとおり動作しないかと思います。

下の例ではwriteImage.jsのある位置にもともとあったかのようにimgタグが追加されます。
HTMLがレンダリングされてから画像1の前にjavascriptで画像を追加すると一瞬表示がｶﾞﾀｯとなってしまうかもしれません。これが嫌だ！というような場合はHTMLのレンダリングをブロックさせてでもスクリプトを実行させるメリットは有るかもしれません。

html
1<body>
2<script src="writeImage.js"></script>
3<div>
4  <img alt="画像1" src="http://dic.nicovideo.jp/oekaki/663056.png">
5</div>
6</body>

javascript
1// writeImage.js
2var d = document;
3var url = 'http://cdn-ak.b.st-hatena.com/entryimage/236933222-origin-1419307828.jpg';
4var img = d.createElement('img');
5img.src = url;
6d.getElementsByTagName('body').item(0).appendChild(img);

メリットとは別の先に書いていたasyncとの違いも試してみるとこが出来ます。
<script src="writeImage.js" async></script>としてみてください。
asyncはHTMLのレンダリングをブロックしませんので、必ずしも追加される画像が画像１の上に表示される訳ではなくなる事が確かめられると思います。

最近のTwitterとかはてなとかの埋め込みscriptタグはasync付きのものが多いですが、
コメントでご指摘頂いております通り、asyncの方法は下記に注意する必要があります。

“async”(非同期)はIE 8/9, Android 2.2/2.3.といった、いくつかの前の型のブラウザに対応していません。

[参考]
JavaScriptの読み込みにおける非同期スクリプト注入の悪影響

投稿2015/08/18 04:59

編集2015/08/18 07:05

KiKiKi_KiKi

総合スコア596

think49

2015/08/18 06:10 編集

script[async] は IE9- が未サポートである点に注意が必要だと思います。 http://caniuse.com/#feat=script-async MSのサポートサイクル的には下記スケジュールとなるので、2017/04/10 まで script[async] が使えないブラウザがある事を考慮する必要があります。 - 2016/01/12 … IE7+ (Windows Vista SP2 の最下位ver) - 2016/01/13 … IE9+ (Windows Vista SP2 の最上位ver / ポリシー変更で最上位版だけサポート対象に) - 2017/04/11 … IE11+ (Windows Vista SP2 の延長サポート終了日) > d.getElementsByTagName('body').item(0).appendChild(img); 問題の大本は appendChild にあるので、DOMContentLoaded まで待ってから insertBefore すれば script[async] を使っても期待通りに動作すると思います。

KiKiKi_KiKi

2015/08/18 06:31 編集

think49さま確かにIE系のサポートは度外視していた回答になっていたかと思います。 IE9が3.9%ほどのシェア率なのでまぁどこまでサポートするのか？という問題でもあるかと思いますが、サポートできる範囲を多く取ろうと思えば必要ですね。追記したサンプルの件は、asyncが無ければブロックするから、スクリプトタグのある位置にはいるよ。asyncをつけると必ずしもそこに入るとは限らないよ。(担保できないよ)という事で、bodyの閉じタグ直前に書かない事でできるような雑いサンプルになりますので、意図させた場所に画像を入れたいという意味合いのものではありません。意図させた場所に画像を入れる方法はいくらでもありますし。 `d.getElementsByTagName('body').item(0).appendChild(img);` と書いてあるのはasyncとした場合にdocument.writeが無視されるので、本当はdocument.writeで書いたほうが解りやすいのですが、jsの処理が変わると比較しづらいかと思いこう書いたのですが意図が伝わりにくい書き方になっていたようで申し訳ないです。 JavaScriptの読み込みにおける非同期スクリプト注入の悪影響 http://postd.cc/script-injected-async-scripts-considered-harmful/

think49

2015/08/18 06:38

「コード製作者の意図は scriptElement.nextSibling に img 要素ノードを挿入する動作だが、期待に反して img 要素ノードが挿入される場所が不定」を伝えたかったのだと推察します。ただ、この書き方では「非同期処理では上手くいかないから同期処理を使ってね」と読めなくもないので、非同期処理としての書き方(解決法)を示唆する一文が合ってもいいのではと思いました。

KiKiKi_KiKi

2015/08/18 06:57

think49さまコメントありがとうございます。 scriptタグがHTMLの読み込みをブロックして動作するよ、というのが解りやすいかなと思いサンプルコードを書かせていただきました。これは質問者様の > 逆にBodyタグ最後でJSファイルを読み込むことによるデメリットってあるんでしょうか？に対して、良い悪いは別としてブロックさせる事でこんなこともできなくはないですよ。という事を示したかったのですが、自分の回答した`async`の問題も合わせて説明してしまったために、齟齬を与える事になり申し訳ないです。

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

jQuery等、HTMLに直接スクリプトを埋め込んだ時に利用したいライブラリは、埋め込んだJavaScriptが読み込まれる前にロードが終わってないと、HTMLに埋め込んだスクリプトが動かなくなります。このスクリプトが動かないと、表示が想定したとおりにできません。なので、jQuery等はheadタグで読み込んでいる事が多いです。

参考: 外部CSSと外部JavaScriptで表示速度の低下を防ぐには

投稿2015/08/16 10:36