210

かなり重いJavaScriptファイルがあり、およそ100kb程度に圧縮されているとしましょう。ファイルとは<script src="...">、HTML自体に貼り付けられるのではなく、を介してリンクされる外部ファイルであることを意味します。

これをHTMLに配置するのに最適な場所はどこですか？

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

各オプション間に機能的な違いはありますか？

javascript html optimization

— ニック
ソース

HTMLマークアップに<script>タグ

— Ivar 2017

175

Yahoo! 優れたパフォーマンスチームは、ブラウザがコンポーネントをダウンロードする方法のため、スクリプトをページの下部に配置することをお勧めします。

もちろん、リーバイのコメント「あなたがそれを必要とする直前に」は本当に正解です。

— ウォルター・ラムズビー
ソース

4

たとえば、jQueryに関する一連の作業を行う場合は、実際に使用する前にライブラリをロードする必要があります。

— BryanH 2009

58

また、Yahoo EPTがJSを下部に配置することを推奨する理由は、JSがロードされて実行される間、ブラウザーはシングルスレッドモードに移行する必要があるためです。スクリプトがコンテンツの先頭または途中にある場合、ブラウザはJSを処理している間、「一時停止」します。JSを下部に配置すると、コンテンツが読み込まれ、通常は表示されるため、ブラウザーがJSを処理している間にユーザーがコンテンツを読み始めることができます。

— BryanH 2009

1

こんにちは。このようなコードを$(function () {...})ページの下部にも配置しますか、それとも内部に配置する必要があり<head>ますか？

— タンファン2013年

7

ここの「あなたのページの底」を参照することを願っています</body>。

— Mr_Green 2013

1

最近のブラウザは「defer」属性も読み取ることができます。<body>の下部にないスクリプトタグにdefer = "defer"を設定できます。ブラウザがそれらを認識すると、最初に残りのhtmlの読み込みが完了し、次に戻ってのコンテンツを解釈しますスクリプトタグ。これは、ページを完全に制御できないようなフレームワークを使用している場合に役立ちます。この記事を

— 詳しく調べて、最新の

75

最適な場所は、必要になる直前であり、すぐには必要ありません。

また、ユーザーの物理的な場所によっては、AmazonのS3サービスなどのサービスを使用すると、ユーザーがサーバーより物理的に近いサーバーからサービスをダウンロードできる場合があります。

あなたのjsスクリプトは、jQueryやプロトタイプのような一般的に使用されるライブラリですか？その場合、GoogleやYahooなど、分散ネットワークでこれらのファイルを提供するツールを提供している会社が多数あります。

— リーバイ・ロソル
ソース

60

経験則として、<script>タグを付けるのに最適な場所は、ページの下部、</body>タグの直前です。このようなもの：

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

どうして？

スクリプトが原因の問題は、スクリプトが並行ダウンロードをブロックすることです。HTTP / 1.1仕様では、ブラウザがホスト名ごとに並行して2つ以下のコンポーネントをダウンロードすることが推奨されています。複数のホスト名からイメージを提供する場合、3つ以上のダウンロードを並行して行うことができます。ただし、スクリプトのダウンロード中は、ホスト名が異なっていても、ブラウザは他のダウンロードを開始しません。もっと...

CSS

少し話題外ですが...スタイルシートを一番上に置きます。

Yahoo!でパフォーマンスを調査しているときに、スタイルシートをドキュメントHEADに移動すると、ページの読み込みが高速に見えることがわかりました。これは、HEADにスタイルシートを配置すると、ページを徐々にレンダリングできるためです。もっと...

参考文献

Yahooは、Webサイトを高速化するためのベストプラクティスをリストした、本当にクールなガイドをリリースしました。間違いなく読む価値があります：https : //developer.yahoo.com/performance/rules.html

— マルティナス
ソース

1

「スクリプトによって引き起こされる問題は、並列ダウンロードをブロックすることです。」—それはもはや正しくありません：w3.org/TR/html5/scripting-1.html#attr-script-async

— Quentin

4

100kのJavascriptを使用する場合は、ファイル内に配置しないでください。外部スクリプトJavascriptファイルを使用します。たった1つのHTMLページだけでこの量のコードを使用することは決してあり得ません。おそらく、Javascriptファイルをどこにロードすべきかを尋ねているでしょう。これについては、すでに満足のいく回答を受け取っています。

しかし、私は一般的に、最近のブラウザーはgzip ped Javascriptファイルを受け入れることを指摘しておきます！x.jsファイルをx.js.gzにgzip して、src属性でそれを指定するだけです。ローカルファイルシステムでは動作しません。動作するにはウェブサーバーが必要です。しかし、転送されるバイト数の節約は莫大なものになる可能性があります。

私は、Firefox 3、MSIE 7、Opera 9、およびGoogle Chromeで正常にテストしました。Safari 3ではこのように動作しないようです。

詳細については、このブログの投稿と、ブラウザがgzipされたJavascriptを受け入れるかどうかをWebサーバーが検出できることを示しているため、それでも役立つ別の非常に古いページを参照してください。サーバー側でgzip圧縮またはプレーンテキストの送信を動的に選択できる場合は、すべてのWebブラウザーでページを使用できるようにすることができます。

— バート
ソース

8

OPの質問を誤解しました。彼は、HTMLのどこにスクリプトタグを配置するかを尋ねていました。彼はスクリプトをインライン化せずに、すでに外部ファイルを使用していました。確かに、これは2009年4月に質問を編集する前はあまり明確ではありませんでした。おそらくこの回答を削除しますか？

— Mark Amery 2013年

@Leandro私はそれは人々が常に実際の質問を心に留めているわけではないが、それでもこのような答えが役に立つと考えているからだと思います。それでも、この回答は有用ですが、必ずしも関連性はありません。投票のツールチップに、「この回答は有用で関連性がある」など、より明確な表現が含まれていると、より効果的です。

— WynandB 2013年

1

gzipされたJavascriptの場合：圧縮するようにWebサーバーを構成するだけで...（またはnginxのgzip_staticモジュール/オプションなどを使用）（および他のクライアントにはgunzipを使用）少なくとも正しいコンテンツタイプヘッダーを送信する必要があります。エンコードがgzipとしてマークされているため、ブラウザのサポートがさらに向上する可能性があります

— Gert van den Berg

4

JavaScriptを一番上に置くとすっきりしますが、機能的には、HTMLの後に配置するのが適切です。そうすれば、JavaScriptは実行されず、ロードされる前にHTML要素を参照しようとしません。この種の問題は、実際のインターネット接続、特に遅い接続を介してページをロードしたときにのみ明らかになることがよくあります。

また、他のJavaScriptコードからヘッダー要素を追加してJavaScriptを動的にロードすることもできますが、これは、常にすべてのコードを使用していない場合にのみ意味があります。

— マティアス・ワンデル
ソース

3

使用cuzillionをあなたは異なる方法を使用してスクリプトタグの異なる配置のページの負荷に影響を与えるをテストすることができますインライン、外部、「HTMLタグ」、「のdocument.write」、「JS DOM要素」、「IFRAME」、および「XHRの評価を」。違いの説明については、ヘルプを参照してください。また、スタイルシート、画像、iframeをテストすることもできます。

— サムハスラー
ソース

1

答えは、JavaScriptのオブジェクトをどのように使用しているかによって異なります。すでに指摘したように、ヘッダーではなくフッターでjavascriptファイルをロードするとパフォーマンスは確実に向上しますが、使用されるオブジェクトはフッターでロードされるよりも後で初期化されることに注意する必要があります。もう1つの方法は、フォルダーに配置された「js」ファイルをロードし、すべてのファイルで使用できるようにすることです。

— GustyWind
ソース

0

他の人が言ったように、それはおそらく外部ファイルに入れるべきです。<head />の最後にそのようなファイルを含めることを好みます。この方法は、機械に優しい方法よりも人間に優しい方法ですが、その方法でJSがどこにあるかを常に知っています。他の場所にスクリプトファイルを含めることは、あまり読みやすくありません（imho）。

私は本当に最後の1ミリ秒ごとに搾り出す必要があるので、おそらくYahooの言うことを実行する必要があります。

— ベルセルク
ソース

0

この方法では、HTMLがブラウザーによって解析され、スクリプトが読み込まれる前に表示されるため、スクリプトはbodyタグの最後に含める必要があります。

— ホセ・サルガド
ソース

0

質問に対する答えは異なります。この状況には2つのシナリオがあり、適切なシナリオに基づいて選択する必要があります。

シナリオ1-重要なスクリプト/必要なスクリプト

使用しているスクリプトがWebサイトの読み込みに重要な場合は、HTMLドキュメントの上部に配置することをお勧めします<head>。いくつかの例には、アプリケーションコード、ブートストラップ、フォントなどが含まれます。

シナリオ2-重要性が低い/分析スクリプト

Webサイトの表示に影響を与えないスクリプトも使用されています。このようなスクリプトは、すべての重要なセグメントがロードされた後にロードすることをお勧めします。そして、その答えはドキュメントの下部、つまり<body>終了タグの前の下部になります。いくつかの例は-Googleアナリティクス、hotjarなどです。

ボーナス-非同期/延期

また、スクリプトの読み込みは他のユーザーと同時に行うことができ、スクリプトコードのdefer / async引数を使用してブラウザーの選択に基づいて読み込むことができることをブラウザーに通知することもできます。

例えば。 <script async src="script.js"></script>

— プラヴィーンティルムルガン
ソース

-1

JavaScriptリンクは、headまたはbodyタグの最後に配置できますが、bodyタグの最後にリンクを置くことでパフォーマンスが向上することは事実ですが、パフォーマンスに問題がない限り、リンクをheadに配置する方が適切です。人々が読んで、あなたはリンクがどこにあるか知っていて、それらをより簡単に参照することができます。

— ティモシー・トラウスデール
ソース

-1

私はあなたがJavascriptコードで何を達成することを計画していたかという事実に依存すると私は言うでしょう：

JSスクリプトを外部に挿入することを計画している場合、最適な場所はページの先頭です。
スマートフォンでページを使用する場合は、ページの下部、タグの直前。
ただし、HTMLとJSの組み合わせ（たとえば、動的に作成されてデータが入力されるHTMLテーブル）を作成する場合は、必要な場所に配置する必要があります。

— ルダスH
ソース

マイナスに値すると私が言ったこと！？もう。

— Ludus H

外部であることは、スクリプトを頭に置くことと何が関係していますか？ページの下部が、特にスマートフォン用のスクリプトを配置するのに適しているのはなぜですか？JSからHTMLを動的に生成することについての記述はdocument.write、を使用している場合にのみ当てはまります。

— クエンティン2016

あなたは私の考えを「推定」し、私の答えがマイナスになったためですか？あなたはおそらくあなたの推測が私の説明よりも良いと思いますよね？私は簡単な説明をするつもりでした、誰かが理解できない場合は、彼は詳細を尋ねます。私のコメントでは、スマートフォンとタブレットのページの最後にJSを挿入することを提案しました。これは、ブラウザが「シングルスレッド」モードに切り替える必要がないため、ページ全体のロードが高速になるため、ページのコンテンツが表示され始めるためです。画面上...しかし、あなたはおそらくこれを知っています。

— Ludus H 2016

JavaScriptをHTMLファイルのどこに配置しますか？

どうして？

CSS

参考文献