1

私は製品のウェブサイトを持っています。1 つのページに、サムネイルとすべての製品の簡単な説明を表示します。写真をクリックすると商品の詳細ページに飛びます。

ユーザーが「すべての製品」ページを見て選択しようとしているときに、「詳細な製品」ページの JavaScript と CSS の読み込みとキャッシュをブラウザに開始させる方法はありますか?

このプリロードとキャッシュは、速度が低下しないように、ページが完全にロードされた後にのみ開始する必要があります。

これを実装する方法に関する提案はありますか?

4

3 に答える 3

3

JavaScript フレームワーク (jQuery、protype など) を使用している場合は、単純なメソッドを使用して AJAX 呼び出しを行うことができます。そうでない場合は、JavaScript に慣れていない人にとっては少し混乱するようなコードを作成する必要があります。基本的な例はこちらです。

JavaScript を使用して HTML ページにスクリプトタグを追加すると、JS が含まれます。JS がコードを自動実行するように設定されている場合、それが発生することに注意してください。CSS の場合、おそらく唯一のオプションは、JavaScript を使用してファイルを取得するリクエストを送信することです (上記を参照)。CSS を含めることもできますが、元の CSS ファイルのスタイルが上書きされます。

事前にキャッシュする Web サイト:
Google や Yahoo のような大きなサイトを含む Web サイトは、説教を使用してパフォーマンスを向上させます。たとえば、Google はメイン ページに CSS スプライトhttp://www.google.com/images/nav_logo7.pngを、メイン ページだけでは完全に使用されていない他の CSS および JS ファイルと一緒に読み込みます。ほとんどの人は、本番環境で CSS ファイルと JS ファイルを 1 つのファイルに結合するだけで、これと同様のことを既に行っています。HTTP リクエストは、実際のコンテンツをダウンロードするよりも時間がかかります。Yahoo説教の一例はこちら

Yahoo は YSlow のヘルプでこれについて説明しています。

こちらのガイドラインの一部から抜粋:
エンドユーザーの応答時間の 80% がフロントエンドに費やされます。この時間のほとんどは、ページ内のすべてのコンポーネント (画像、スタイルシート、スクリプト、Flash など) のダウンロードに費やされます。コンポーネントの数を減らすと、ページのレンダリングに必要な HTTP リクエストの数が減ります。これは、ページを高速化するための鍵です。

開発中の編成、生産中の速度:
私が通常やろうとしているのは開発中です。必要に応じて JS ファイルを分割します (ただし、私の CSS はほとんどありません)。このデータを運用サーバーにプッシュするときは、コンパイラ (すべてのファイルを結合して縮小する単純なスクリプト) を実行し、それらをオンラインにします。

縮小/圧縮:
HTTP リクエストが悪であることを忘れないでください。圧縮された JavaScript ファイルと圧縮された CSS ファイルは非常に小さいため、メイン ページにそれより小さい画像があることはほぼ 100% 確実です。したがって、ページごとに分割することを心配するのは無意味です。実際には、それらを複数のページに分割する方がパフォーマンスが大幅に低下します。

CSS スプライト CSS スプライト
のポイントは、Web サイトのページに CSS を使用しておそらく 40 以上の画像があることです。ユーザーページの読み込みで40以上のHTTPリクエストがあり、大量のリクエストです。これはユーザーにとって悪いだけでなく、Web サーバーが処理しなければならない大量の要求でもあります。静的コンテンツ サーバーを使用しておらず、メイン ホストにある Apache のみを使用している場合、Web アプリケーションにサービスを提供できる可能性のある要求が Apache サーバーに読み込まれている可能性があります。画像を 1 つのファイルにまとめるか、少なくとも少数のファイルにまとめることで、これを減らすことができます。CSS の background-position プロパティを使用すると、驚くべきことができます。

ここで Yahoo の YSlow ガイドラインを読むことを強くお勧めします: http://developer.yahoo.com/yslow/help/#guidelines

于 2009-12-07T17:29:09.697 に答える
2

理論的には、後続のページからリソースへのアクセスを開始して、後でキャッシュで使用できるようにすることができます。

ただし、これは良い方法ではありません。特に、選択する可能性のあるすべての詳細ページのリソースをロードしている場合はなおさらです。そうすることで、ユーザーではなく、ユーザーの帯域幅がどのように使用されているかを判断する必要があると仮定します。彼らが同時に複数のことをブラウジングしたり、あなたのウェブサイトを見る以外に帯域幅を使って他のことをしたりしている場合、あなたは彼らの意図しない方法で帯域幅を使用しています.

詳細ページの読み込み時間を最適化する必要があるほど接続が遅い場合は、他のことを同時に行っていると接続が遅いと感じる可能性があります。

于 2009-12-07T17:31:48.957 に答える
1

ページのロードイベントで setTimeout を使用し、数秒のタイムアウトを設定してから、script タグと css タグをページに挿入します (次のページのもの)。

このようなもの：（urlはキャッシュしたいもののURLです）

    //cache a script
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(scriptTag);

    //cache an image:
    var img = new Image(); img.src = url;

    //cache a css
    var css= document.createElement("style");
    css.setAttribute("type", "text/css");
    css.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(css);
于 2009-12-07T17:29:51.570 に答える