浏览器与 nginx 缓存

简介

• 一种是浏览器访问 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采取措施的准则

统计表

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

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

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

Firefox 准则

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

参考

https://blog.youkuaiyun.com/solmyr_biti/article/details/78612726