埋め込まれたコードを含む単一のスクリプトタグを使用するか、同じコードで複数のスクリプトタグを使用してHTML全体に分散するか(パフォーマンス、ベストプラクティスなど)に違いはありますか?
例えば:
<script>
foo();
</script>
...
<script>
bar();
</script>
対:
<script>
foo();
bar();
</script>
ありがとう
inlineスクリプトのように、muchの違いはほとんどありません;ただし、ブラウザのHTMLパーサーがscript
タグを検出するたびに、次のようになります。
"</script>"
が見つかるまで、タグ内のテキストの文字列を作成します。document.write
を実行すると、インタープリターが送信する出力をリッスンします。したがって、このシーケンスが発生する回数を増やすと、理論的にはページの読み込み時間が長くなる可能性があります。また、パーサーがトークンストリームを「先読み」できる度合いにも影響を与えるため、効率が低下する可能性があります。
これらはすべて非常に劇的に聞こえますが、気になるさまざまなブラウザで実際のページをプロファイリングして、実際のページに実際の影響があったかどうかを判断する必要があります。
要約すると、可能な限りそれらを組み合わせる。カップルを合理的に組み合わせることができない場合でも、実際の問題が発生するまでは、あまり心配しないでください。
上記はインラインスクリプト用です。当然のことながら、一連の外部JavaScriptファイルを参照する複数のscript
タグがある場合、それらの各ファイルをダウンロードする必要があり、HTTPリクエストの開始はコストが高くなるという問題があります(比較的)したがって、これらを1つのファイルに結合することをお勧めします。
考慮すべき他のいくつか:
script
タグが散在していると、スクリプトのメンテナンスが困難になる可能性がありますもっと:
私の意見では、スクリプトをできるだけ組み合わせる方が良いと思います。一部のブラウザでは、スクリプトブロックの実行中にレンダリングを一時停止する必要があります。回答をチェックしてください: Javascriptのパフォーマンス:複数のスクリプトブロックと1つの大きなブロック
この時点までは、すべてのJavaScriptコードが1つのタグに含まれていましたが、そうである必要はありません。
ドキュメントには、必要なだけタグを付けることができます。
タグは、検出されると処理されます。
お役に立てれば。
複数のタグを使用しています。 1つは画像のスライドショー用、もう1つはテキストのスライドショー用で、画像のスライドショーとテキストのスライドショーの両方を同じWebページに表示できます。
すべてのスクリプトを単一のスクリプトブロックまたは単一のスクリプトファイルに結合し、本当に必要なJavaScriptのみをロードし、HTMLのレンダリングが遅くならないようにできるだけ遅くロードすることがベストプラクティスであると主張する人もいます。
それとは別に、単一のスクリプトブロックを使用すると、複数のスクリプトブロックを使用するよりもロードが速くなると確信しています。ただし、この違いは認識できない場合があります。