JavascriptファイルをHTMLページに含める - ブラウザで何が起こるのですか？

Question

これはブラウザ依存の質問かもしれません - 私は10のJavascriptファイルといくつかのHTMLページがあるとします。 HTML pageAにはJS1.jsとJS3.jsだけが必要であり、同様にHTML pageBにはJS4.jsとJS1.jsが必要であるとします。私は、すべてのHTMLページに10のjavascriptファイルをすべて含めると何が効果があるのか​​知りたいですか？それはブラウザによるメモリ消費に直接関係しますか？

私は特にYUIのjavascriptライブラリでこの問題に直面しています。それを動作させるためなどのデータテーブル、イベント、コンテナ、カレンダー、DOMイベントのようないくつかのコンポーネントがありますが、彼らも含まれている順序は、DOMイベントJSが休みの前に含まれるべき例えばlot-を重要でているようです。この混乱を避けるために、これらのjsファイルをすべてのHTMLページに含まれるヘッダファイルに含めることを考えました。

私が心配していることは、メモリが肥大し、パフォーマンスの問題が発生する可能性があることです。

おかげで、彼らはロードして実行するまで -Keshav

Answer 1

ダウンロードしてキャッシュに入れても、ページに読み込むスクリプトは、残りのページを読み込む前に解析する必要があります。その意味でメモリのペナルティがあり、スクリプト内の何かがレンダリングを大幅に遅らせる可能性がまだあります。

しかし、YUIなどの良心的に設計されたライブラリの場合、私は解析時間を最小限に抑えることが期待されます。

ページの最後にすべてのスクリプトを読み込むことができれば、JavaScriptの実行によってブロックされる前にページ全体がレンダリングされるため、パフォーマンスが大幅に向上し、サイトのスピードが大幅に向上します。

Firebug Net panelとYSlow extensionを調査して、ウェブサイトの特定の掲載結果の統計情報を取得することをおすすめします。

Answer 2

外部スクリプトは次のHTMLの表示を遅らせる。..同じであなたの提案を入力してください。最初のページが読み込まれた後は、既にキャッシュされているため、影響はずっと少なくなりますが、ブラウザでは時折遅延が発生する新しいバージョンを時々チェックします。私は、スクリプトの数を制限し、スクリプトタグを可能な限りページの最後に移動しようとします。ページが既に完全に表示されている場合、ユーザーはスクリプトの読み込み遅延に気付かないでしょう。

Answer 3

Scriptaculousは、js依存関係を処理する優れた方法を実装しています。あなたはそれをチェックし、それを "再実装"できると思います。 ; Dメモリ肥大化とパフォーマンスの問題については

...限り、あなたのJSはたくさん漏れないよう（YUIはおそらくない）、それはあなたのページを行いますが、メモリは、問題の多くではありません特にヘッダーにロードされている場合は、ロードが遅くなります。

Answer 4

スクリプトが何も実行しない場合、パフォーマンスには影響しません。 明らかに、最初のページは読み込みが遅くなりますが、残りのページはキャッシュされるためすべてのスクリプトを読み込む必要はありません。だから、次のページが速く

ヒントロードします：

1）だけ）を閉じるBODYタグの前に（ページの一番下にあるスクリプトをロードします。

2）は、スクリプトを読み込むの非ブロック方法を使用してください。これは私が使っているものです。

<script type="text/javascript"> 

function AttachScript(src) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    document.getElementsByTagName("body")[0].appendChild(script); 
    script.src = src; 
} 
AttachScript("/js/jquery.min.js"); 
AttachScript("/js/ndr.js"); 
AttachScript("/js/shadowbox.js"); 
AttachScript("/js/libraries/sizzle/sizzle.js"); 
AttachScript("/js/languages/shadowbox-es.js"); 
AttachScript("/js/players/shadowbox-img.js"); 
AttachScript("/js/adapters/shadowbox-jquery.js"); 

:-(

Answer 5

メモリ消費かかわらソースのWebページが見つかりません：その後、メモリ消費とパフォーマンスの問題があるべき

は、スクリプトがよく書かれていると仮定すると、公称。彼らは、それらのすべてをダウンロードする必要がありますので、一度にすべてのスクリプトを含むとのあなたの最大の問題は、ユーザー体験を通じて初めてでの待ち時間になり、あるいは変更を行う場合 1ヒット。私はあなたが一度だけで、あなたがページごとに必要とするスクリプトではなく、すべてのスクリプトを含めるべきだと思います。

Windowsのタスクマネージャやプロセスなどの簡単なツールを使用して、メモリ/プロセッサの使用状況を監視したり、Firebug for FireFoxのようなプラグインを使用して、自分自身の影響を評価することができます。

スクリプトファイルをできるだけ小さくするために、minificationという名前のファイルを調べることもできます。

依存性：

いくつかのスクリプトが他のスクリプトで機能性に依存してもよいようスクリプトを含める順序は重要です。したがって、あるスクリプト内のコードが実行しようとしたときに、それがダウンロードされていない別のスクリプト内のコードを必要とする場合、それは失敗します。私のアドバイスは、スクリプトファイルの中のそれらの依存関係を実際に一度にダウンロードするのではなく、実際に理解することです。

Answer 6

YUIコンフィギュレータを使用して、必要なファイルの組み込みと注文の判断、およびYahoo！ CDNコンボサービスを使用して、すべてのYUIファイルを単一のスクリプトタグに結合します。 HTMLページへの

http://developer.yahoo.com/yui/articles/hosting/

Answer 7

外部資産は通常、ブラウザによってキャッシュされます。外部アセットは、画像、CSS、JavaScriptなど、HTMLから要求されるものです。だから、あなたがあなたのユーザーに一度の大規模なダウンロードのヒットを強制されている前面にすべての10のスクリプトファイルを読み込む場合。この後、ファイルのタイムスタンプを変更しない限り、ユーザーはスクリプトを再度ダウンロードする必要はありません。

あなたのページは必要なものだけを使用します。特定のページがjs4.jsとjs5.jsを要求すると、それらのファイル内のすべての関数は、HTMLから最初に要求された順にインタプリタにロードされ、次に、それぞれが指定された順序でインタプリタにロードされます。それらのファイル。名前空間の競合がある場合、インタプリタにロードされたものが最後に勝ちます。ページがブラウザからアンロードされると、インタプリタは機能をクリアします。

効率を上げるために、サーバーサイドインクルードプロセスを使用して各jsファイルを読み込み、各ファイルの内容を新しい単一のjsファイルに含めることをお勧めします。これにより、サーバーへのHTTP要求数が削減され、HTTPヘッダーおよびGET要求に関して、ユーザーに極端な帯域幅リソースが保存されます。また、この新しい1つのスクリプトファイルの要求をHTMLのbodyタグの直前に置きます。スクリプトをダウンロードすると、IEでパラレルダウンロードがブロックされるため、ページ内のできるだけ小さいポイントでスクリプトを読み込みたいとします。

Answer 8

PHPを使っていくつかのjavascriptファイルを必要なものすべてを含む1つの大きなJSファイルとして渡すことができます。追加のパフォーマンス向上のために、ブラウザがgzippedを送信するだけでなく、ローカルにファイルをキャッシュするようにすることもできます（ブラウザが、ob_start（ "ob_gzhandler"）;などのようなものを使用してエンコーディングをサポートしている場合）。 gzipエンコーディングを使用すると、送信しているメインのJSファイルのファイルサイズを大幅に減らすことができます。私は最近自分のウェブサイトでこれを行う必要があり、それはJSファイルとCSSファイルの両方の魅力のように働いています。

http://www.ejeliot.com/blog/72

そのチュートリアルの指示に従うことによって、あなたのJSファイルは一度だけ送信され、クライアントのマシン上のブラウザはまた、その後のすべての訪問のパフォーマンスを向上させる格納されているローカルコピーを保持することに注意してください。

また、Google Codeでホストする必要がある「Minify」のグーグルグーグルを検討してください。