浏览器缓存

Posted 2020-09-16 等风来

浏览器查找缓存的顺序

service worker
memory cache (Tab页关闭，即失效，主要针对图片，样式等资源)
disk cache
push cache(http2独有)

针对静态文件，动态文件需要 web server解析

浏览器缓存有强缓存，协商缓存和启发式缓存三种。

请求的基本过程，浏览器会先检查cache-control和expires，看资源是否缓存过期，不过期，直接使用本地缓存，不发请求
过期，则向服务器发送请求，服务器比对If-none-match和Etag，或者If-modified-since和last-modified字段，
看资源是否发生改变，如果未改变，则返回304，body为空，否则返回200，body为文件内容。

1.强缓存

cache-control和expires设置的缓存时间，第一次请求后，文件被缓存在本地
其中cache-control优先级高于expires

cache-control的各种值的含义：

max-age: 缓存时间，浏览器，代理服务器均有效
s-max-age: 缓存时间，代码服务器有效，且优先级高于max-age，浏览器无效
no-cache： 表示缓存时间为0，每次请求使用协商缓存
no-store: 不缓存
public: 浏览器和代理服务器都可以缓存
private: 只有浏览器可以缓存
max-stale: 能容忍的最大过期时间
min-fresh: 能够容忍的最小新鲜度

2.协商缓存

http请求的response header中有 last-modified和Etag
浏览器再次请求该资源时候，会在 request header中携带
If-none-match(等于上次Etag的值)
If-modifed-since(等于上次last-modified的值)
想服务发送请求，服务器对比If-none-match和Etag，If-modified-since和last-modified的值，
如果一致，则返回304状态码，body为空。
不一致，则返回200状态码，body为文件内容。

其中Etag的优先级高于last-modified

返回状态码 304 Not Modified

3.启发式缓存

如果没有cache-control和expires的缓存设置，浏览器依然会有一个本地缓存策略，就是启发式缓存。
其计算方法如下：
http response header中的 Date(当前时间) 和 Last-Modified 的值

本地缓存时间 = （Date - Last-Modified） * 10%

因此，启发式缓存的缓存时间可长可短，建议明确设置缓存时间

返回状态码 200 OK （与正常的无缓存请求一致，实际上使用了本地缓存，没有发送请求）

chrome的Request Headers中会显示一行字

Provisional(临时的) header are shown, 表明此请求为启发式缓存的请求。

字段解释

Last-Modified：文件上次的修改时间

Etag：文件的唯一标识，类似于hash值

Etag解决了Last-Modified的哪些问题

1. Last-Modified的时间精确到秒级，当一个文件在1s内被多次修改，无法记录

2. 某些文件会被周期性修改，但内容不变，此时不想利用Last-Modified的值更新缓存

3. 某些服务器不能精确得到文件的最后修改时

　 http request 　　http respose

If-Modified-Since -> Last-Modified 时间上对比，一致则返回304

If-None-Match -> Etag 内容上对比，一致则返回304

在第一次请求URL的时候，服务器讲 Last-Modified和Etag返回给客户端
在第二次请求此URL的时候，客户端将 If-Modified-Since 和 If-None-Match 发送到服务器
服务器将 If-Modified-Since 与 Last-Modified，If-None-Match 与 Etag做对比，一致则
返回304，否则返回200.

Expires

服务器返回的http response header中有Expires时，浏览器会在其标记的时间内不去下载请求的内容。
仅在地址栏输入地址有效，F5刷新无效。

Pragma和Cahce-Control

Http1.0的Pragma和Http1.1的Cache-Control可以用来控制页面缓存。

Pragma->no-cache, Expires->0 ,Cache-Control->no-cahce可以让页面不缓存。
Cache-Control的max-age可以设置页面在客户端缓存多少秒，是相对时间，并且覆盖Expires

Age：代理服务的缓存时间(单位秒)
Date：响应生成的时间
Vary：Vary:Accept-Encoding,User-Agent告诉代理服务，要缓存资源的压缩和未压缩两个版本

cache-contorl和pragma的no-cache设置，并不能完全禁用缓存
此设置只有部分浏览器支持，并且代理服务器由于不解析html文档，完全不支持此方式

用户行为与缓存的关系

1. 用户在 地址栏回车，页面链接跳转，新开窗口，前进，后退时，强缓存和协商缓存均有效
2. 用户在 F5刷新页面，强缓存无效，协商缓存有效
3. 用户在 ctrl+F5刷新页面，强缓存和协商缓存均无效

分布式系统的缓存

分布式系统的多台机器间的last-modified必须保持一致，而且尽量关闭Etag，
因为每台机器的Etag都会不一致

服务器缓存

服务器缓存属于共享缓存

包括

1. 代理服务器缓存

2. 源服务器缓存

3. CDN缓存