HTTP缓存和HTML5离线储存有什么区别？

Question

我了解的前端缓存分为http缓存和浏览器缓存；
1.http缓存下分为 强缓存 和 协商缓存 ；
2.浏览器缓存下有 离线储存 和 本地缓存（cookie、webstorage等）

---

我知道本地缓存（cookie、webstorage等）缓存的都是数据；
但是http缓存和html5离线储存有什么区别呢？在我看来他们缓存的都是网页啊。

比如：在有网络的情况下，第二次访问一个网站。该网站设置了离线缓存并且强缓存命中。
那么我打开页面的时候使用的到底是哪一个缓存的资源呢？

Answer 1

不只是缓存网页，任意资源都可以缓存（甚至所谓的 API 接口，其实本质也是资源）。

HTML5 离线存储的优势主要就这么两个：

• 配置与 WebServer 解耦。一般来说，静态资源想做 HTTP 缓存是需要修改 WebServer 配置的，比如 Nginx 的配置中常见的：

location ~* \.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$  {    
    expires 30d;
}

这种下，如果需要对缓存的配置，还需要重启 WebServer（确实有少数支持热更新配置，但你指望这个？），对于现在前后端分离的大环境而言很不友好。

• 完全脱机。普通的 HTTP 缓存，其实还是有一次网络请求，利用了 Cache-Control、ETag、Last-Modified、If-Modified-Since、If-None-Match 这几个标头，服务端返回 304 状态码来告知浏览器可以使用之前的资源，节省的是该资源本身传输的网络开销，但并没有真正省去网络请求本身。HTML5 离线存储则是一旦缓存成功，就完全脱机化了，直到 manifest 发生变化。

当然了，也不是没有缺点，比如不支持增量更新、容错机制差等等。

关于最后一个问题的答案是，HTML5 离线存储的优先级比 HTTP 缓存高，两者同时存在时以前者为优先。

Answer 2

离线缓存利用fetch事件拦截了所有请求，命中的情况下不会走到http的流程，直接返回缓存了，不会命中http强缓存。

纠正楼上一点，服务器返回304是命中协商缓存的情况，在某些缓存策略下，客户端发现缓存可能过期，因此发起一次请求，服务器发现资源没有变化，就只返回一个304的http头即可。如果是命中强缓存，也是不会发请求的，直接就读取缓存了。

http缓存是多次迭代的结果，补丁打得有点多。所以可以结合各字段提出的时间表来分析记忆。

离线缓存是web模仿app的一个尝试--希望能够像原生app那样，离线也至少能看到一个架子。