javascript 前端优化-浏览器缓存

浏览器缓存作用

加快页面打开速度
减轻服务器压力
减少网络损耗

浏览器缓存有两种方式：

1、mate标签

2、header头

mate标签控制
1、content-type(文档内容类型：用于设定文档的类型和字符集)
2、expires(期限：可以用于设定网页的到期期限)
3、pragma（cashe模式：即是否从缓存中访问网页内容）
4、refresh(刷新：等待一定时间自动刷新或跳转到其他url)

// 文档类型


// 必须是 GMT 格式


// 是否设置缓存


// 等待一定时间自动跳转

*说了这么多 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...