关于 浏览器 Cache-Control 不能设置问题。

首先看一次 清空了浏览器缓存 + 强制刷新 的记录

clipboard.png

clipboard.png
代码是这样的

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
         
        <meta http-equiv="Cache-Control" content="max-age=60000" />
        
        <link rel="stylesheet" href="mo.css">
        <script type="text/javascript" src="we.js"></script>
        <script type="text/javascript" src="mo.js"></script>
    </head>
    <body>
        <h1 id="reh">login...</h1>
        <p><img src="logo.jpg" /></p>
    </body>
</html>

这个 meta 标签设置无效,明明是设置了max-age=60000的,但为什么发送请求时就变成了
no-cache 了
使用chrom 浏览器
这两个也没勾上

clipboard.png
clipboard.png

而且发现个奇怪问题是我地址栏回车时是这样的

clipboard.png

有没人解释一下什么回事?我要做到的最终目的是缓存资源文件,就是 js ,css ,img直接本地缓存取而不发请求 304 再在本地取,就是chrome 的 200 (form cache);

阅读 14.2k
2 个回答

首先,缓存问题依靠html的meta标签解决是不靠谱的,一般大型网站都依靠nginx server在 http头中对静态资源设置缓存。
而影响缓存的http头有好几个,尽管http 1.1协议之后,从协议本身的规范的角度可以认为 只要有cache-control这个头存在,pragma expires就无效了,但你不能相信所有浏览器所有版本都完全按照标准进行了实现,所以,比较职业的做法是把所有该下发的http头都派发过去,更保险一些。
在你的截图中,我看到response headers里缺少expires字段,并且你虽然cache-control给了个3600(注意这里的单位是second 相当于缓存时间是1小时,考虑到服务器时间与客户端机器的时间有可能存在一些差异,如果真希望缓存的静态资源,不建议给这么小的max-age),然而你设置了pragma:no-cache,这显然是你的apache服务器配置的问题,我估计你的conf文件是从网上随便找了一份,设置缓存时忘记去掉这一行了,pragma建议去掉,当然也可以查一下文档这个头该怎么设置缓存值,设一个长一些的。
另外,我还注意到,你在浏览器中直接以127.0.0.1的ip地址进行访问,依靠chrome内核(准确说叫blink,google基于webkit项目切出的一个分支,目前作为chrome浏览器内核)解析网页的所有浏览器,在这种直接访问ip地址的场景下都会表现出一些诡异的情况,有时是缓存与线上不一样,有时是跨域的CORS策略会与线上不同,所以你再本地做实验 最好绑个host,也不要直接localhost访问。

最后,再科普一个知识,chrome浏览器为了优化页面加载速度,做了非常复杂的缓存和预加载策略,当你点F5(win系统)或command-R(mac系统)刷新浏览器时,通常是穿透缓存的,而当你在地址栏里输入后直接回车时,往往会被缓存cache住。说的再深一点,当你在浏览器地址栏里输入地址时,出现那个下拉提示菜单,如果你选择了菜单中的一个提示选项而不是自己手动敲完整个地址url的话,实际上你还没点回车时 这个http请求就已经发出去了,所以有时会发现 在地址栏里直接选自己之前访问过的页面时 请求速度特别快,实际上是chrome的预加载机制。

缓存是比较复杂的问题,与之相关的任何一个环节设置错误都可能导致结果与预期相左,希望能帮到你。

新手上路,请多包涵

之所有一直有nocache,也有可能是你的调试面板勾选了Disable Cache

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏