什么是浏览器缓存机制
我们会发现浏览器第一次打开一个网页时加载是比较慢的, 第二次再打开的时候就会快很多,这是为什么呢?
概念
因为浏览器会将请求后的资源进行贮存为离线资源，当下次需要资源时，浏览器会根据机制决定直接使用离线资源还是向服务器发送器请求
作用
- 减少不必要数据的传输, 降低服务器压力
- 加快了客户端访问速度
- 增强用户的体验
第一种是强缓存
- 服务端发送请求, 强制使用浏览器缓存
实现方式
- 在响应头中返回 Expires 和 cache-Control
来讲一下Expires
-
http 1.0协议的字段
-
返回过期时间(他是绝对时间)
-
浏览器: 使用Expires 到期时间和本地时间进行对比, 如果本地时间被修改或者和服务器时间差距较大, 造成不准确的问题
Cache-Control又是什么
-
che-Control 是 HTTP1.1的字段
-
过期时间的相对时间
当cache-control和expires同时存在时, cache-control的优先级会比expires更高
第二种是协商缓存
-
缓存失败后, 会使用协商缓存
-
缓存由服务器决定是否使用缓存
- 向服务器发送请求资源并携带标识
Etag字段: 表示请求资源在的唯一标识, 浏览器可以根据Etag值缓存数据, 下次请求时以if-None-Match字段请求Last-Mondified字段: 用于标记请求资源的最后一次修改时间
- 服务器会进行判断浏览器缓存的资源是否真的失败是否更新
真的失效, 服务器已经更新, 返回200, 重新返回最新资源和缓存标识, 浏览器再次存入缓存, 后续再次从强缓存开始
- 缓存时间到了, 但是资源没有更新, 就还使用本地的, 直接返回304
总结
详细流程图解:
