一些准备

在开始这个话题之前，我们有必要简单回顾一下 浏览器（webkit）的网页渲染过程（如果想要详细了解这个过程，可以戳我几年前写的一篇 

这些资源，在 webkit 内部是以 URL 作为 key 去查找的。因为 URL 是标记资源的唯一性的特征。

三、资源加载器

webkit 总共有 3 种资源加载器：

• 针对每种资源类型的特定加载器，该类资源加载器只加载某一种资源。其内部表示有：ImageLoader、FontLoader 等
• 资源缓存机制的资源加载器，特定资源加载器都共享它来插入和查找缓存资源。其内部表示为：CachedResourceLoader
• 通用资源加载器，当浏览器需要从文件系统或网络加载资源时，会使用该类加载器，但它只负责获取资源的数据，正因为如此，它也被所有的特定资源加载器所共享。其内部表示为：ResourceLoader

以 ImageLoader 这个特定资源加载器为例，大致可用下图描述：

结合 chrome 浏览器调试工具，以访问百度首页为例，来观察百度 logo 的请求情况。为防止之前的缓存，采用 “清除缓存并硬性重新加载” 方式访问。表现如下：

再正常不过的 200， 没有 from * cache 标识意味着来源于网络。新开 tab， 再次访问百度首页：

发现在 size 列（倒数第二列）多了 “(from disk cache)” 字样。在此基础上（不关闭 tab），正常刷新该页面： 

聪明的你一定发现 了原来 size 列的 “from disk cache” 变为了 “from memory cache”。顾名思义，两张图片的加载方式由从 磁盘缓存读取 变为了 从内存缓存读取。摘一段官网上的文档（文档地址）：

简单翻译：Chrome 使用两种缓存：磁盘缓存和高速的内存缓存。内存缓存（memory cache）依附于渲染进程，我们可以大致认为一个渲染进程就等于一个 tab。

因此，“from memory cache” 只有在正常刷新的情况下，才会命中。这也解释了前面示例中新打开的 tab 访问百度首页，得到的是 “from disk cache”。

四、过程

经过前面的介绍，我们建立起了对 资源、资源缓存、资源加载器 的认知。接下来详细聊聊资源的加载过程。还是以图片加载为例：

我们都知道，在网页加载时，如遇到 script 标签（未声明异步），会阻塞渲染。在这种情况下，webkit 会启动另外一个去遍历后面的 HTML 网页，收集需要的资源的 URL，然后发送请求，以此来避免阻塞。

回到资源缓存的话题，前面提到，在 webkit 内部是存在一个 “缓存池” 。为了保证在有限空间的缓存池内能够持续的插入新的缓存，它使用 LRU 算法来管理缓存。https://www.cnblogs.com/inJS/p/9709499.html