web-dev-qa-db-ja.com

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

約100kb程度に圧縮されたかなり大きなJavaScriptファイルがあるとします。ファイルとは、<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>

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

javascripthtmloptimization
201
nickf

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

もちろん、Leviのコメント「あなたがそれを必要とする直前に」は本当に正しい答えです。つまり、「それは依存します」。

169
Walter Rumsby

最適な場所は、すぐに必要になる直前です。

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

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

74
Levi Rosol

経験則として、<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に配置すると、ページを段階的にレンダリングできるためです。 その他...

さらに読む

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

56
martynas

100kのJavascriptを使用する場合、ファイル内に配置しないでください。外部スクリプトJavascriptファイルを使用します。地獄では、この量のコードを1つのHTMLページのみで使用する可能性はありません。 Javascriptファイルのロード先を尋ねている可能性があります。これについては、すでに十分な回答が得られています。

しかし、一般的に、最新のブラウザはgzipped Javascriptファイルを受け入れることを指摘したいと思います！ x.jsファイルをx.js.gzにgzipし、src属性でそれをポイントするだけです。ローカルファイルシステムでは動作しません。動作するにはウェブサーバーが必要です。しかし、転送バイトの節約は膨大な量になる可能性があります。

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

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

4
bart

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

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

4
Matthias Wandel

cuzillion を使用すると、インライン、外部、「HTMLタグ」、「document.write」、「JS DOM要素」、「iframe」という異なる方法を使用して、スクリプトタグの異なる配置のページロードへの影響をテストできます。 「」および「XHR eval」。違いの説明については help をご覧ください。また、スタイルシート、画像、iframeをテストすることもできます。

3
Sam Hasler

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

1
GustyWind

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

0
José Salgado

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

私は本当に最後のmsごとに絞り出す必要があるのなら、おそらくYahooの言うことをすべきでしょう。

0
Berserk