Question

我正在尝试学习浏览器（Chrome / Firefox）缓存机制。我设置了一个简单的HTML：

    <HTML><BODY>
    Hellow World

    <script>
        function loadJS(){ 
           var s = document.createElement('script'); 
           s.setAttribute('src','/myscript');
           document.body.appendChild(s);
        } 
        loadJS()
    </script>

    <BODY></HTML>

我为“/ myscript”输出“Cache-Control: max-age:30”

每次按F5，浏览器都会重新验证/ myscript与我的服务器一起回来。

但如果我使用

setTimeout(loadJS, 1);

每次按F5，浏览器都会检查到期时间，如果没有过期，浏览器会直接使用缓存而不是去服务器进行重新验证。

我的问题是：

为什么？对此有详细解释吗？
这是否意味着我希望浏览器尽可能使用缓存并减少网络请求，我需要等待加载的页面，然后再用js请求资源？

Answer 1

我已经对浏览器缓存控制进行了大量的实验，我很惊讶没有人发布答案。

很多人不注意这一点。作为一个结果网站 - 完全没有理由 - 使浏览器对图像，js或css文件的304-not modified执行无用的往返，这些文件在5年内不太可能发生变化 - 比如谁将要更改jquery.v -whatever？

所以无论如何，我发现当你使用F5或ctrl-r硬刷新浏览器时，Chrome会重新验证页面上的所有内容 - 就像它应该的那样。这非常有用，这就是为什么要在响应头中保留etags。

在测试您的max-age和expires标头时，通过单击页面上的链接以用户自然方式浏览网站。观察Web服务器的日志文件（我使用http://www.apacheviewer.com），您将很好地了解浏览器的缓存方式。

设置标题有效。我暂时发布了这个帖子：Apache: set max-age or expires in .htaccess for directory

管理Web服务器的最简单方法是创建一个/ cache目录，并指示apache为每个子目录中的所有内容设置1年最大期限和expires标头。

它创造了奇迹。我的页面向服务器进行了1次往返，在这里他们每次请求都会进行3-5次访问，只需要获得304.

像往常一样写你的HTML。浏览器将遵循标头中的缓存设置。

只要知道刷新浏览器会导致浏览器忽略max-age并依赖etags。

浏览器使用缓存而不重新验证

1 个答案: