http缓存

2、http 缓存

• 关于缓存的介绍。
• http 缓存策略（强制缓存 + 协商缓存）。
• 刷新操作方式，对缓存的影响。

4.1 关于缓存

什么是缓存？ 把一些不需要重新获取的内容再重新获取一次

为什么需要缓存？ 网络请求相比于 CPU 的计算和页面渲染是非常非常慢的。

哪些资源可以被缓存？ 静态资源，比如 js css img。

4.2 强制缓存

Cache-Control：

• 在 Response Headers 中。
• 控制强制缓存的逻辑。
• 例如 Cache-Control: max-age=3153600（单位是秒）

Cache-Control 有哪些值：

• max-age：缓存最大过期时间。
• no-cache：可以在客户端存储资源，每次都必须去服务端做新鲜度校验，来决定从服务端获取新的资源（200）还是使用客户端缓存（304）。
• no-store：永远都不要在客户端存储资源，永远都去原始服务器去获取资源。

4.3 协商缓存（对比缓存）

• 服务端缓存策略。
• 服务端判断客户端资源，是否和服务端资源一样。
• 一致则返回 304，否则返回 200 和最新的资源。

 

资源标识：

• 在 Response Headers 中，有两种。
• Last-Modified：资源的最后修改时间。
• Etag：资源的唯一标识（一个字符串，类似于人类的指纹）。

Last-Modified： 服务端拿到 if-Modified-Since 之后拿这个时间去和服务端资源最后修改时间做比较，如果一致则返回 304 ，不一致（也就是资源已经更新了）就返回 200 和新的资源及新的 Last-Modified。

 

Etag： 其实 Etag 和 Last-Modified 一样的，只不过 Etag 是服务端对资源按照一定方式（比如 contenthash）计算出来的唯一标识，就像人类指纹一样，传给客户端之后，客户端再传过来时候，服务端会将其与现在的资源计算出来的唯一标识做比较，一致则返回 304，不一致就返回 200 和新的资源及新的 Etag。

两者比较：

• 优先使用 Etag。
• Last-Modified 只能精确到秒级。
• 如果资源被重复生成，而内容不变，则 Etag 更精确。

4.4 综述

 

4.4 三种刷新操作对 http 缓存的影响

• 正常操作：地址栏输入 url，跳转链接，前进后退等。
• 手动刷新：f5，点击刷新按钮，右键菜单刷新。
• 强制刷新：ctrl + f5，shift+command+r。

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