2009-06-29 30 views
11

サイトのフロントページが読み込まれるまで待ってから、私が知っているCSSとスクリプトファイルをあらかじめ読み込むのが効率的な方法があるかどうか不思議ですサイトの他のページにはおそらく必要になるでしょう。他のページの外部ファイル(CSS、JavaScript)の事前読み込み

サイトの先頭ページをできるだけ早く(リーンで平均的)にします。ユーザーがすぐにはリンクをクリックしない可能性があります。アイドル時間がある可能性が高いため、外部資産の一部をあらかじめロードすることが適切な時期のようです。プリロードすると、それらがキャッシュになるはずです。ユーザーが別のページをクリックすると、必要な唯一の要求はコンテンツと場合によってはイメージなどになります。

これは誰でも行いましたか? 悪い考えですか? これを実装するエレガントな方法はありますか?

答えて

7

これは興味深い考えです.Javascript(少なくともCSS部分)を介して実行できるかどうかはわかりません。

あなたがロードする他のリソースとページ上のIFRAMEを置き、それはそれを隠すためにいくつかのCSSを置くかもしれない

...

.preload { 
    position : absolute; 
    top  : -9999px; 
    height : 1px; 
    width : 1px; 
    overflow : hidden; 
} 

あなたはページの最後にこれを置く場合私はそれがの後にの後にロードすると思うでしょう。そうでなければ、JavascriptとsetTimeoutを使用して、ページがロードされた後に実際にIFRAMEを作成することができます。

+0

私はjqueryの中で$(ウィンドウ).LOAD(XXX)を使用して、それを試してみました。それは素晴らしい仕事をした。 iFrameのアイデアをありがとう! いくつかの巨大な画像がプリロードされ、次のページがすぐに読み込まれます。私はこれに用途を見ることができた! –

+0

これはまさに私がこの答えを見る前にやろうとしていたことです。ニースのトリック! –

2

帯域幅の決定はあなた次第です。

すべてをあらかじめロードしておくと、負荷がかかるものを使用していない可能性があるため、ユーザーエクスペリエンスは向上しますが、は非常に高いです。

何も事前にロードしていない場合、帯域幅は最低で使用され、ユーザはだけを必要とします。をロードします。

1

ブラウザのキャッシュにロードするだけの場合は、非表示のiFrameのドキュメントを使用して行うことができます。

4

人々が主張している隠されたiFrameのアイデアはうまくいくでしょう。

リンク先ページのページ読み込み時間も重要な場合は、ページの読み込みが完了したらjavascriptでiFrameを動的に作成することです。

0

このように任意のファイル(CSS、イメージなど)を先読みすることができます。問題は、小さな戻り値と帯域幅の追加によって、現在最適化されているかどうかです。 The Yahoo performance rulesは優れた出発点です。これが最初のパフォーマンスの最適化であれば、間違った場所で開始する可能性が高いです。これは間違いなく、大幅なトレードオフ(帯域幅の拡大)を伴う最適化ですが、「HTTPリクエストの最小化」などの他の最適化ではコストが低く、より大きな利益をもたらす可能性があります。

ブラウザ間で互換性のある方法でこれを行うには、基本的にページのonloadイベントにコードを追加して、anなどのDOMオブジェクトを作成し、そのsrcをプリフェッチするURLに設定します。すべての訪問者の大部分がおそらく最初のページにアクセスするだけなので、事前にロードしたファイルを要求したことはありません。私はプリフェッチされたファイルの要求と帯域幅が数倍に増えて、この結果のようにプリロードすることを見てきました。

0

私はメインページに着陸した後、別のページに移動するのにかかる時間を分析する必要があると思います。

メインページのどのリンクが最も頻繁に続いているかを確認し、メインページ/ OnLoadイベントで、最も可能性の高い次のリンクのプリロードコードで補助関数を実行するタイマー関数setTimeOutを起動します。

1

私はGarethに同意します。私はiframeを動的に作成しました。このコードをリンク先ページの最後のものとして使用することをおすすめします。

例えば:キャッシュ用として

.... 
    <script type="text/javascript"> 
    preloadContent(); 
    </script> 
</body> 
</html> 

、本当にあなたの設定に依存していること。しかし、Yahoo!簡単に言えば、良いテクニックは、静的ファイル(CSS、画像、潜在的にはスクリプト)を1年間の有効期限にすることです。こうすることで、クライアントが取り出したものは、新しいバージョンをチェックすることなくブラウザのキャッシュに保持されます。

あなたはは、ファイルを変更する必要がない場合:CSSとスクリプトが終わりバージョン/日付の番号を追加することができ、画像

  • に異なるファイル(すなわち、異なるファイル名)を作成します

    • を。

    これは、クライアントが古いコンテンツを使用しないことを保証します。

    乾杯!あなたが「jqueryのプリロードを」GOOGLE場合

    Filament Group article

    は、実際には、他のjQueryベースのソリューションがいくつかあります:

  • 2

    フィラメントグループでは、CSSファイルから画像をプリロードします素敵なjQueryのスクリプトを持っています。

    8

    隠しiframe内のすべてをロードすることは唯一の方法ではありません。 Stoyan StefanovによるJSとCSSファイルのプリロード/プリフェッチには最適化のための2つの素晴らしい投稿があります。ここで

    はリンクです:

    http://www.phpied.com/the-art-and-craft-of-postload-preloads/

    http://www.phpied.com/preload-cssjavascript-without-execution/

    私は個人的にAJAXのようにもたくさん近づきます。あなたがクロスドメインのものを取得しない限り、その素晴らしいときれいに動作します。

    (私はまだそれを試していないのに。)、第2リンクでの彼の最新の技術は、非常に有望に見える

    関連する問題