在web开发中我们常常要用的 nginx 作为高性能的http和反代web服务器,有时候我们需要配置统一的默认缓存配置,这个时候我们就可以通过配置 nginx 设置缓存请求过期时间来实现。
1632363613

设置nginx配置cache-control参数

　浏览器如果在过期时间内发现新的文件,则不会使用缓存的数据,而是直接向 nginx 服务器请求新的数据。

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|html)$ {
             #禁止缓存，每次都从服务器请求
             #add_header Cache-Control no-store;
             #设置过期时间60秒，60秒过后向服务器重新请求数据
             add_header Cache-Control max-age=60;
}

　配置完以上 nginx 配置后直接重启可能不生效,必须先关闭进程再重新启动。

设置nginx配置expires参数

　expires 参数优先级比 cache-control 参数低

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|html)?$ {
               #设置缓存过期时间两分钟
                 expires 2m;
              # access_log off;
}
  • 2m-两分钟
  • 2h-两小时
  • 2d-两天

浏览器的两种缓存机制

　后端的静态资源会不定时地发生更新，而因为浏览器默认使用强缓存，会默认从浏览器缓存中取到过时的资源。

　现在我们希望浏览器每次获取资源的时候都向后端确认资源是否更新，就要设置浏览器使用协商缓存

　那么后端如何判断资源是否更新了呢？这时就要用到Etag和Last-Modified两项响应头。

　每次收到一个静态资源的请求时，后端都将资源的最后修改时间（Last-Modified）、根据资源内容计算出来的Etag放在响应头给前端。

　前端收到响应后将这两项缓存起来，然后在下次请求同样资源的时候，将这两项的内容放到If-Modified-Since和If-None-Match这两项请求头中。

　服务端收到这两项后，会与资源当前生成的Etag和Last-Modified做比较，如果两者都一致，说明资源没有更新，服务端会返回304空响应；否则，说明资源有更新，服务端会将完整的资源内容返回

浏览器强缓存机制

　浏览器不与服务端协商直接取浏览器缓存

浏览器协商缓存机制

　浏览器先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源