社区首页 >专栏 >Web浏览器缓存机制

Web浏览器缓存机制

原创

伯爵

修改于 2019-10-15 02:07:27

1.5K0

Web浏览器缓存机制

Web缓存是存在服务器和客户端之前的资源副本。客户端会缓存请求过的静态资源（图片，CSS 文件，JS文件等），当用户再次请求相同的url时，浏览器会根据缓存规则判断是否使用已经缓存的静态资源文件，或者绕过资源缓存直接请求服务器重新获取资源。

Web缓存也就是HTTP缓存机制，是前端性能优化的重要措施，利用Web缓存可以：

减少数据冗余传输
减轻服务器请求压力
减少资源请求因为网络传输导致的时延，加快渲染速度
较少的数据传输可以减轻网络线路的传输瓶颈。

HTTP缓存首部

Web缓存机制主要是利用HTTP协议定义的首部信息控制缓存。常见的与缓存相关的首部有：

版本	首部	实例	描述
HTTP1.0	Pragma	Pragma	设置页面是否缓存，Pragma为缓存，no-cache表示忽略缓存
	Expires	Mon, 22 Jul 2002 11:12:01 GMT	Expires的值是格林尼治时间格式的参数，用来设置过期时间，即定义资源的失效时间，失效时间内则请求使用缓存资源
HTTP1.1	Cache-Control	Cache-Control:max-age=600	Cache-Control首部是为了解决服务器和客户端时间不一致问题导致缓存失效的问题，（a）max-age=600：配置的是请求发起时开始计算的相对时间（毫秒），当前参数时间内请求资源使用缓存资源（b）no-cache：每次发起请求都需要验证缓存资源的新鲜度，新鲜度满足则返回304状态码，使用缓存资源，否则返回200状态码，返回资源主体（c）no-store：不缓存，每次请求需要从服务器重新获取资源（d）public：所有内容只有客户端可以缓存（e）private：只允许客户端缓存
	Last-Modified/If-Modified-Since		这两个首部需要配合使用，同时需要Cache-Control标识参与。（a）Last-Modified：服务器在相应资源请求时，标识资源最后的修改时间，（b）If-Modified-Since ：资源过期并且存在Last-Modified声明，请求首部 If-Modified-Since获取Last-Mdodied的值发送到服务器和请求资源的修改时间比对，如果服务器资源修改过则返回资源主体和200状态码到浏览器，浏览器更新缓存资源，否则说明资源无修改返回304状态码
	Etag/If-None-Match	W/v20.1	配合Cache-Control使用。（a） Etag是请求的服务器资源的唯一标识，资源改动则标识更改，从而验证资源是否更新。（b）当资源过期请求携带首部If-None-Match赋值Etag的标识值，与服务资源标识进行比对，如果发生变化则变化则返回200状态码和资源主体，否则返回304状态码

缓存分类

HTTP缓存可以根据缓存过程分为强制缓存和协商缓存。

（1）强制缓存：向浏览器缓存查询请求结果，根据缓存结果规则是否使用缓存资源

不存在缓存标识和缓存结果，直接请求服务器资源
存在缓存结果和缓存标识，缓存结果失效，使用协商缓存
存在缓存结果和缓存标识，缓存结果未失效，使用缓存

强制缓存的相关的首部：Expires和Cache-Control

（2）协商缓存：当强制缓存失效，缓存规则使用协商缓存，HTTP请求向服务器发起缓存器验证，服务器判断缓存是否生效。

缓存生效，返回304状态码
缓存失效，返回200状态码和新的资源结果，浏览器加载资源并且更新本地缓存

协商缓存相关的首部：Last-Modified / If-Modified-Since和Etag / If-None-Match

缓存优先级：

Pragma 和Expires是HTTP1.0定义的用于管理缓存的首部字段，当两个首部字段同时存在，Pragma的优先级高于Expires
Cache-Control是HTTP1.1定义的首部字段，是为了解决Expires定义的过期时间相对于服务器而已，无法确保服务器和客户端时间一致性问题。 Cache-Control的优先级高于Expires
强制缓存优先级高于协商缓存
Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since