Question

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

就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

是的，这很简单。

只需为您的网址提供随机参数，例如：网址= http://www.yoururl.com - ＆gt; http://www.yoururl.com/?number=(random号码）

这样你就会有一个独特的网址。页面在加载时会丢弃该参数，因为它没有被使用。

如果有帮助，请告诉我

Answer 2

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

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

Answer 3

阅读Apache Directives以获取缓存控制....

您可能需要在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>

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

3 个答案: