浏览器缓存机制与Nginx配置调优

Posted 2021-04-11 Spring伐木累

缓存可以说是性能优化中简单高效的一种优化方式了, 一个优秀的缓存策略可以缩短网页请求资源的距离, 减少延迟, 并且由于缓存文件可以重复利用, 还可以减少带宽, 降低网络负荷. 对于浏览器缓存, 相信大家对它真的是又爱又恨. 一方面极大地提升了用户体验, 而另一方面有时会因为读取了缓存而展示了已经过期的数据, 而在开发过程中千方百计地想把缓存禁掉, 所以接下来本文就对浏览器的缓存机制进行详细的讲解, 彻底掌握浏览器的缓存规则, 妈妈再也不用担心缓存问题啦~

HTTP状态码

200 (form memory cache) 不请求网络资源，从内存中读取资源，一般脚本、字体、图片会存在内存当中

200 (form disk cache) 不请求网络资源，从磁盘中读取资源，一般非脚本会存在内存当中，如css等

200 (1kb) 从服务器下载最新资源. (1kb即资源的大小)

304 (1kb) 请求服务端发现资源没有更新，使用本地资源. (1kb即报文的大小)

以上是chrome在请求资源是最常见的几种http状态码

前两种200状态码是不需要浏览器请求服务器的, 直接从本地读取资源, 所以速度是最快的, 而304状态码也是缓存, 只不过需要浏览器先请求服务器, 这种是协商缓存

那么浏览器究竟在什么情景下会返回以上几种不同的状态码呢?

答案很简单, 在浏览器第一次访问某个URL时, 服务端会直接返回第三种200状态码, 返回内容是被请求的最新资源, 与此同时服务端可以在返回内容时主动设置Response Headers里的last-modified属性标记此资源在服务端最后被修改的时间, 还可以设置cache-control属性和etag属性以及expire属性, 浏览器就会根据返回的几个属性, 自行判断下次该如何请求资源, 那么下文将依次讲解这些属性的作用, 以及在什么情况会返回剩余的三种状态码.

last-modified

last-modified格式类似这样：

last-modified : Fri , 12 May 2006 18:53:33 GMT

客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服务器发送if-modified-since报头，询问该时间之后文件是否有被修改过：

if-modified-since : Fri , 12 May 2006 18:53:33 GMT

如果服务器端的资源没有变化，则返回 304（Not Changed）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

nginx默认开启last modified特性, 也可以在nginx.conf中添加以下配置, 主动控制:

 
   
   
 

  
    
    
  if_modified_since off|on;

 
   
   
 
以上是关于浏览器缓存机制与Nginx配置调优的主要内容，如果未能解决你的问题，请参考以下文章
 
 Varnish缓存机制详细介绍及简单配置
 Nginx 配置页面缓存
 （010）Nginx静态资源web服务_浏览器缓存原理与演示
 （010）Nginx静态资源web服务_浏览器缓存原理与演示
 nginx优化
 基于Nginx设置浏览器协商缓存过程详解