11

サイトのフロントページが読み込まれるのを待ってから、サイトの他のページで必要になる可能性が高いとわかっているCSSファイルとスクリプトファイルを事前に読み込む効率的な方法があるかどうか知りたいです。

サイトのフロントページをできるだけ速くしたい（無駄のない、平均的な）。ユーザーがすぐにリンクをクリックしない可能性があります。アイドル時間が発生する可能性が高いため、これは外部アセットの一部をプリロードするのに適した時間のようです。プリロードにより、それらはキャッシュされます。ユーザーが別のページをクリックした場合、必要なリクエストはコンテンツと、場合によっては一部の画像などのみです。

誰かがこれをしましたか？それは悪い考えですか？それを実装するためのエレガントな方法はありますか？

4

7 に答える 7

7

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

読み込みたい他のリソースを含むページに IFRAME を配置することもできますが、その上に CSS を配置して非表示にします...

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

これをページの最後に配置すると、ページの残りの部分の後にロードされると思います。そうでない場合は、Javascript と setTimeout を使用して、ページの読み込み後に IFRAME を実際に作成できます。

于 2009-06-29T18:43:09.180 に答える
4

人々が提唱している隠された iFrame のアイデアはうまく機能します。

ただし、ランディング ページのページ読み込み時間も優先される場合は、ページの読み込みが完了したら、javascript で iFrame を動的に作成する必要があります。

于 2009-06-29T18:46:15.057 に答える
2

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

すべてを事前にロードすると、ユーザー エクスペリエンスは向上しますが、帯域幅の消費量が非常に多くなります。これは、ユーザーがロード済みのものをまったく使用しない可能性があり、非常に非効率になるためです。

何もプリロードしない場合、帯域幅は最小限で使用され、ユーザーは必要なものだけをロードします。

于 2009-06-29T18:43:28.540 に答える
1

それらをブラウザのキャッシュにロードしたいだけなら、非表示の iframe 内のドキュメントを介して実行できると思います。

于 2009-06-29T18:43:36.700 に答える
1

私はGarethに同意します.iframeを動的に作成します. このコードは、ランディング ページの最後に配置する必要があります。

例えば：

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

キャッシングに関しては、それは本当にあなたの設定に依存します。しかし、Yahoo! Web サイトは良いスタートになるはずです: http://developer.yahoo.com/performance/rules.html#expires 手短に言うと、静的ファイル (CSS、画像、場合によってはスクリプト) を 1 年間保存することをお勧めします。有効期限。このようにして、クライアントがフェッチしたものはすべて、新しいバージョンをチェックすることなくブラウザのキャッシュに保持されます.

ファイルを変更する必要がある場合:

  • 画像用に別のファイル (別のファイル名) を作成する
  • CSS とスクリプトは、最後にバージョン/日付番号を追加できます。

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

乾杯！

于 2009-06-29T18:55:56.020 に答える
0

このように任意のファイル (CSS、画像など) をプリフェッチすることができます。Yahoo パフォーマンス ルールは優れた出発点です。これが初めてのパフォーマンスの最適化である場合は、間違った場所から始めている可能性があります。これは間違いなく大きなトレードオフ (帯域幅の増加) を伴う最適化ですが、「HTTP 要求の最小化」などの他の最適化では、コストが小さくなり、はるかに大きな利益が得られる可能性があります。

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

于 2009-06-29T18:55:16.037 に答える
0

ユーザーがメインページにアクセスしてから別のページに移動するまでにかかる時間を分析する必要があると思います。

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

于 2009-06-29T18:55:42.870 に答える