web-dev-qa-db-ja.com

bodyタグの末尾にスクリプトを使用する理由

私はこの質問が何度も尋ねられたことを知っていますが、私は答えを見つけていません。では、レンダリングを改善するためにbodyタグの最後にスクリプトを含めることが推奨されるのはなぜですか？

Udacityコースから https://www.udacity.com/course/ud884 -レンダリングはDOMとCSSOMの準備ができた後に開始されます。 JSはHTML解析ブロックであり、CSSOMの準備ができた後にすべてのスクリプトが開始されます。

だから私たちが得た場合：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <!-- content -->
        <script src="script.js"></script>
    </body>
</html>

CRPは次のよ​​うになります。

CSSOM ready > JS execute > DOM ready > Rendering

そして、スクリプトが先頭にある場合：

<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>CRP</title>
        <link rel="stylesheet" href="styles.css">
        <script src="script.js"></script>
    </head>
    <body>
        <!-- content -->
    </body>
</html>

CRPも同じです。

CSSOM ready > JS execute > DOM ready > Rendering

この質問は、「sync」スクリプト（async/defer属性なし）についてのみです。

javascripthtmlcsswebpageload
18
Artem Svirskyi

スクリプトは、これまで、追加のリソースがより速くダウンロードされるのを妨げていました。それらを下部に配置することで、スタイル、コンテンツ、およびメディアをより迅速にダウンロードして、パフォーマンスの向上を認識できます。

参考資料： async および defer 属性。

19
Sampson

私の意見では、これは古い習慣です。最近では、JavaScriptが、DOMが "DOMContentLoaded"イベントリスナーに存在する必要があるコードを分離するようになっています。これは必ずしもallロジックではありません。多くのコードは、完全なDOMにアクセスしなくても初期化できます。

これにより、スクリプトファイルのみが取得され、それ以外のもの（たとえば、画像）が取得されない場合は、わずかな時間が発生します。この小さなウィンドウはasync属性を追加することでスキップできますが、それがなくても、スクリプトタグを先頭に置くことをお勧めします。これにより、ブラウザは、保存するのではなく、できるだけ早くロードすることを認識できるようになります。 JSによって開始されたリクエスト）.

4
Katana314

それはあなたのウェブサイトやアプリに依存すると思います。一部のWebアプリはJavaScriptに基づいています。次に、ページの下部に含めることは意味がありませんが、すぐにロードします。 JavaScriptがコンテンツベースのページにそれほど重要でない機能を追加するだけの場合は、最後にロードすることをお勧めします。読み込み時間はほぼ同じですが、ユーザーには重要な部分が早く表示されます（ページの読み込みが完了する前）。

これは、サイト全体の読み込みが速くなることではなく、一部のWebサイトが速く読み込まれるような印象をユーザーに与えます。

例：これが、AjaxベースのWebサイトがはるかに高速な印象を与えることができる理由です。インターフェースは常に同じです。一部のコンテンツ部分のみが変更されます。

1
user4975367

スクリプトタグの下に配置された画像は、JSスクリプトが読み込まれるまで読み込みを待機します。スクリプトタグを下部に配置することで、最初に画像をロードし、ページのロードが高速に見えるようにします。

1
Brian

これは非常に便利なリンクでした。 Webページごとに、.htmlからドキュメントオブジェクトモデルが作成されます。 CSSオブジェクトモデルも.cssから作成されます。

また、JSファイルはオブジェクトを変更することも知っています。ブラウザがタグに遭遇すると、すべてを編集できるため、スクリプトの実行時にDOMおよびCSSオブジェクトモデルの作成はすぐに停止します。その結果、jsファイルがいずれかのツリー（DOMおよびCSSオブジェクトモデル）から情報を抽出する必要がある場合、十分な情報がありません。

したがって、スクリプトソースは通常、ほとんどのツリーが既にレンダリングされている本文の最後にあります。

0
DFeng