关于浏览器缓存和本地静态资源的问题

Question

学nginx的时候把浏览器的缓存机制琢磨了一下。把相关http header研究了一下。
然后突然想起一个问题，就是以前在本地开发的过程中修改js文件时由于浏览器缓存导致新的改动并没有生效，必须清空才可以。
然后就想结合刚了解的http缓存机制来弄清楚以前那个js文件不生效的问题。
可是问题来了。为什么js文件在修改之后，刷新页面，浏览器没有从本地服务器获取新的js文件而是从缓存中读取。
我确认了request header 里的cache-control是 max-age=0，就是说向服务器确认该js文件是否需要更新。
那有改动的话应该是重新请求js文件 且status为200才对呃。。。。
还是说只要js文件的名字没变。那么浏览器就认为缓存是存在的，可以直接读取？？并不需要判断etag或者last-modified

Answer 1

request header的cache-control: max-age=0只有在CTRL + F5强刷时才会加入
正常访问并不会加这种头

你要控制浏览器的行为，应该在服务端的cache-control里配置
不能脱离服务端的cache-control讨论浏览器的缓存机制

request header是给服务器看的，不是给浏览器看的，你的理解本身就不对

服务端通过cache-control、etag、last-modified告诉浏览器和缓存服务器应该怎么存储和处理这个URL
如果符合一定规则（具体看下方文章），浏览器并不会向服务器发出请求，而是直接使用本地缓存

如果符合一定规则需要向服务器发出请求，浏览器通过If-Modified-Since If-None-Match cache-control告诉服务器应该响应304还是200

这篇文章已经讲得很清楚了：
https://developers.google.com...

Answer 2

第一你可以用chrome开发者工具中network查看，具体的js是从disk，或者内存，还是获取最新。
第二更新缓存的最有效办法就是更新版本号，如j.js?v=1.0

Answer 3

你自己一堆概念都没有搞清楚。

可是问题来了。为什么js文件在修改之后，刷新页面，浏览器没有从本地服务器获取新的js文件而是从缓存中读取。

首先，浏览器不知道你的 js 文件到底有没有改。浏览器如果没有发出远端请求，那么一定是“缓存头”机制在发生作用。（前提是浏览器自己正确实现了 HTTP 协议的相关要求）

我确认了request header 里的cache-control是 max-age=0，就是说向服务器确认该js文件是否需要更新。
那有改动的话应该是重新请求js文件 且status为200才对呃。。。。

这是你服务器的事，不是浏览器这个客户端的事。

还是说只要js文件的名字没变。那么浏览器就认为缓存是存在的，可以直接读取？？并不需要判断etag或者last-modified

文件名没有变，缓存策略受“头”控制。
文件名变了，一定不会有缓存，因为浏览器标识资源是依赖 URI 的，文件名（准备说是是 URL 中的 path）是这个 URI 的一部分。