されることがあります。インライン対外部Javascript?

StackOverflow https://stackoverflow.com/questions/138884

質問

知りたいと思い時には外部スクリプト書きたインライン、htmlコードは、性能、メンテナンスのしやすさという.

何をするのが一般的。

実世界シナリオによって複数のhtmlページを必要とするクライアント側の形態バリデーションを実施します。これを使っているjQueryプラグインを含むこれらすべてのページ。その質問は、I:

  • のビットコードの設定このスクリプトをインライン?
  • すべてのビットを一つのファイルのウエイトを占めているこれらのhtmlページ?
  • などの各ビットを別の外部ファイルは、それぞれのhtmlのページに表示すべき事は何か？

感謝。

役に立ちましたか？

解決

この回答が最初に投稿された時点（2008年）では、ルールは単純でした。すべてのスクリプトは外部である必要があります。メンテナンスとパフォーマンスの両方。

（パフォーマンスが必要な理由は、コードが分離されていると、ブラウザーで簡単にキャッシュできるためです。）

JavaScriptはHTMLコードに属しておらず、特殊文字（<、>など）が含まれていると、問題が発生することもあります。

最近、Webのスケーラビリティが変更されました。要求の数を減らすことは、複数のHTTP要求を行うレイテンシーのために、有効な考慮事項になりました。これにより、答えがより複雑になります。ほとんどの場合、外部JavaScriptを使用することをお勧めします 。しかし、特定のケース、特に非常に小さなコードの一部では、それらをサイトにインライン展開します<！>＃8217; s HTMLは理にかなっています。

他のヒント

保守性が外部を保持する理由であることは間違いありませんが、構成が1行（または一般にこれらのファイルを外部にするために得られるHTTPオーバーヘッドよりも短い）である場合、それらをインラインに保つ方がパフォーマンスの面で優れています。 HTTPリクエストごとに、実行時間とトラフィックの観点からオーバーヘッドが発生することを常に覚えておいてください。

これは当然、コードが数行より長く、実際には単一のページに固有ではない場合、これらはすべて無関係になります。そのコードを再利用できるようにしたい瞬間、それを外部にします。そうでない場合は、そのサイズを見て決定します。

JavaScriptの外部化は、yahooのパフォーマンスルールの1つです。 http://developer.yahoo.com/performance/rules.html#external

スクリプトを常に外部化するという厳格なルールが一般的には良い方法ですが、場合によっては、スクリプトとスタイルの一部をインライン化することもできます。ただし、パフォーマンスを向上させることがわかっているものだけをインライン化する必要があります（これを測定したため）。

だだけの性能もアドバイスをこのスレッドが平行かであり、これが十分でないと間違いのスパでは、できることを前提とするページではなく、JSのコードです。っと多くの時間を最適化ススパのページのロード時間を検証することをこれらの結果は異なるブラウザを推奨いたします。のボードのパフォーマンス向上による協奏htmlできる非常にドラマチックとなっています。

ベストな性能を得るために、まいと思っていページとして二段ロケットこの二つの段階をほぼ対応し <head> や <body> 位相がいのだということになるだろうとして <static> や <dynamic>.の静的部分には基本的に文字列定数で故-パー-メッツの損失の対応としてのパイプが不適切と判断ができます。このとき少しトリッキーをご利用の場合多くのミドルウェアを設定するクッキー（設定される前に送るhttpコンテンツ)が、原則としてでフラッシング応答のバッファば飛込孔のコード(カミソリ、phpなど)で、サーバーにコピーします。これは音がしにくいが、それだけなんですけどねを説明するので間違っているのは、それの近くるようにします。として想像できているかもしれませんね、この静的部分にはすべて含まれていまjavascript inlined、minified.このように

<!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+遅延の後に接続します。を想定したサーバーを合理的に近いこの遅延が間20msに60ms.ブラウザでの閲覧を開始処理ここではなく、処理時間は、通常、支配送迎時間要因は20名以上、お償ウィンドウのサーバ側での処理の <dynamic> 部分です。

で入光時50msのブラウザchrome、残りも20%遅めのインラインjquery+signalr+角+ngアニメーション+ngタッチ+ng路+lodash.たコーヒーメーカーの中に、そのものです。多くのwebアプリの少ないコードによりすべての人に人気の図書館としてもいいかなければ、このようなwin遅延+100msの処理をクライアントこの遅延勝からの移転のチャンク).時には第二のチャンクが到着した加工全jsのコードやテンプレートまで実行中のド変換.

するオブジェクトでこの方法は、直交するinlining概念がない。場合ではなく、inliningへのリンクは、cdnやご自分のサーバーのブラウザが他の接続方法および遅延実行します。この実行は基本的に自由です（サーバ側で話をしているデータベースを選択することが明らかにこれらすべてのジャンプうようなジャンプです。があったとしたらブラウザゴと外部js実行スピードが速くなりま測定できる因子を支配.私の測定を示すことを要求性能を殺ことができる。

働いていくの最適化のスパアプリとなります。この普通の人々の考えるデータ量には大きな取引が真実の遅延実行多くを占めてきた。のminified図書Iに掲載の追加は、最大300kbのデータことになるだけで68kb gzipped、200msダウンロードに2mbit3g/4gの一つと考えられているが、その遅延のように同じ電話チェックかった場合、同じデータキャッシュ済みの場合でも、またプロキシキャッシュで、モバイル遅延税（電話へのタワーのレイテンシー)まだ適用されます。一方、デスクトップ接続の少ない最初のヒップホップの遅延は、通常、より高い帯域幅ます。

は、現在（2014年）でインラインすべてのスクリプト、スタイルやテンプレート。

編集（2016年度）

していJSの応用が進むにつれ、もう今のスタックの3+メガバイトのminifiedコードではなくなってきてい少なくとも共通ライブラリできるようになりinlined.

i 特定のページ、短いスクリプトケースインラインスクリプトの（唯一の）防御可能なケースです

実際には、インラインjavascriptを使用する非常に堅実なケースがあります。 jsが十分に小さい場合（1行）、次の2つの要因により、javascriptインラインを好む傾向があります。

  • 地域。 JavaScriptの動作を検証するために外部ファイルをナビゲートする必要はありません
  • AJAX 。 AJAXを使用してページの一部のセクションを更新している場合、バインド方法に応じて、そのセクションのすべてのDOMハンドラー（onclickなど）が失われる可能性があります 。たとえば、jQueryを使用すると、 live または delegate メソッドでこれを回避しますが、jsが十分に小さい場合は、インラインに配置することをお勧めします。

常に外部スクリプトを使用する必要がある別の理由は、コンテンツセキュリティポリシー（CSP）への移行を容易にするためです。 。 CSPのデフォルトでは、すべてのインラインスクリプトが禁止されているため、サイトはXSS攻撃に対してより耐性があります。

必要なコードを見て、必要な数の個別のファイルに分割します。すべてのjsファイルには、1つの<！> quot; logical set <！> quotのみが含まれます。機能などの。すべてのログイン関連機能用の1つのファイル。

次に、各htmlページのサイト開発中に、必要なもののみを含めます。 サイトをライブで使用する場合、ページに必要なすべてのjsファイルを1つのファイルに結合することで最適化できます。

インラインjavascriptに対して提供できる唯一の防御は、.net MVCで厳密に型指定されたビューを使用する場合、javascriptの途中でc＃変数を参照できることです。

3つの考慮事項：

  • 必要なコードの量（ライブラリは一流の消費者である場合があります）
  • 特異性：このコードは、この特定のドキュメントまたは要素のコンテキストでのみ機能しますか？
  • ドキュメント内のすべてのコードは、ドキュメントを長くする傾向があるため、遅くなります。 SEOの考慮事項に加えて、内部スクリプトを最小限に抑えることが明らかになります...

外部スクリプトも、Firebugを使用して簡単にデバッグできます。私はJavaScriptを単体テストし、それをすべて外部から支援するのが好きです。 PHPコードとHTMLでJavaScriptを見るのは嫌です。

JavaScriptを外部に保つという点：

ASP.NET 3.5SP1は最近、複合スクリプトリソースを作成する機能を導入しました（多数のjsファイルを1つにマージします）。これのもう1つの利点は、Webサーバーの圧縮がオンになっている場合、わずかに大きいファイルをダウンロードすると、多くの小さいファイルよりも圧縮率が高くなることです（httpオーバーヘッド、ラウンドトリップなども小さくなります）。これにより、最初のページの読み込みが節約され、上記のようにブラウザのキャッシュが開始されます。

ASP.NETは別として、このスクリーンキャストでは利点について詳しく説明しています。 http://www.asp.net/learn/3.5-SP1/ video-296.aspx

外部スクリプトのもう1つの隠れた利点は、 jslint などの構文チェッカーを使用して簡単に実行できることです。これにより、多くの悲痛で見つけにくいIE6のバグからあなたを救うことができます。

あなたのシナリオでは、ページ間で共有されている1つのファイルに外部のものを書き込むのが良いと思われます。上記のすべてに同意します。

初期のプロトタイピング中は、コードをインラインに保ち、高速な反復を実現しますが、本番環境に到達するまでにすべて外部コードにするようにしてください。

すべてのJavascriptを外部に配置できない場合、悪いデザインが手元にあるため、データとスクリプトをリファクタリングする必要があると言ってさえいればいいと思います

Googleはページのランキングの測定値に読み込み時間を含めています。多くのインラインを使用すると、スパイダーがページをクロールするのに時間がかかります。いずれにしても、異なる戦略がランキングに影響を与える可能性があります。

スクリプトは複数のページで共有する必要がないため、単一ページのWebサイトを作成する場合はインラインを使用する必要があると思います

インラインjsは常に維持が難しいため、常に外部Jsを使用してください。

さらに、開発者の大半がjsを外部で使用することを推奨しているため、専門的には外部jsを使用する必要があります。

私自身は外部jsを使用しています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top