web-dev-qa-db-ja.com

インラインJavaScriptが悪いのはなぜですか？

すべてのページに含まれているJSファイルにすべてのコードを配置して、インラインJavascriptコードを回避することを常にお勧めします。これが重いページでパフォーマンスの問題を引き起こさないかどうか疑問に思います。

たとえば、このような関数が数十個あると想像してください。

function function1(element){
var el=document.getElementsByClassName(element);
var size=el.length;
if(size==0) return;
for(i=0;i<size;i++){
// the process
}
}

すべてのページで、関数を実行して、HTMLに対応する要素があるかどうかを確認する必要があります。

window.onload = function(){
function1('a');
....
function26('z');
};

ただし、すべての関数を外部のJSファイルに保持し、インラインのJavaScriptを介して関数を呼び出す場合、このページで必要な関数のみを呼び出すことができます。

<script type="text/javascript">
window.onload = function(){
function6('f');
};
</script>

パフォーマンスの観点から、インラインJavascript（もちろんベストプラクティスではありません）を介して関数を呼び出し、多くの関数の呼び出しを回避することは有益ではありませんか？ 、ページに必要ないものはどれですか？

もちろん、これは関数だけに限定されません。ウェブサイト全体に多くのaddEventListenerがあり、それらは不要なすべてのページで起動されます。

javascriptperformancedom-eventsunobtrusive-javascript
16
Googlebot

静的リソースをインライン化することはお勧めしません（あなたの場合、インラインjavascript）それらをキャッシュすることはできません。

静的リソースをキャッシュすると、リピーターのページ読み込みのサイズが小さくなり、ページの読み込み速度が向上します。ただし、追加のHTTPリクエストが発生します 回避する必要があります 。

静的リソースが非常に小さいため、HTTPリクエストと比較して追加のサイズが無視できる場合は常に、そのリソースをインラインに保つことをお勧めします。

通常、少量のスクリプトをインラインに保ちながら、JavaScriptライブラリを外部（キャッシュ可能な）ドキュメントに保持することをお勧めします。

つまり、見出しに応じて–インラインJavaScript自体は悪くありません。リソースをキャッシュするHTTPリクエストの価値があるかどうかはバランスです。

30
Nils Kaspersson

  • インラインjsを回避することは、パフォーマンスベースではありません...しかし、保守性と、プレゼンテーション層（html）をコントローラー層（js）から分離することについてです。

  • 異なるページにインラインjsがあると、プロジェクトの規模が大きくなるにつれて、あなたや他の人のために維持することが難しくなります。

  • さらに、個別のjsファイルを使用すると、再利用性とモジュラーコード設計を促進できます。

  • hTMLをクリーンに保ち、複数のテンプレートではなく、jsエラーが発生したときにどこを見ればよいかがわかります。

17
Abhidev

控えめなJavaScriptについて読む必要があります http://en.wikipedia.org/wiki/Unobtrusive_JavaScript 。

各ウェブページのアセットディレクトリにすべてのJavaScriptファイルをロードしないための他の解決策があります。requirejsと呼ばれるもので、チェックアウトする必要があります http://requirejs.org/ 。

さらに、一般的な経験則として、ページの読み込み時にすべてのイベントリスナーを追加するべきではありません。存在しないDOMオブジェクトについてはどうでしょうか。それはjavascriptエラーをスローし、通常よりもコードを壊します。

5
gmaliar

ページで不要なJavaScriptを実行すると、そのページの読み込みが遅くなる可能性があります。実行されているJavaScriptによって異なります。

サンプルコードのタイミングを調整し、JavaScriptがgetElementsByClassNameを繰り返し実行するのにかかる時間を確認することでテストできます。

（クラス名が異なる要素を検索する関数が26個ある場合でも、それほど時間はかからないでしょうが、パフォーマンスについては、常に最初に測定してください。）

実行時間が問題になる場合は、JavaScriptを記述して、ほとんどが1つのファイルにまとめることができますが、インラインJavaScriptから実行する関数は、のonloadイベントを介して実行するのではなく、必要なページに公開します。 JavaScriptファイル。

ただし、ページが読み込まれたときに発生する必要があるすべてのことを覚えておく価値があります。

  1. ブラウザは、キャッシュからページをフェッチするか、HTTPリクエストを送信して、ページがキャッシュされてから変更されたかどうかを確認したり、ページ自体のHTTPリクエストを送信したりします。
  2. ブラウザはページを解析してレンダリングし、外部JavaScriptのフェッチと実行を一時停止し、解析とレンダリングと同時にスタイルシートと画像をフェッチします。
  3. ブラウザは、ドキュメント対応で実行するように設定されたJavaScriptを実行します。
  4. ブラウザは、ページの読み込み時に実行するように設定されたJavaScriptを実行します。

実行速度が遅いJavaScriptを作成することは確かに可能ですが、JavaScriptをインラインにすることでページサイズを大きくするよりも、JavaScriptを外部ファイル、つまりユーザーのブラウザーのキャッシュに含める方が全体的に優れている可能性があります。一般に、ネットワークはJavaScriptの解析/実行よりもはるかに遅い傾向があります。

しかし、これが最も重要なポイントであるため、これをもう一度言います。これは、コードによってすべて異なります。パフォーマンスを良好に保ちたい場合、最初と最後の行動はそれを測定することでなければなりません。

2
Paul D. Waite

jsコードを配置する際に留意する必要のあるさまざまなケースがあります。

インラインの場合：

  1. 何かをすばやく変更する必要がある場合は、外部ファイルに移動する必要がないため、ローカル性が向上します

  2. ページの一部の要素でAJAXを使用している場合、mayそのセクションのすべてのdom要素onclickなどを失う可能性があります、それは明らかにそれらをバインドした方法に依存します。たとえば、jQueryを使用して上記の問題を回避する場合は、ライブまたはデリゲートを使用できます...しかし、jsが十分に小さい場合は、インラインに配置する方が望ましいことがわかります。

今、元のための他の理論があります

Javascriptの外部化は、yahooのパフォーマンスルールの1つです。

http://developer.yahoo.com/performance/rules.html#external

1
Sunil Verma

インラインスタイル/スクリプトはhtmlコンテンツと混同され、区別が難しくなる可能性があります。 Web開発で保守可能なコードを使用するための鍵の1つは、コードを書かなかった人でも簡単に読み取れるコードを書くことです。スクリプトタグをHTMLに混在させると、残りのコードに影響を与えている関数を見つけるのが非常に難しくなる可能性があります。 Javascriptを.jsファイルに入れ、StylesをCSSファイルに入れると、コードがより読みやすくなります。

0
Timothy Trousdale

Jsをすべてのページにインライン化するとアプリケーションが重くなるため、外部jsを使用する必要があります。これには、各機能でjsコードを利用するのに役立つページが必要です。

0
Niklesh Jain