http缓存

关于缓存

什么是缓存？

页面加载完成一次后，再次加载页面，有些资源没必要再次向服务端获取，暂存一份。

为什么要缓存？

优化网络请求，让页面加载更快

哪些资源可以被缓存？

通常情况下：静态资源（js css img）可以被缓存，html不能被缓存

强制缓存

浏览器向服务器初次发送请求，服务器返回资源和 Cache-Control 。当服务器认为该资源可以被缓存时，才返回 Cache-Control ，如果服务器认为该资源不适合被缓存时，就不会返回 Cache-Control 。

浏览器再次发送请求时，如果该资源有 Cache-Control 并且时间并未过期，浏览器则从本地获取缓存下来的资源，不会向服务端获取。

如果缓存失效了（时间过期了），就再次向服务端请求资源，服务端返回资源和 Cache-Control 。

Cache-Control

存在于 Response Headers 中，用于控制强制缓存的逻辑

Cache-Control 的值

max-age 缓存时间
no-cache 不缓存，交给服务端做缓存处理
no-store 不缓存，也不让服务端做缓存处理，直接让服务端返回资源
private 最终用户缓存
public 路由代理缓存

关于Expires

也在 Response Headers 中
也控制缓存是否过期
已被 Cache-Control 代替

协商缓存（对比缓存）

服务端缓存（判断一个资源是否可以被缓存，并不是缓存在服务的端）
服务端判断客户端资源是否和服务端资源一样
一致则返回304，否则返回200和最新资源

资源标识

在 Response Headers 中
Last -Modified 资源的最后修改时间
Etag 资源的唯一标识（一个字符串，服务端根据资源内容计算出来的）
对应的key
if-Modified-Since : Last-Modified
if-None-Match : Etag

Last-Modified 和 Etag 共存时，会优先使用 Etag
因为
Last-Modified 只能精确到秒级
如果资源被重复生成，而内容不变，则 Etag 更精确（例如每隔一秒重复生成相同资源）

浏览器初次向服务端发送请求时，服务端返回资源和相应的资源标识。当浏览器再次发送请求时，会带着资源标识一起发送请求。服务器收到请求时，会根据资源标识做资源比较。例如最后一次修改时间 Last-Modified 没有变时，返回304；当最后一次修改时间 Last-Modified 发生了改变，返回资源和资源标识。唯一标识 Etag 相同时，返回304.；唯一标识 Etag 不同时，返回资源和资源标识。

http缓存综述

浏览器向服务端发送请求时，如果有 Cache-Control ,则检查是否过期。如果没有过期，就读取本地缓存，也就是强缓存，页面呈现。如果缓存已过期，则检查是否有 Last-Modified 和 Etag，如果没有则向服务端发送请求，服务端返回资源，页面呈现。如果有 Last-Modified 和 Etag ,则向服务端发送请求时，带上 if-None-Match 、if-Modified-Since 字段，服务端收到请求后检查缓存是否可用，不可用则返回200和资源，页面呈现。可用则返回304，浏览器读取本地缓存，页面呈现

补充

304 状态码表示资源未被修改，不必再向服务端请求资源

刷新对缓存的影响

正常刷新：地址栏输入URL，跳转链接，前进后退等。此时强制缓存有效，协商缓存有效
手动刷新：F5，点击刷新按钮。此时强制缓存失效，协商缓存有效
强制刷新：Ctrl+F5 。此时强制缓存失效，协商缓存失效