萌新！HTTP缓存和HTML5离线储存有什么区别？大佬们有什么好的建议？

Question

我了解的前端缓存分为http缓存和浏览器缓存；1.http缓存下分为强缓存和协商缓存；2.浏览器缓存下有离线储存和本地缓存（cookie、webstorage等）
我知道本地缓存（cookie、webstorage等）缓存的都是数据；但是http缓存和html5离线储存有什么区别呢？在我看来他们缓存的都是网页啊。
比如：在有网络的情况下，第二次访问一个网站。该网站设置了离线缓存并且强缓存命中。那么我打开页面的时候使用的到底是哪一个缓存的资源呢？

Answer 1

离线缓存利用fetch事件拦截了所有请求，命中的情况下不会走到http的流程，直接返回缓存了，不会命中http强缓存。纠正楼上一点，服务器返回304是命中协商缓存的情况，在某些缓存策略下，客户端发现缓存可能过期，因此发起一次请求，服务器发现资源没有变化，就只返回一个304的http头即可。如果是命中强缓存，也是不会发请求的，直接就读取缓存了。http缓存是多次迭代的结果，补丁打得有点多。所以可以结合各字段提出的时间表来分析记忆。离线缓存是web模仿app的一个尝试--希望能够像原生app那样，离线也至少能看到一个架子。