web-dev-qa-db-ja.com

複数のスクリプトタグと単一のスクリプトタグ

埋め込まれたコードを含む単一のスクリプトタグを使用するか、同じコードで複数のスクリプトタグを使用してHTML全体に分散するか（パフォーマンス、ベストプラクティスなど）に違いはありますか？

例えば：

<script>
    foo();
</script>
...
<script>
    bar();
</script>

対：

<script>
    foo();
    bar();
</script>

ありがとう

javascripthtmlscript-tag
46
Assaf Shemesh

inlineスクリプトのように、muchの違いはほとんどありません;ただし、ブラウザのHTMLパーサーがscriptタグを検出するたびに、次のようになります。

  • 金切り声で止まる
  • 最初に文字列"</script>"が見つかるまで、タグ内のテキストの文字列を作成します。
  • そのテキストをJavaScriptインタープリターに渡し、document.writeを実行すると、インタープリターが送信する出力をリッスンします。
  • 通訳が終了するのを待つ
  • 受け取った累積出力を解析ストリームに挿入します
  • 解析を続行します

したがって、このシーケンスが発生する回数を増やすと、理論的にはページの読み込み時間が長くなる可能性があります。また、パーサーがトークンストリームを「先読み」できる度合いにも影響を与えるため、効率が低下する可能性があります。

これらはすべて非常に劇的に聞こえますが、気になるさまざまなブラウザで実際のページをプロファイリングして、実際のページに実際の影響があったかどうかを判断する必要があります。

要約すると、可能な限りそれらを組み合わせる。カップルを合理的に組み合わせることができない場合でも、実際の問題が発生するまでは、あまり心配しないでください。

上記はインラインスクリプト用です。当然のことながら、一連の外部JavaScriptファイルを参照する複数のscriptタグがある場合、それらの各ファイルをダウンロードする必要があり、HTTPリクエストの開始はコストが高くなるという問題があります（比較的）したがって、これらを1つのファイルに結合することをお勧めします。

考慮すべき他のいくつか：

  • HTML全体に多数のscriptタグが散在していると、スクリプトのメンテナンスが困難になる可能性があります
  • HTMLとスクリプトを別々のファイルに分離すると、それらが結合される度合いを制限するのに役立ち、これもメンテナンスに役立ちます
  • スクリプトを別のファイルに置くことで、そのファイルをminifiers/compressors/packersを介して実行できるようになり、コードのサイズを最小限に抑えてコメントを削除できるため、ソースコードに自由にコメントして、それらのコメントを非公開にすることができます。
  • スクリプトを外部ファイルに入れると、機能ごとに分離された状態を保ち、それらをページの単一ファイル（圧縮/縮小/パック）に結合して、ブラウザーに効率的に配信できます。

もっと：

41
T.J. Crowder

私の意見では、スクリプトをできるだけ組み合わせる方が良いと思います。一部のブラウザでは、スクリプトブロックの実行中にレンダリングを一時停止する必要があります。回答をチェックしてください： Javascriptのパフォーマンス：複数のスクリプトブロックと1つの大きなブロック

2
Babiker

この時点までは、すべてのJavaScriptコードが1つのタグに含まれていましたが、そうである必要はありません。

ドキュメントには、必要なだけタグを付けることができます。

タグは、検出されると処理されます。

お役に立てれば。

2
user812254

複数のタグを使用しています。 1つは画像のスライドショー用、もう1つはテキストのスライドショー用で、画像のスライドショーとテキストのスライドショーの両方を同じWebページに表示できます。

0
Edwin H Oudit

すべてのスクリプトを単一のスクリプトブロックまたは単一のスクリプトファイルに結合し、本当に必要なJavaScriptのみをロードし、HTMLのレンダリングが遅くならないようにできるだけ遅くロードすることがベストプラクティスであると主張する人もいます。

それとは別に、単一のスクリプトブロックを使用すると、複数のスクリプトブロックを使用するよりもロードが速くなると確信しています。ただし、この違いは認識できない場合があります。

0
Till