浏览器缓存作用
加快页面打开速度
减轻服务器压力
减少网络损耗
浏览器缓存有两种方式:
1、mate 标签
2、header 头
mate 标签控制 1、content-type(文档内容类型:用于设定文档的类型和字符集)2、expires(期限:可以用于设定网页的到期期限)3、pragma(cashe 模式:即是否从缓存中访问网页内容)4、refresh(刷新:等待一定时间自动刷新或跳转到其他 url)
// 文档类型
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
// 必须是 GMT 格式
<meta http-equiv=”expires” content=”Fri,12 Jan 2001 15:15:15 GMT”>
// 是否设置缓存
<meta http-equiv=”pragma” content=”no-cache”>
// 等待一定时间自动跳转
<meta http-equiv=”refresh” content=”1; url=https://www.baidu.com”/>
* 说了这么多 mate 兼容性不靠谱!所以说基本没用
接下来说点有用的,浏览器会通过 Response header 信息,来确认是否缓存,怎么缓存。
头信息缓存机制有分两种
强缓存
协商缓存
先说强缓存:
在控制台资源加载 size 栏我们会看到架子啊资源的大小,如果是缓存直接在本地读取(from memory cache 来自内存缓存)(from disk cache 来自磁盘缓存)
浏览器加载资源时先判断头信息是否包含 Cache-Control 和 Expires 这两个属性,Expires 是 http1.0,Cache-Control 是 http1.1, 从版本上来说肯定是 Cache-control 更强一些,毕竟不能越升级越 low,约定也是两个同时存在 Cache-control 优先级更高。
截图为 js 的 Response header 信息,包含 Cache-control 和 Expires,但从字面上我们能看出 Expires 设置了一个时间,我们猜它应该是过期时间,擦居然猜对了。我们再猜一下 Cache-control:一坨字段,max-age=31536000,我猜也是过期时间,哈哈又猜对了,不逗比了挨个说说
Expires:设置浏览器缓存时间,时间是绝对时间,从设置的值上可以看出是个日期,浏览器收到 Response 时看看有没有 Expires 字段有的话缓存头信息和资源,再次请求时查看缓存时间过没过,没过在缓存拿出来,过了重新请求。
Cache-control:这个承载值就多了
max-age=xxx:缓存的内容将在 xxx 秒后失效,这个时间是个时间间隔相对时间。public:所有内容都将被缓存(客户端和代理服务器都可缓存)private:内容只缓存到私有缓存中(仅客户端可以缓存,代理服务器不可缓存)no-cache:必须先与服务器确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌(ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载 no-store:所有内容都不会被缓存或 Internet 临时文件中 must-revalidation/proxy-revalidation:如果缓存的内容失效,请求必须发送到服务器 / 代理以进行重新验证
服务端如何判断缓存已失效?
服务端通过 If-Modified-Since(Last-Modified)和 If-None-Match(Etag)这两个属性的值来判断缓存是否失效的。
2、协商缓存:当浏览器判断不是强缓存,就会发向服务器发请求,判断是否是协商缓存。如果是,服务器会返回 304Not Modified,浏览器从缓存中加载。那什么又是协商缓存呢?
Last-Modified 和 If-Modified-Since 字段:
1、浏览器第一次向服务器发请求,服务器返回资源并在 response header 加上 Last-Modified 字段,表示资源最后修改的时间。2、浏览器再次请求这个资源时,请求头会加上 If-Modified-Since 字段。若这两个字段一样,说明资源没有修改过,返回 304Not Modified,浏览器从缓存中获取资源。若这两个字段不一样,说明资源修改过,服务器正常返回资源。
ETag、If-None-Match:
但有时候服务器上资源有变化,单最后修改时间没更新,则引出下面两个字段。1、浏览器第一次向服务器请求,服务器返回资源并在 response header 上加 ETag 字段。表示资源本身,资源有变化,则该字段有变化。2、浏览器再次向服务器请求这个资源时,请求头携带 If-None-Match 字段。若这两个字段相同,则代表资源没有变化,服务器返回 304Not Modified,浏览器从缓存中加载。若两个字段不同,证明资源有变动,服务器正常返回资源。
参考:https://juejin.im/post/5a7a8e…https://juejin.im/post/59c602…