什么是浏览器缓存
浏览器缓存(Browser Caching)是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者访问同一页面时,浏览器就可以直接从本地磁盘加载文档
浏览器缓存的优点
- 减少了冗余的数据传输,节省了网费
- 减少了服务器的负担,大大提升了网站的性能
- 加快了客户端加载网页的速度
浏览器缓存的大概流程
- 浏览器第一次请求时,服务器返回 200,浏览器将资源文件下载下来
- 浏览器再次发送请求时
- 浏览器会判断是否命中强缓存
- 如果命中,则直接从缓存中获取资源,本次请求不会与服务器通信
- 如果没有命中,浏览器会把请求发送到服务器
- 服务器会根据请求判断是否命中协商缓存
- 如果命中,则服务器返回 304 Not Modified,浏览器从缓存中加载资源
- 如果没有命中,则返回最新内容,状态码为 200
- 浏览器会判断是否命中强缓存
强缓存
强缓存是利用 http response header 中的 Expire
或者 Cache-Control
控制
Expires
- 该字段是 http1.0 的规范
- 它是一个绝对时间的 GMT 格式的字符串,比如
Expires: Mon,18 Oct 2066 23:59:59
- 这个时间代表资源的失效时间,如果发送的时间在此时间之前,则命中强缓存
- 缺点:由于失效时间是一个绝对时间,所以服务器和客户端时间偏差比较大的时候,就会导致缓存混乱
Cache-Control
- 该字段是 http1.1 中的规范
- 主要是利用
max-age
值进行判断 - 这是一个相对的时间,比如
Cache-Control: max-age = 3600
代表资源有效期是 3600 秒 - 通过计算资源第一次请求的时间和
Cache-Control
设定的有效期,计算资源过期的时间 - 然后拿这个时间和请求时间比较,如果在请求时间之前,则命中强缓存
- 几个常用的设置值
-
no-cache
:不走强缓存,有可能会命中协商缓存 -
no-store
:禁止浏览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源,协商缓存也不会命中了 -
public
:可以被所有用户缓存,包括终端用户,和 CDN 等中间代理服务器 -
private
:只能被终端用户的浏览器缓存,不允许 CDN 等中继服务器对其缓存
-
注意:Cache-Control
和 Expires
可以在服务器端配置同时启用,同时启用的时候 Cache-control
的优先级高
协商缓存
协商缓存就是由服务器来确定缓存是否可用,所以客户端和服务器端要通过某种标识来进行通信,从而让服务器判断请求的资源是否可以缓存访问
主要涉及两组 header
字段,这两组字段都是成对出现的
第一次请求的 response header 带上某个字段(Last-Modified
或者Etag
),后续请求则会带上对应的请求字段(If-Modified-Since
或者If-None-Match
),如果 response header 没有Last-Modified
或者Etag
,则 request header 也不会有对应的字段
Last-Modified/If-Modified-Since
- 浏览器第一次请求一个资源的时候,response header 中会加上
Last-Modified
,该字段表示资源最后修改的时间,例如Last-Modified: Thu,31 Dec 2037 23:59:59 GMT
- 浏览器在再次请求资源时,request header 中会包含
If-Modified-Since
,该值为缓存之前返回的Last-Modified
- 服务器收到
If-Modified-Since
后,根据资源在服务器上最后修改的时间判断是否命中协商缓存 - 如果命中,直接返回 304 Not Modified,不会返回资源内容,也不会更新 response deader
- 如果没有命中,正常返回资源内容,response header 中的
Last-Modified
会更新 - 浏览器下次请求时,
If-Modified-Since
会启用上次返回的Last-Modified
的值
Etag/If-None-Match
该字段是 http1.1 中的规范
和Last-Modified/If-Modified-Since
不同的是
-
Etag/If-None-Match
返回的是一个校验码 - 当服务器返回 304 Not Modified 的响应时,由于
ETag
重新生成过,response header 中还会把这个ETag
返回,即使这个ETag
跟之前的没有变化
为什么要有 Etag
HTTP1.1中 Etag
的出现主要是为了解决几个Last-Modified比较难解决的问题:
- 一些文件也许会周期性的更改,但是它的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET
- 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),
If-Modified-Since
能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒) - 某些服务器不能精确的得到文件的最后修改时间
注意:Last-Modified
与 ETag
是可以一起使用的,服务器会优先验证ETag
,一致的情况下,才会继续比对 Last-Modified
,最后才决定是否返回304
强缓存和协商缓存的区别
参考
https://www.jianshu.com/p/1a1536ab01f1
http://caibaojian.com/browser-cache.html
https://www.cnblogs.com/wonyun/p/5524617.html