パフォーマンスとメンテナンスの容易さの観点から、外部スクリプトを含めるか、HTMLコードにインラインで記述する必要がある場合を知りたいです。
これの一般的な方法は何ですか？
現実のシナリオ-クライアント側のフォーム検証が必要なHTMLページがいくつかあります。このために、これらすべてのページに含めるjQueryプラグインを使用します。しかし、問題は、私が次のことを行うかどうかです。
ありがとう。
回答:
この回答が最初に投稿されたとき（2008）、ルールは単純でした。すべてのスクリプトは外部である必要があります。メンテナンスとパフォーマンスの両方。
（なぜパフォーマンスなのか？コードが分離していると、ブラウザで簡単にキャッシュできるからです。）
JavaScriptはHTMLコードに属しておらず、特殊文字（、など）が含まれていると<、>問題が発生します。
今日、ウェブのスケーラビリティは変化しました。複数のHTTPリクエストを行う際のレイテンシのため、リクエスト数の削減は有効な検討事項となっています。これにより、答えがより複雑になります。ほとんどの場合、JavaScriptを外部に置くことをお勧めします。ただし、特定の場合、特に非常に小さなコードの場合、それらをサイトのHTMLにインライン化することは理にかなっています。
保守性は間違いなくそれらを外部に保持する理由ですが、構成が1ライナーの場合（または一般に、それらのファイルを外部にすることで得られるHTTPオーバーヘッドよりも短い場合）、インラインで保持する方がパフォーマンス面で優れています。各HTTPリクエストは、実行時間とトラフィックの点でいくつかのオーバーヘッドを生成することを常に覚えておいてください。
当然のことながら、コードが数行より長く、実際には1つのページに固有ではない場合、このすべては無関係になります。そのコードを再利用できるようにしたい瞬間に、それを外部にします。そうでない場合は、そのサイズを確認して決定します。
JavaScriptの外部化は、yahooパフォーマンスルールの1つです。http： //developer.yahoo.com/performance/rules.html#external
常にスクリプトを外部化する必要のある厳格なルールは一般的には適切ですが、場合によっては、スクリプトとスタイルの一部をインライン化することもできます。ただし、パフォーマンスを向上させることがわかっているものだけをインライン化する必要があります（これを測定したため）。
パフォーマンスのみに関心がある場合、このスレッドのほとんどのアドバイスは完全に間違っており、SPAの時代にはますます誤りになり、JSコードがなければページは役に立たないと見なすことができます。私は無数の時間を費やしてSPAページのロード時間を最適化し、さまざまなブラウザーでこれらの結果を検証しました。全体的に、htmlを再編成することによるパフォーマンスの向上は、非常に劇的な場合があります。
最高のパフォーマンスを得るには、ページを2段階のロケットと考える必要があります。これらの2つの段階はおおまかに<head>と<body>フェーズに対応していますが、代わりに<static>およびと考えてください<dynamic>。静的な部分は基本的に文字列定数であり、できる限り速く応答パイプを押し下げます。Cookieを設定するミドルウェア（httpコンテンツを送信する前に設定する必要があります）を多く使用する場合、これは少しトリッキーになる可能性がありますが、原則として応答バッファーをフラッシュするだけで、テンプレートコード（razor、php、など）サーバー上。これは難しいように聞こえるかもしれませんが、それは些細なことなので、間違って説明しています。ご想像のとおり、この静的な部分には、インライン化および縮小されたすべてのJavaScriptが含まれているはずです。それは次のようになります
<!DOCTYPE html>
<html>
<head>
<script>/*...inlined jquery, angular, your code*/</script>
<style>/* ditto css */</style>
</head>
<body>
<!-- inline all your templates, if applicable -->
<script type='template-mime' id='1'></script>
<script type='template-mime' id='2'></script>
<script type='template-mime' id='3'></script>
この部分をネットワーク経由で送信することはほとんどコストがかからないため、サーバーに接続した後、クライアントが約5ms +待機時間のどこかでこれを受信し始めることが期待できます。サーバーがかなり近いと想定すると、この待ち時間は20ミリ秒から60ミリ秒の間になる可能性があります。ブラウザーはこのセクションを取得するとすぐに処理を開始します。通常、処理時間は転送時間の約20倍以上を占めます。これは、サーバー側での<dynamic>部分の処理の償却ウィンドウになります。
インラインjquery +シグナル+角度+ ng +アニメーション+ ngタッチ+ ngルート+ロダッシュを処理するには、ブラウザー（クロム、残りは20％遅くなる可能性があります）に約50ミリ秒かかります。それ自体はかなり驚くべきことです。ほとんどのウェブアプリは、人気のあるすべてのライブラリを組み合わせた場合よりもコードが少なくなっていますが、同じくらいあるとすると、クライアントでレイテンシ+ 100ミリ秒の処理を獲得します（このレイテンシの獲得は、2番目の転送チャンクから発生します）。2番目のチャンクが到着するまでに、すべてのjsコードとテンプレートを処理し、dom変換の実行を開始できます。
このメソッドがインライン化の概念に直交していることに反対するかもしれませんが、そうではありません。インライン化する代わりに、cdnsまたは独自のサーバーにリンクする場合、ブラウザーは別の接続を開いて実行を遅延させる必要があります。この実行は基本的に無料であるため（サーバー側がデータベースと通信しているため）、これらのジャンプはすべて、ジャンプを実行しないよりもコストがかかることを明確にする必要があります。外部jsがより高速に実行されるというブラウザの癖があれば、どの要素が支配的かを測定できます。私の測定では、この段階で余分なリクエストによりパフォーマンスが低下することが示されています。
私はSPAアプリの最適化に多く取り組んでいます。人々はデータ量は大事だと考えるのが一般的ですが、実際にはレイテンシと実行が支配的であることがよくあります。私がリストした最小化されたライブラリーは、最大300kbのデータを追加し、それは68kbのgzip圧縮、つまり2mbit 3g / 4g電話での200msのダウンロードです。これは、同じ電話で同じデータがあるかどうかを確認するのにかかる待ち時間とまったく同じです。モバイルレイテンシ税（電話からタワーまでのレイテンシ）が引き続き適用されるため、プロキシキャッシュされていたとしても、すでにキャッシュ内にあります。一方、最初のホップのレイテンシが低いデスクトップ接続は、通常、とにかく帯域幅が広くなります。
つまり、現時点（2014年）では、すべてのスクリプト、スタイル、テンプレートをインライン化するのが最善です。
編集（2016年5月）
JSアプリケーションが成長し続け、一部のペイロードが最大3 MB以上の縮小コードにスタックするようになると、少なくとも一般的なライブラリをインライン化すべきではないことが明らかになってきています。
私は1ページに固有だと思います。短いスクリプトケースは、インラインスクリプトの（唯一の）防御可能なケースです。
実際、インラインJavaScriptを使用するのはかなり確かなケースがあります。jsが十分に小さい場合（1行の場合）、次の2つの要因があるため、JavaScriptをインラインで使用する傾向があります。
常に外部スクリプトを使用する必要があるもう1つの理由は、コンテンツセキュリティポリシー（CSP）への移行を容易にするためです。CSPのデフォルトでは、すべてのインラインスクリプトが禁止されているため、サイトはXSS攻撃に対してより耐性があります。
JavaScriptを外部に保つという点について：
ASP.NET 3.5SP1は最近、複合スクリプトリソースを作成する機能を導入しました（jsファイルの束を1つにマージします）。これのもう1つの利点は、Webサーバーの圧縮がオンになっているときに、1つのわずかに大きいファイルをダウンロードすると、多くの小さいファイルよりも圧縮率が高くなります（httpオーバーヘッド、ラウンドトリップなども少なくなります）。これにより、最初のページの読み込みが節約され、ブラウザキャッシュが上記のように作動します。
ASP.NETはさておき、このスクリーンキャストでは、利点について詳しく説明しています。http： //www.asp.net/learn/3.5-SP1/video-296.aspx