浏览器与 nginx 缓存

迈不过友情╰ 2022-04-23 09:44 485阅读 0赞

### 简介 ###

*  一种是浏览器访问 nginx，浏览器 Cache
 *  另一种是 nginx 访问后端，nginx 自己 Cache

### 响应头字段说明 ###

Cache-Control: public, max-age=51600
    Connection: keep-alive
    Content-Type: text/html; charset=UTF-8
    Date: Tue, 05 Feb 2019 14:28:26 GMT
    Expires: Wed, 06 Feb 2019 04:48:26 GMT
    Last-Modified: Tue, 05 Feb 2019 14:06:57 GMT
    Server: nginx/1.13.9
    Transfer-Encoding: chunked
    X-Powered-By: PHP/7.1.23

##### Date 的意思是服务器发送消息的时间 #####

##### Expires 表示过期时间 #####

*  当expire 为负时，会在响应头增加Cache-Control: no-cache；
 *  当为正或者0时，就表示Cache-Control: max-age=指定的时间(秒)；
 *  浏览器可以通过两种方式来判断缓存文件是否被更新了，一种是 If-Modified-Since ，浏览器通过发送If-Modified-Since 头，带上「上一次请求获得的修改时间，（在Last-Modified头里）」发送到服务器，服务器会判断这个时间之后文件有没有改变，如果没有改变返回状态值304，如果有返回新文件，状态值200 。
 *  还有一种是利用Etag(Entity Tag)，它是实体内容的hash字符串(md5或者SHA1的算法计算出来的)，这个方法更准确但是更消耗服务器的CPU，浏览器发送If-None-Match 头，里面是Etag值(浏览器之前请求文件时，服务器会返回Etag 头)，服务器收到后做比较，如果一样就返回304，不一样也发送最新文件，返回值200。  
    示例：

ETag: "5c5009ae-8a5"

### 访问出现 200 OK (from disk cache) ###

*  如果移除了 Entity Tag，总是出现 200 OK (from disk cache)，没有跟服务器确认， 直接用浏览器缓存；
 *  没有移除，两者交替出现。
 *  304 是浏览器和服务器确认了一次缓存有效性，再用的缓存。
 *  禁止200 OK (from disk cache) 这个缓存的方法是，ajax 请求是带上参数 cache: false

### chrome 浏览器 ###

##### header 头 #####

`Status Code: 200 (from disk cache)`

##### size 栏通常会有三种状态 #####

1.  from memory cache  
    这个资源是直接从内存中拿到的，不会请求服务器，一般已经加载过该资源且缓存在了内存当中，当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现from memory cache的情况。
2.  from disk cache  
    资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache
3.  资源本身的大小(如：1.5k)  
    当http状态为 200 是实实在在从服务器获取的资源，当http状态为304时该数字是与服务端通信报文的大小，并不是该资源本身的大小，该资源是从本地获取的。

##### chrome采取措施的准则 #####

统计表

<table> 
 <thead> 
  <tr> 
   <th align="left">状态</th> 
   <th align="left">类型</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">200</td> 
   <td align="left">form memory cache</td> 
   <td align="left">不请求网络资源，资源在内存当中，一般脚本、字体、图片会存在内存当中</td> 
  </tr> 
  <tr> 
   <td align="left">200</td> 
   <td align="left">form disk cache</td> 
   <td align="left">不请求网络资源，在磁盘当中，一般非脚本会存在内存当中，如css等</td> 
  </tr> 
  <tr> 
   <td align="left">200</td> 
   <td align="left">资源大小数值</td> 
   <td align="left">从服务器下载最新资源</td> 
  </tr> 
  <tr> 
   <td align="left">304</td> 
   <td align="left">报文大小</td> 
   <td align="left">请求服务端发现资源没有更新，使用本地资源</td> 
  </tr> 
 </tbody> 
</table>

**样式表一般在磁盘中，不会缓存到内存中去，因为css样式加载一次即可渲染出网页**

**脚本却可能随时会执行，如果脚本在磁盘当中，在执行该脚本需要从磁盘中取到内存当中来这样的IO开销是比较大的，有可能会导致浏览器失去响应**

##### Firefox 准则 #####

1.  相同的资源在chrome下是from disk/memory cache，但是Firefox统统是304状态码
2.  在Firefox下并没有from memory cache以及from disk cache的状态展现。

#### 参考 ####

[https://blog.csdn.net/solmyr\_biti/article/details/78612726][https_blog.csdn.net_solmyr_biti_article_details_78612726]

[https_blog.csdn.net_solmyr_biti_article_details_78612726]: https://blog.csdn.net/solmyr_biti/article/details/78612726