http 缓存

什么是缓存

（画图，http 请求过程）

缓存，即某些情况下，资源不是每次都去服务端获取，而是第一次获取之后缓存下来。 下次再请求时，直接读取本地缓存，而不再去服务端请求。

为什么需要缓存

核心需求，让网页更快的显示出来，即提高性能。

• 计算机执行计算，非常快
• 包括页面渲染，JS 执行等
• 加载资源却非常慢（相比于计算来说），而且受限于网络不可控。

解决好最关键的问题 —— 缓存网络资源

哪些资源需要缓存

对于一个网页来说

• html 页面不能缓存
• 业务数据不能缓存（例如一个博客项目，里面的博客信息）
• 静态资源可以缓存，js css 图片等（所有的静态资源累加起来，体积是很大的）

PS：讲 webpack 时讲过 contentHash ，就是给静态资源加上一个唯一的 hash 值，便于缓存。

缓存策略 —— 强制缓存，客户端缓存

Cache-Control (response headers 中) 表示该资源，被再次请求时的缓存情况。

• max-age:31536000 单位是 s ，该资源被强制缓存 1 年
• no-cache 不使用强制缓存，但不妨碍使用协商缓存（下文会讲）
• no-store 禁用一起缓存，每次都从服务器获取最新的资源
• private 私有缓存（浏览器级缓存）
• public 共享缓存（代理级缓存）

关于 Expires

• http 1.0 ，设置缓存过期时间的
• 由于本地时间和服务器时间可能不一致，会导致问题
• 已被 Cache-Control 的 max-age 代替

缓存策略 —— 协商缓存（对比缓存），服务端缓存

当强制缓存失效，请求会被发送到服务端。此时，服务端也不一定每次都要返回资源，如果客户端资源还有效的话。

第一，Last-Modified（Response Headers）和 If-Modified-Since（Request Headers）

• Last-Modified 服务端返回资源的最后修改时间
• If-Modified-Since 再次请求时带着最后修改时间
• 服务器根据时间判断资源是否被修改（如未被修改则返回 304，失败则返回新资源和新的缓存规则）

第二，Etag（Response Headers）和 If-None-Match（Request Headers）

• Etag 服务端返回的资源唯一标识（类似人的指纹，唯一，生成规则由服务器端决定，结果就是一个字符串）
• If-None-Match 再次请求时带着这个标识
• 服务端根据资源和这个标识是否 match （成功则返回 304，失败则返回新资源和新的缓存规则）

如果两者一起使用，则优先使用 Etag 规则。因为 Last-Modified 只能精确到秒级别。

缓存策略 - 综述

画图，参考视频

刷新操作对应不同的缓存策略

三种操作

• 正常操作：地址栏输入 url ，点击链接，前进后退等
• 手动刷新：F5 或者点击刷新按钮
• 强制刷新：ctrl + F5

对应的缓存策略

• 正常操作：强制缓存有效，协商缓存有效
• 手动刷新：强制缓存失效，协商缓存有效
• 强制刷新，强制缓存失效，协商缓存失效

小结

关于 http 缓存的重点

• 强缓存和协商缓存
• 几个 http headers
• 流程图