Question

使用jquery.load（）替换div的内容一切都很好，但是存在一个主要的性能问题。加载到div中的页面包含一些外部javascript文件，并使用HttpWatch我观察到以下内容：

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

以及下面的一点（在相同的负载（）期间）：

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

由于某种原因，似乎再次加载相同的脚本。更糟糕的是，在再次提取文件之前，浏览器似乎已经冻结。

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

提前致谢。

Answer 1

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

我在下面给出了不同的方法。

在您的请求完成后，第一次尝试保留以前的全局选项（但确实有其缺点）。

第二个忽略默认设置，只是设置选项，以便始终允许缓存用于ajax结果（如果这对您来说不是问题，我建议这个，因为它是最简单的，没有隐藏的陷阱）和

第三个例子是你想要允许缓存脚本，而不是其他的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选项在每个请求的基础上。这与Andres建议的方法类似，但是我建议使用cache: true并使用jQuery.html();而不是innerHTML进行修复。但是，它变得更复杂，因为内部jQuery.html();使用全局选项请求脚本，因此您还需要覆盖html();所做的函数调用深层的一些内部功能 - 而不是要轻松地做些什么，但肯定是可能的。

示例2：（推荐给原始提问者）

现在，如果您不关心恢复默认设置，并希望缓存为所有 ajax请求启用，则只需致电$.ajaxSetup({cache: true});并呼叫load()为你之前做过：

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

示例3：

如果你想从缓存中加载myURL not （让我们说它是动态的），但做想要缓存脚本，你需要添加对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 '&' */

Answer 2

这个问题的一个可能的解决方案是做一些事情：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <title>test</title>
</head>
<body>
    <div id="load1"></div>
</body>
</html>
<script>
$(function(){

    $.ajax({
        type: "GET",
        cache: false,
        url: "load1.html",
        success: function(data){
            $("#load1")[0].innerHTML = data;
        }
    });

});
</script>

load1.html：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js1.js"></script> 
</head>
<body>
    <div>html 1</div>   
</body>
</html>

jquery .js加载长时间延迟

2 个答案: