循环中的 Clone AppendTo 函数重载对服务器的请求 - 应该从缓存中加载！ （jQuery）

Posted 2023-02-22

【中文标题】循环中的 Clone AppendTo 函数重载对服务器的请求 - 应该从缓存中加载！ （jQuery）

【英文标题】：Clone AppendTo function in loop overloads requests to server - should load from cache instead! (Jquery)

【发布时间】：2011-12-03 05:02:03

【问题描述】：

此函数为图像列表克隆声音对象。

问题是当对象写入 DOM 时，浏览器查询服务器将其加载为 200 请求。但是，它只是一遍又一遍地加载 4 个不同的声音文件。所以它应该作为 304 请求从浏览器的缓存中加载。

所有声音文件最初都以 html 格式加载，然后被克隆。每当刷新页面时，HTML 中的声音文件都会收到 304 请求并从缓存中加载，但任何克隆的文件都会使用 200 请求（不是从缓存中）加载！

在浏览器不向服务器发送请求以加载到 DOM 的情况下，我仍然可以克隆这些对象吗？完全在客户端？数据已经在 HTML 中写入一次。

我宁愿根本不向服务器发送任何请求来克隆这些对象。由于它克隆了超过 50 个，因此一秒钟内有 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
)

【参考方案1】：

除非图像缓存在浏览器中，否则每个图像/声音文件引用都会在对服务器的请求中解析。您可以设置图像的“过期”和“缓存控制”标题以强制缓存。当您请求图像时，这些标头会从服务器发送。

另一种选择是使用 Memcache 之类的东西来缓存图像服务器端。这样，每个图像引用仍将解析到服务器，但图像将被缓存在服务器端以便更快地访问。

有关更多信息，请参阅缓存种类、Web 缓存如何工作、如何（以及如何不）控制缓存http://www.mnot.net/cache_docs/

【讨论】：

我通过 .htaccess 添加了缓存控制： Header set Cache-Control "max-age=290304000, public" 但是，它不成功。 HTML 中包含的声音文件返回 HTTP 304（未修改）并从缓存加载。但是，Jquery 或 javascript 不会读取缓存控制标头并为循环中的每个文件请求返回 200 个请求......所以 50 个 HTTP 200 请求。页面上的所有其他对象，jpg 等都返回 304。

我想我这样说更好。通过 .htaccess 中的标头尝试 Cache-Control 并且原始问题仍然存在....每当刷新页面时，HTML 中的声音文件都会收到 304 请求并从缓存中加载，但是使用 jquery 克隆的任何文件都会加载 200请求（不是来自缓存）！