使用 onload 事件异步加载 JavaScript 的缓存问题

Question

我目前正在尝试异步加载一些js文件，以便它们无法阻止网站的其余部分。 我主要遵循这里的描述：

Javascript

异步 阻止加载 javascript 文件这效果很好，但我现在遇到了这样的问题：即使我更改了内容，javascript 文件也会被缓存并保持缓存（而且执行 shift-reload 也没有任何帮助）。

我当前加载脚本的代码如下所示：

 (function() {
   function xx_async_load() {
     var xx = document.createElement('script');
     xx.type = 'text/javascript';
     xx.async = true;
     xx.src = 'http://myserver.de/myjs.js';
     var el = document.getElementsByTagName('script')[0];
     el.parentNode.insertBefore(xx, el);
   }

   if (window.addEventListener) {
     window.addEventListener('load', xx_async_load, false);
   } else if (window.attachEvent){
     window.attachEvent('onload', xx_async_load);
   }

 })();

如果我直接调用“xx_async_load”内的代码并更改 myjs.js，则更改会被识别，但如果我通过 onload 事件加载它，它始终会保持缓存并且改变的永远不会被识别。

有谁知道如何让浏览器识别缓存文件中的更改（问题出现在 Opera、FF 和 IE 中工作正常）？

编辑：如果我查看 Operas Dragonfly 的“网络”选项卡，甚至没有在重新加载缓存的 JS 文件时完成请求，似乎它是直接从缓存加载它，甚至没有检查服务器上的文件。

EDIT2：我将测试它在缓存中保留的时间。如果明天就消失了就好了。否则我仍然可以使用日期参数提出解决方法（因此接受该答案）。再次感谢。

Answer 1

阅读 Apache Directives for cache-control ....

您可能希望在 apache.conf 文件或 .htaccess 文件中包含类似的内容

该示例将告诉浏览器缓存 JS 文件，并且直到检查新版本为止7天过去了

<Directory "C:/apache_htdocs">
    #
    # Enable caching for static files
    # A86400  = Access + 01 days
    # A604800 = Access + 07 days

    <FilesMatch "\.(js)$">
        ExpiresActive On
        ExpiresDefault                            A604800
        ExpiresByType application/x-javascript    A604800
        ExpiresByType application/javascript      A604800
        ExpiresByType text/javascript             A604800

        Header set Cache-Control "public, max-age=604800, pre-check=604800"
    </FilesMatch>
</Directory>

Answer 2

是的，这相当简单。

只需为您的 URL 提供一个随机参数，例如： URL = http://www.yoururl.com -> ; http://www.yoururl.com/?number=(random number)

这个这样您将始终拥有一个唯一的 url。该参数在加载时会被页面丢弃，因为它没有被使用，

请告诉我这是否有帮助。

Answer 3

解决此问题的一个好方法是计算文件内容的 md5()，然后将该值作为参数附加到 URL。这样，只要文件内容相同，文件就会不断被缓存。

另一种方法是使用 HTTP 标头控制脚本的缓存行为，例如 ETag 或降低最大缓存过期时间。