6W1H

仕組みをわかりたい

JavaScriptの読み込み位置について

こんにちは

みなさんは権利を行使していますか?
日本国憲法によると私達は健康で文化的な最低限の生活を営む権利を有しているそうです.
多くの人が権利を行使していると思います.
筆者も休日は電気を煌々とつけて日が昇るまでコンピューターを弄ったりなどして権利の行使をしています.
行使というよりかは濫用に近いでしょう.
権利の濫用は,最大限に文化的で不健康な生活を営むということです.
権利の濫用は,世間でもよく取り沙汰され問題になります.よくないことで,罰を受けたりします.
悪いことをしたらそれ相応の罰を受けるべきです.
筆者は先程言ったコンピュータを一晩中弄ることで地球の大切な資源を消費し破壊しました.
見えざる力が働き,頭痛持ちになりました.自律神経をぶっ壊しました.みなさんも気をつけましょう.
世の中がいくら文化的になっても身の程に合った生活もしくは健康で文化的な最低限の生活を営みましょう.
というのはどうでもいい話で本題はここからです.

この記事について

この記事は名前通り,HTMLの中でのJavaScriptの読み込み位置について書いてあります.
もっと掘り下げて言うと,HTMLのhead内で読み込む場合の挙動とbody内(bodyタグ閉じタグ直前)で読み込む場合の挙動について書いてあります.
あと間違ってるかもしれないので間違いがあれば教えてください.あと別の方法があれば教えてください.

遭遇した問題

jQueryプラグインを作っていたら,いくらコードを直してもエラーは出ないくせに動かないのでハマってしまいました.
そのまんま書くとよくわからなくなるので例として,
「指定したクラスの要素をクリックすると要素がちょっと動くプラグイン
を作るとしましょう(コードは違いますが筆者と同じ問題に遭遇します).

例として作ったjQueryプラグイン

(function($){
    $.fn.Move = function(Options){
        var element = this;
        var options = $.extend({
            seconds : 5000
        }, Options);

        element.click(function(){
            element.animate({
                left : "50px",
                top : "50px"
            }, options.seconds);
        });
    }
})(jQuery);

動きません

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8"/>
    <title>Sample Code</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(".move").Move({});
    </script>
</head>

<body>
    <div class = "container">
        <h1>Sample Code</h1>
        <div class="row">
            <div class="move col-md-6">
                <h2>Move!!</h2>
            </div>
        </div>
    </div>
</body>
</html>

何がいけないのでしょうか?

この問題の解決方法には10種類くらいあります.

1個目

~~~ 省略 ~~~

    <script>
        $(document).ready(function(){
            $(".move").Move({});
        });
    </script>

~~~ 省略 ~~~

10個目

~~~ 省略 ~~~

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="script.js"></script>
    <script>
        $(".move").Move({});
    </script>
</body>

~~~ 省略 ~~~

だれも10進数で10個くらいなんて言ってません.

2つの違いはなんでしょうか?

問題のコードとも照らし合わせてブラウザの動きを見ていきましょう.
ちなみにかなり大雑把です.中身はもっと複雑なことをしてます.

順序 問題のコード 解決方法 1 解決方法 10
1 サイトにアクセスする サイトにアクセスする サイトにアクセスする
2 CSSとかJavaScriptのダウンロードが始まる[1] CSSとかJavaScriptのダウンロードが始まる[1] CSSのダウンロードが始まる
3-1 JavaScriptの実行[2] HTMLの読み込みが終わったら実行するという命令があるため実行されない それ以降(bodyの中身)のダウンロード
3-2 それ以降(bodyの中身)のダウンロード~ それ以降(bodyの中身)のダウンロード 描画
4-1 描画 描画 JavaScriptのダウンロード
4-2 JavaScriptの実行

[1]このときダウンロードしたJavaScriptのコードが実行されるまでそれ以下のHTMLの描画が止まります.
[2]HTMLが完全に読み込まれないまま何か処理を行うので動かないことが多いそうです.

この図はたぶんよくわからないと思うのでこちらを参照してください.
JavaScript - jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか?(14600)|teratail
1024倍くらいわかりやすいです.

JavaScirptのファイルの大きいなどなどあると描画が遅くなってしまうっぽいのと,$(document).ready(function(){云々を書くのが面倒なので解決方法10の方法がおすすめかもしれません.
どうでもいいですがサイトの表示がトロいと帰っていく確率が高いそうです.
筆者もせっかちなので遅いとブラウザバックしがちです.
グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト–7秒が1秒に短縮 - CNET Japan

参考にしたページ

JavaScript - jQueryやJSライブラリ等をbodyタグで読み込むことによるデメリットってあるんでしょうか?(14600)|teratail

jQueryの基本 - $(document).ready - Qiita

グーグル、“ページ表示が遅い”を解消する「AMP」プロジェクト–7秒が1秒に短縮 - CNET Japan