26

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ファイルに保持し、 inlineJavaScriptを介して関数を呼び出す場合、現在のページで必要な関数のみを呼び出すことができます:

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

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

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

4

9 に答える 9

39

キャッシュできないため、静的リソース(この場合はインライン JavaScript)をインライン化することはお勧めしません。

静的リソースをキャッシュすると、ページの読み込みサイズが減少し、ページの読み込み速度が向上します。ただし、回避する必要がある追加の HTTP 要求が発生します。

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

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

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

于 2013-09-25T10:50:39.563 に答える
3

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

getElementsByClassNameサンプル コードをタイミングを合わせてテストし、JavaScript が繰り返し実行されるのにかかる時間を確認できます。

(26 個の関数が異なるクラス名の要素を探しているとしても、それほど時間はかからないに違いありませんが、パフォーマンスに関しては、常に最初に測定します。)

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

ただし、ページがロードされたときに発生するすべてのことを覚えておく価値があります。

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

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

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

于 2013-09-25T10:51:57.093 に答える
1

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

インラインの場合:

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

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

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

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

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

于 2013-09-25T10:52:32.087 に答える
0

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

于 2013-09-25T19:31:23.183 に答える