浏览器与 nginx 缓存-蒲公英云

浏览器与 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 栏通常会有三种状态

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

chrome采取措施的准则

统计表

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