javascript 前端优化-浏览器缓存

zaocha 2019-06-30

浏览器缓存作用
  • 加快页面打开速度
  • 减轻服务器压力
  • 减少网络损耗
浏览器缓存有两种方式:
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信息,来确认是否缓存,怎么缓存。

头信息缓存机制有分两种
  • 强缓存
  • 协商缓存

先说强缓存:
javascript 前端优化-浏览器缓存

在控制台资源加载 size栏我们会看到架子啊资源的大小,如果是缓存直接在本地读取 (from memory cache 来自内存缓存)(from disk cache 来自磁盘缓存)

浏览器加载资源时先判断头信息是否包含Cache-Control和Expires这两个属性,Expires是http1.0,Cache-Control是http1.1,从版本上来说肯定是Cache-control更强一些,毕竟不能越升级越low,约定也是两个同时存在Cache-control优先级更高。

javascript 前端优化-浏览器缓存

截图为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...

相关推荐