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

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与我的服务器，以获得304回。

但是，如果我使用

setTimeout(loadJS, 1);

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

我的问题是：

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

Answer 1

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

很多人不注意这一点。 作为一个结果网站 - 完全没有理由 - 让浏览器执行无用的往返，对于304-not modified 5年改变的图像，js或css文件进行304-not modified - 比如谁将要更改jquery.v-随你？

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

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

设置标题有效。 我暂时发布了这个： Apache：在.htaccess中为目录设置max-age或expires

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

它创造了奇迹。 我的页面向服务器进行了一次往返，在那里他们曾经为每次请求做了3-5次旅行，只是为了获得304。

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

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

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

问题描述

1 个解决方案

解决方案1
0 2014-01-18 03:02:46

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

问题描述

1 个解决方案

解决方案1 0 2014-01-18 03:02:46

解决方案1
0 2014-01-18 03:02:46