4

重複の可能性:
JavaScript を HTML の本体に埋め込むのはどれほど悪いことですか?

さて、私はしばらくの間 JavaScript を使用しており、見慣れないわけではありませんが、JavaScript を実際にHTML ファイルのどこに配置する必要があるかについて質問があります。

head外部スクリプト ファイルへの参照はすべてタグに含め、現在の HTML ファイルに含まれるスクリプトはすべてファイルの末尾に配置する必要があると常に言われ、その印象を持って作業していました。

最近、同僚と話し合っていると、スクリプト ブロックを HTML ページ全体の一見ランダムな場所に配置する人が増えているのを目にするようになりました。

<div>
   <p>Foo</p>
   <script type="text/javascript">
       //some script
   </script>
   <p>Bar</p>
</div>

今、これは良い習慣ですか？そうじゃないとずっと思っていました。もしそうなら、スクリプトはその時点で実行されるので有益ですが、残りの HTML が読み込まれるまで待てないのはなぜですか?

4

6 に答える 6

7

ページ下部に +1 票

訪問者に与える;

  • 最初にコンテンツとマークアップ

  • 次にcssで表示します

  • 次に、JavaScriptを使用したUI

これは少し高い額であることを理解してください

于 2012-05-15T20:22:31.560 に答える
5

スクリプトはページの下部に配置する必要があります。これにより、画像などのすべてのサイト リソースを並行してダウンロードできるようになります。完了すると、スクリプトが 1 つずつダウンロードされます。

ページの下部にスクリプトを配置するほうがよい理由は、並列ダウンロードをブロックするためです。通常、ブラウザは画像などのリソースを、ホスト名ごとに (HTTP 1.1 仕様で指定されているように) 一度に 2 つのリソースを並行してダウンロードします。スクリプトはこれを阻止し、完全にダウンロードされるまで他のダウンロードを許可しません。

于 2012-05-15T20:11:28.820 に答える
3

この質問の複製 JavaScript を HTML の本文に埋め込むのは悪い習慣ですか?

スクリプトを実行する前に特定の dom を確実に作成したい場合に役立ちます (そして完全に有効です)。

于 2012-05-15T20:13:05.060 に答える
2

インラインを使用すると、私にとって明らかな利点があります。例えば。

（基本的なシナリオで説明しようとしますので、シナリオについて批判しないでください）

ページに A、B、C の html セクション (div) があります。明らかにそれらすべてをレンダリングしますが、一度に 1 つのセクションのみを訪問者に表示したいと考えています。そのため、ページ全体と JavaScript ファイルが読み込まれるのを待ちきれず、「セクションの表示優先度を設定する」JavaScript メソッドを適用して起動します。その間、すべてが完全に読み込まれるまで、3 つのセクション (A、B、および C) はすべて表示されたままになるためです。ページがひどく見えるかもしれないので、インライン JavaScript を使用することを好みます。

于 2012-05-15T20:24:28.683 に答える
2

Rob Sedge の返信の下にコメントを書き始めましたが、大きくなりました...

1) 上部のヘッダーの CSS (ユーザーにスタイリングなしでページを表示させたくない場合、大きな HTML ファイルや外部 JS の場合、読み込み時間が長くなる場合があります)

2) 本文の内容とマークアップ

3) フッターの JS、前に</body>

現在、JS の評価は $(document).ready または $(window).load イベント内で行うことが強く推奨されていますが、一部の外部スクリプトはそれを行わない場合があります。そのような場合、コンテンツがダウンロードされるとすぐに評価されます。 、しばしばランダムな動作を引き起こします。さらに、ブラウザが実際に指定されたタグを処理するとすぐにコンテンツが評価されるため (ポイント 1)、追加の楽しみがあります。

追加の (そして少なくとも私にとっては重要な) ポイントはこれです - テンプレート エンジン、またはドキュメントに PHP を含めるとしましょう。さて、そのようなファイルがたくさんあり、そのうちの 1 つで JS コードを変更する必要があるとしましょう。そのような場合、プロジェクトに取り組んでいるのが自分だけではない場合、それらすべてのファイルで特定のコードを検索する必要があります。したがって、JS を 1 か所に保持することをお勧めします。

それに加えて、実際に JS コードを 1 か所に保持する場合、そのようなコンテンツを縮小またはキャッシュして、サイト全体の読み込みを高速化できます。そのスクリプトをキャッシュから評価できるのに、ページが読み込まれるたびにユーザーにJSのビットをダウンロードしてもらいたいのはなぜですか。スクリプトを分離すると、そのようなアプローチは難しくなります。

于 2012-05-15T21:47:48.643 に答える
1

基本的に、ヘッダーに配置したスクリプトは同期的にダウンロードされ、それらが順番に実行されることを確認できますが、ページの読み込みが完了する前にこれらのスクリプトを実行する必要がない場合は、ページのレンダリングをより迅速に終了し、ユーザーにより良いエクスペリエンスを提供するために、それらを下部に含めるか、または遅延した方法で含めます。

HTML に含まれるスクリプトについては、それが何をするかによって異なります。たとえば、何らかの理由で Document.write を実行する必要がある場合、またはページがレンダリングされる前に何らかのコードを実行して DOM を変更したい場合、これらは非常に便利です。

Steve Souders の 2 冊の本、"High Performance Web Sites" と "Even Faster Web Sites" を読むことを強くお勧めします。両者の違いについて非常によく説明されています。

于 2012-05-15T20:41:11.860 に答える