4

この関数は、イメージのリストのサウンド オブジェクトを複製します。

問題は、オブジェクトが DOM で記述されている場合、ブラウザがサーバーにクエリを発行し、200 リクエストとしてロードすることです。ただし、何度も何度も 4 つの異なるサウンド ファイルしかロードしていません。したがって、ブラウザのキャッシュから 304 リクエストとしてロードする必要があります。

すべてのサウンド ファイルは最初に HTML で読み込まれ、次に複製されます。ページが更新されるたびに、HTML 内のサウンド ファイルは 304 リクエストを受け取り、キャッシュから読み込まれますが、複製されたファイルは (キャッシュからではなく) 200 リクエストで読み込まれます!

とにかく、ブラウザがリクエストをサーバーに送信してDOMにロードすることなく、これらのオブジェクトを複製することはできますか? 完全にクライアント側だけですか？データは既に HTML に 1 回書き込まれています。

これらのオブジェクトを複製するために、サーバーにリクエストをまったく送信しないことをお勧めします。50 を超えるクローンを作成するため、1 秒間に 50 のリクエストがサーバーに送信されます。過負荷。

var increment = 0;
$("img").each(function(i) { //loop for each item
    if (increment > 4){
        increment = 0;  
    }

    if (i != 0) {  //only clone if there are more than one 'img' items      
        $("#hover-" + increment)  //item to clone     
          .clone(true)
          .attr("id", "beep-" + i)  //new name of object
          .appendTo($(this).parent()); 
    }

    $(this).data("instance", i);  //save the integer for loop
    increment=Math.floor(Math.random()*3);  //change increment
})
4

1 に答える 1

0

画像がブラウザにキャッシュされていない限り、各画像/音声ファイル参照はサーバーへのリクエストで解決されます。イメージの「Expires」および「Cache-Control」ヘッダーを設定して、キャッシュを強制することができます。これらのヘッダーは、画像が要求されたときにサーバーから送信されます。

もう 1 つのオプションは、Memcache などを使用してイメージ サーバー側をキャッシュすることです。このようにして、各画像参照は引き続きサーバーに解決されますが、画像はサーバー側でキャッシュされ、アクセスが高速になります。

詳細については、キャッシュの種類、Web キャッシュのしくみ、キャッシュを制御する方法 (およびしない方法) を参照してください http://www.mnot.net/cache_docs/

于 2011-10-12T21:09:07.860 に答える