F5刷新浏览器不缓存静态资源

最近在优化线上的一个web站点，发现很多CSS和js按F5刷新的时候，不缓存，这个可是一个可以优化的点啊！

第一反映就是检查是否配置了缓存，用浏览器查看response header如下：

看到这个response header 就更加让人奇怪了，明明配置了缓存，也配置了过期时间，为什么按F5刷新页面没有出现304 Not modify ?

然后想到找个缓存了的来对比下，正常缓存的response header如下：

比较发现，能够正常缓存的response header中多了ETag和Last-Modified这两个field。由此，在本地测试环境中，去掉这两个field.

在Apache的http.conf中加入如下配置：

<IfModule mod_headers.c>
  Header append Vary User-Agent env=!dont-vary
  Header unset ETag
  Header set X-Content-Type-Options nosniff
  Header unset Last-Modified

</IfModule>

去掉response header中的ETag和Last-Modified后，按F5刷新，就不出现缓存了。

后来认真看了下资料，发现这个问题是自己对于浏览器缓存的机制，没有认识清楚。

官方正解：

Expire只是让静态资源缓存到本地并设置过期事情，所以用回车或后退触发的请求或直接使用本地缓存。

F5刷新会跳过本地缓存，发起一个请求到服务器，然后与服务器协商，如果服务器上没有变动则返货304（Not-Modified）并使用本地资源，

否则从服务器返回最新的资源。