2011-01-22 2 views
0

私は3ページのサイトを持っています。異なるページや読み込み用に異なるjsファイルをロードしますか?

ページ1:JS
の19キロバイト ページ2:JS
の26キロバイト ページ3:総JS
の10キロバイト:JS

これらのJavaScriptファイルは非あるの55キロバイト繰り返すと、ページ1に必要なJSがページ2に必要ではなく、有効期限のヘッダーが1か月設定されていることを意味します。

まだこれらのファイルをロードするにはどうすればよいでしょうか。ページごとに別々のファイルをロードするか、これらをすべてロードする必要がありますか?

答えて

2


しかし、スピードアップするためには、トリックをすることができます:ユーザーが少しでも(i donno、少なくとも5秒)ページを読み込んだ後に、特定のページのスクリプトを読み込んで、他のページをリモートに追加することができます。こうすることで、クライアントのブラウザに他のキャッシュ・コピーを作成させることができます.jsファイルでは不要です。また、domオブジェクトの作成後にロードされるため、ページのレンダリングが遅くなることはありません。
"addScript"関数を追加し、ドキュメントの読み込みが完了したら "addScript"呼び出しを行う必要があります。 最初のjs(最初のページ)は、次のようになります。

 
function addScript(jsUrl){ 
    var s = document.createElement('script'); 
    s.setAttribute('type','text/javascript'); 
    s.setAttribute('src',jsUrl); 
    document.getElementsByTagName('body')[0].appendChild(s); 
} 
window.onload = function(){ 
    addScript('mySecondScript.js'); 
    addScript('myThirdScript.js'); 
} 
他のページを読み込むと、対応するjsファイルがブラウザのキャッシュから取得されるため、即座に読み込まれます。

+0

ありがとう、私はさらにそれを拡張しました。私は、jsファイルの配列を作成し、ユーザーのページに基づいて、最初にファイルをロードし、休止するためのアイドル時間にファイルをロードします。 – Shishant

0

GoogleのClosure Compilerを「高度な最適化」に設定して1つのJSファイルにまとめると、一連のキャッシュ・ディレクティブで1回ロードされます。上級者向けのClosure Compilerを使用する場合は、HTMLファイルにインラインJavaScriptがないことを確認する必要があります(これは一般的には良い方法ではありません)。なぜなら、関数と変数名変数名)は後で同じではありません。

0

55kbはそれほど多くはありません。ただし、ページ1とページ3のコードを処理する必要がある場合は、更新するのが難しい場合があります。また、大規模なjavascriptファイルのように聞こえるコードを縮小してみましたか?

0

説明したように、別々にロードする必要があります。

ユーザーがすべての3ページに移動していることが保証されている場合は、それらを組み合わせてください。彼らが通常1つのページに移動する場合、3つすべてを読み込むのは無駄です。

しかし、55kはそれほど大きくはありませんが、モバイルブラウザやダイヤルアップによる影響も考慮してください。

圧縮を最小限に抑えてJSを最大限に抑えますが、必要がない限りファイルをロードしないでください。