比来大年夜家针对preload、HTTP/2 push和ServiceWorker的浏览器缓存实现展开了激烈的评论辩论，而这也引起了很多人的困惑。
鉴于此，我想讲个故事来让大年夜家懂得一个请求若何完成他的任务并找到匹配的缓存资本，以下内容均基于 Chromium 的术语，不过其余浏览器的实现本质膳绫腔有太大年夜的差别。
Questy 走向 Service Worker 询问他有没有合适的资本。可惜的是 Service Worker 大年夜来没有见过那个域的资本，所以他也找不到 Questy 寻找的请求了。于是，Service Worker 让 Questy 持续前行(经由过程 fetch())，大年夜而在收集栈这片神奇的地盘里持续寻找她须要的资本。
Questy 的路程
Questy 是一个请求。她是在衬着引擎内(也叫衬着器)出生的。她欲望能在这个标签页封闭前找到一个让她的“人生”再无遗憾的资本。
所以 Questy 展开了她寻求幸福的路程。 然则她会在哪里找到一个恰好合适的资本呢?
此时离她比来的是……
内存缓存(Memory Cache)
内存缓存中包含了大年夜量的资本。他包含了所有衬着引擎请求的资本。这些资本都是现有文档的一部分。在文档的生命周期中他们都邑被储存在此。这意味着，如不雅 Questy 寻找的资本已经被文档中的其余部分加载了，那么他们会在此相遇。
确切来说，“短期内存缓存”这个名字可能会更合适。因为内容缓存仅在导航停止前保存这些资本，在某些情况下，时光甚至会更短。
事实上，很多种情况都邑导致 Questy 寻找的资本已经被加载。
推送缓存(其实他更应当被描述为“待认领的推送流存储器”，不过那实袈溱是太拗口了)是存储 HTTP/2 推送资本的处所。它们是 HTTP/2 会话的一部分，这有几个特别的含义。
显示 preload 指令()则是另一种较为可能产生的情况。该指令会让浏览器预加载资本并存储在内存缓存中。
除此之外，还有可能是因为所请求的资本竽暌闺之前的 DOM 节点或者 CSS 规矩所须要的资本雷同。例如，一个页面中可能会含有多个具有雷同 src 属性的<img>元素，然则他们会获得同一个资本。而实现这种机制的┞俘是内存缓存。
然而，内存缓存不会随便马虎匹配我们的资本请求。当然了，为了使要乞降资本相匹配，他们必须要有雷同的 URL 。不过，这还不是全部。他们还必须要有雷同的资本类型(如许子一个脚本资本才不会被一个图片请求所匹配)，雷同的 CORS 策略和一些其他特点。
- 规范并没有十分地明白定义内存缓存所须要匹配的特点，所以不合的浏览器的实现可能会有必定的差别。
有一样器械是内存缓存不关怀的，那就是 HTTP 语义。无论资本的头晨是是否带有 max-age=0 或者 no-cache 、Cache-Control标签，内存缓存都不关怀。因为在当前导航中，资本是可以重用的，所以 HTTP 语义并不重要。
独一例外的是no-store指令。在某些特定的情况下浏览器会尊敬他。(例如，当资本被零丁节点重用时)。
所以，Questy 走上前询问内存缓存是否有匹配的资本。唉，然而并没有。
Questy 并没有放弃。她走过资本急鹞鲼和开辟者对象的收集注册点。在那边，她注册为寻找资本的请求(这意味着如不雅她能找到匹配的资本，则会涌如今开辟中对象和资本急鹞鲼中)。
完成了这些官方挂号后，她持续向前……
Service Worker 缓存
预加载器(preloader)可能是最常产生的情况。如不雅 Questy 是由 HTML 解析器创造的 DOM节点所激发的，那么她很可能会发明，她所寻找的资本早已在 HTML 标记化阶段加载完毕了。
和内存缓存不一样，Service Woker爱好不走平常路。他的行难堪以猜测。因为他只遵守开辟者告诉他的规矩。
起首，Service Worker只有安装后才会存在。并且因为他的逻辑是由开辟者编写的 JavaScript 而不是浏览器控制的，所以 Questy 完全不知道她能不克不及在这里找到那个他?那个资本长成什么的?他是被存储在缓存里吗?照样说他是由 Service Worker 的主人精心捏造的响应?
而一旦进入收集栈，最轻易找到资本的处所就是……
这些问题没有人可以答复她。因为 Service Worker 自成一套，无论是资本的匹配方法照样响应的包装办法，他们都能按照本身的的设法主意去完成。
既然他是一个持久性的缓存，他也须要移除资本。但和 Service Worker 不一样的事，他会在认为他须要空间来存储更重要或者会被更多人须要的资本时，逐个移除那些旧资本。
推荐阅读
基本常识HTTP协定我们浏览网页的浏览器和手机应用客户端与办事器通信几乎都是基于HTTP协定，而爬虫可以看作是一个另类的客户端，它把本身假装成浏览器或者手机应用客户端，按照本身的逻辑>>>详细阅读
本文标题：关于Web缓存的那些风流事儿
地址：http://www.17bianji.com/lsqh/34755.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示