2个核心规则：1每次请求前检查。2每次请求后存储
缓存分为强缓存（不发请求）、协商缓存：
强缓存，console台network可以看到size显示from disk cache等。
它是通过设置http header中的Expires和Cache-Control来实现的。
Expires: Wed, 22 Oct 2018 08:41:00 GMT表示资源会在
Wed, 22 Oct 2018 08:41:00 GMT 后过期，需要再次请求。
是http/1的产物，如果本地修改了时间，可能会造成缓存失效
Cache-Control是http/1.1的规则。举例：Cache-Control:max-age=300时，
则代表在这个请求正确返回时间的5分钟内再次加载资源，就会命中强缓存。
又比如：Cache-Control:public时，表示缓存可以在代理和缓存
/*** 我们可以将多个指令配合起来一起使用，达到多个目的 ***/
其实两者的区别不大。如果同时存在的话，后者的优先级更高。如果某些不支持后者的环境下，则会使用Expires。
一个问题引申出 --- “协商缓存”：缓存到期后，服务端有更新，或未更新的处理。
协商缓存成功。再次从浏览器的缓存中取
协商缓存失败，获取更新数据一份，并缓存在本地
协商缓存策略之：Last-Modified
协商缓存策略之：ETag
两者的对比：
1，ETag在精度上优与Last-Modified。因为1s内可能修改多次。
etag是每次都会产生新的hash值，而last-modified则不会
2，性能方面，因为要计算hash，所以etag逊色一点
3，但是服务器优先考虑etag
整体的判断流程和规则
场景：
1,对于频繁变动的资源，用Cache-Control: no-cache。
不常变动的资源Cache-Control: max-age=31536000（一年）
解决文件的更新问题，则用hash值。比如home.1000.js的强制缓存时间1年《
一年内有新的home.2000.js，则不会在使用1000.js。但是缓存还在的
2，
用户行为和影响：
1，打开网页。查找disk cache是否有匹配。有就使用，没有就发请求
2，F5刷新。Tab没关闭，从memory cache优先匹配，其次才是disk cache
3，Ctrl+F5。强制刷新时不使用缓存，请求头带有Cache-Control: no-cache。服务器返回最新内容
整体架构图，总结
网友评论