Chrome总是自动缓存nginx返回的js文件的解决方案

原创
2017/08/04 16:10
阅读数 1.9K

WEB的网页缓存分析

Chrome会自动本次缓存Nginx的本地资源

  • nginx在1.0之后的版本,当处理本地资源文件的时候,会自动追加Etag和Last-modified头部信息
  • Chrome在收到一个资源携带了Date和Last-Modified头部,同时,没有Expires头部,会自动决定过期策略,简单的规则有个例子,不确定正确性,但是Chrome就是会保持这个过期策略,下次请求的时候会直接from memory cache
    • 简单来说没有Cache-Control头部,Cache-Control 默认为private, max-age=Date header 的值减去Last-modified header 值的10%
  • 所以你的Chrome会自动缓存这些本地资源文件,包括js文件
  • 所以你发布的最新js文件,Chrome访问的时候不会自动刷新

解决方案

  • 你需要nginx在响应页面的时候,强制指定expire策略,而不是由chrome来自动决定过期策略
  • 一般来说,缓存策略设置的时间要较短,这样新发布的程序会更快的出现在终端浏览器中
  • 即使设置了缓存策略,原来的ETag和Last-Modified头部,还是会生效的,因此,即使很快过期,如果服务器的资源真的没有变化,服务器也会快速响应304,不会真的重新下载整个资源
    location ~* \.(html|js|css|gif|jpg|jpeg|png) {
      expires 300s;
    }

特别说明

  • nginx的Etag和Last-Modified会增强性能,不要关闭
  • 当资源设置了Expires策略,那么在过期时间内,Chrome不会发送任何请求到nginx,直接使用本地页面,该请求在Network中会看到from memory cache的标记
  • 当超过了本地过期策略,chrome会发送服务器请求,并携带该资源上次收到的ETag和Modified-Since,nginx一般在这个时候会返回304(如果资源没有修改),或者200(如果资源修改了)
  • 你输入在URL的地址,Chrome认为是直接请求,会忽略本地的任何缓存,直接发送请求给服务器(携带Etag和Modified-Since),而页面引用的资源,Chrome会认为是间接资源,而使用本地缓存策略。
  • 因此,有的时候你就会发现,如果你发布了新WEB程序,首页地址页面,会是最新的,但是引用的js和css,都是旧的,不会自动更新。就是上面说的原因造成的。
  • 当然,通过在首页html页面,修改连接的js和css的路径地址,譬如增加一个版本号后缀,也会强制要求浏览器请求新的资源。因为浏览器是以完整的URL来决定缓存id的,追加了版本后缀浏览器认为是一个新的URL地址。
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部