javascript - jquery .js 加载长延迟

Question

使用 jquery.load() 替换 div 的内容一切正常，但是存在一个主要的性能问题。加载到 div 中的页面包含一些外部 JavaScript 文件并使用 HttpWatch 我观察到以下内容:

0   0   GET (Cache) text/javascript <host>/js/file1.js
0   0   GET (Cache) text/javascript <host>/js/file2.js
0   0   GET (Cache) text/javascript <host>/js/file3.js
...
etc.

再往下一点(在相同的 load() 期间):

571 129862  GET 200 text/javascript <host>/js/file1.js?_=1263399258240
569 26439   GET 200 text/javascript <host>/js/file2.js?_=1263399258365
572 14683   GET 200 text/javascript <host>/js/file3.js?_=1263399258396
...
etc.

由于某种原因，相同的脚本似乎又被加载了。更糟糕的是，就在再次获取文件之前，浏览器似乎卡住了。

我可以阻止 jQuery 再次加载文件吗？整个问题导致我的页面延迟大约 5 秒。另外，_=1263399258240 是什么意思？

Answer 1

jQuery 具有三种不同的缓存选项。默认的 null 允许缓存所有请求除了脚本和 json 请求，而 true 和 false 适用于所有请求.据我所知，您不能在 load() 方法中提供选项参数，因此您需要更改全局 jQuery ajax 选项。

我在下面给出了执行此操作的不同方法。

1. 在您的请求完成后第一次尝试保留之前的全局选项(但确实有其缺点)。
2. 第二个忽略默认设置，只设置选项，这样您总是允许缓存用于 ajax 结果(如果这对您来说不是问题，我建议这个，因为它是最简单的，没有隐藏的陷阱)和
3. 第三个例子是如果你想允许缓存脚本，但不允许其他 ajax 请求。

示例 1:

我的第一个例子展示了如果你想在 load() 请求后恢复到正常设置时如何做到这一点:

    //first store defaults (we may want to revert to them)
 1: var prevCacheVal = $.ajaxSettings.cache; 
    //then tell jQuery that you want ajax to use cache if possible
 2: $.ajaxSetup({cache: true}); 
    //then call the load method with a callback function 
 3: $(myDiv).load(myURL,function(){
      /* revert back to previous settings. Note that jQuery makes 
         a distinction between false and null (null means never
         cache scripts, false means never cache anything). so it's
         important that the triple-equals operators are used, to
         check for "false" and not just "falsey" */
 4:   if (prevCacheVal === false) $.ajaxSetup({cache: false})
 5:   else if (prevCacheVal !== true) $.ajaxSetup({cache: null});
      //else prev was true, so we need not change anything
 6: });

重要说明，在执行上述操作时，您需要小心，一次只发送一个请求，因为每次存储和切换“默认值”都可能导致竞争条件。如果您需要上述功能和发送并行请求的能力，您最好为jQuery.ajax() 方法编写自己的包装器，这样您就可以传入cache 选项基于每个请求。这将类似于下面安德烈斯建议的方法，但我建议使用修复程序指定 cache: true 并使用 jQuery.html(); 而不是 内部 HTML。然而，它变得比这更复杂，因为在内部，jQuery.html(); 使用全局选项请求脚本，因此您还需要覆盖函数调用深处的一些内部功能html(); 使 - 不是可以轻松完成的事情，但肯定是可能的。

示例 2:(推荐给原始提问者)

现在，如果您不关心恢复默认设置，并且希望为所有 ajax 请求启用缓存，您可以简单地调用$.ajaxSetup({cache: true}) ; 并像以前一样调用 load():

 $.ajaxSetup({cache: true}); 
 $(myDiv).load(myURL);

示例 3:

如果您希望 myURL 不从缓存中加载(假设它是动态的)，但确实想要缓存脚本，您需要添加对 myURL 的独特/随机查询，例如:

 $.ajaxSetup({cache: true}); 
 $(myDiv).load(myURL + "?myuniquetime=" + Date.getTime()); 
 /* getTime() is milliseconds since 1970 - should be unique enough, 
    unless you are firing of many per second, in which case you could
    use Math.random() instead. Also note that if myURL already includes
    a URL querystring, you'd want to replace '?' with '&' */