前端缓存

Memory Cache 和 Disk Cache

# Memory Cache

该缓存保留网页用到的子资源：图片，js, css, 等等。它保持一个灵活但有限的dead resource窗口，窗口大小随着live resource的负载扩大/缩小。

如果 shouldMakeResourcePurgeableOnEviction返回true，缓存变化的方式如下：

缓存中的dead resources 被保留在non-purgeable内存中
当我们裁剪(prune)dead resources时，不是真的释放内存，而是把它们的内存标记为purgeable直到内核重新申请该内存。

通过把裁剪的dead resource保留在“非纯净”常驻内存中，我们较少了因系统回收内存而不得不重新加载资源的可能性（比如当用户点击后退时）而且通过使用purgeable memory存储无限多个资源对象，我们能够使用机器的所有内存。

# Memory Cache 构成

Memory Cache 原文 (opens new window)

# Disk Cache

Disk Cache是存储在计算机硬盘中的一种缓存，它的优缺点与 Memory Cache 正好相反，比如优点是生命周期长，不触发删除操作则一直存在，而缺点则是获取资源的速度相对内存缓存较慢。

Disk Cache 会根据保存下来的资源的 HTTP 首部字段来判断它们是否需要重新请求，如果重新请求那便是强缓存的失效流程，否则便是生效流程。

# 缓存获取顺序

按照缓存顺序来讲，当一个资源准备加载时，浏览器会根据其三级缓存原理进行判断。

浏览器会率先查找内存缓存，如果资源在内存中存在，那么直接从内存中加载
如果内存中没找到，接下去会去磁盘中查找，找到便从磁盘中获取
如果磁盘中也没有找到，那么就进行网络请求，并将请求后符合条件的资源存入内存和磁盘中

# 缓存存储优先级

Initiator 列表示资源加载发起的位置，我们点击从内存获取资源的该列值后可以发现资源是在 HTML 渲染阶段就被加载的。

异步加载的资源

浏览器内存缓存生效的前提下，JS 资源的执行加载时间会影响其是否被内存缓存

# Preload/Prefetch

preload 也被称为预加载，其用于 link 标签中，可以指明哪些资源是在页面加载完成后即刻需要的，浏览器会在主渲染机制介入前预先加载这些资源，并不阻塞页面的初步渲染。例如：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>Demo</title>
        <link rel="preload" href="https://res.wx.qq.com/open/js/jweixin-1.3.2.js" as="script" />
    </head>
    <body>
        <div id="cache">加载的 JS 资源大概率会存储到内存中</div>
    </body>
</html>

执行结果：

当使用 preload 预加载资源后，该资源一直会从磁盘缓存中读取，JS、CSS 及图片资源都有同样的表现，这主要还是和资源的渲染时机有关，在渲染机制还没有介入前的资源加载不会被内存缓存

prefetch: 表示预提取，告诉浏览器加载下一页面可能会用到的资源，浏览器会利用空闲状态进行下载并将资源存储到缓存中。

<link rel="preload" href="..." as="...">
<link rel="prefetch" href="...">

注意：与预取的关系

prefetch和preload资源都声明资源及其获取属性，但在用户代理获取资源的方式和时间方面有所不同：prefetch是一种可选的、通常是低优先级的获取，用于后续导航可能使用的资源；preload是当前导航所需资源的强制获取。开发人员应相应地使用每一个，以最小化资源争用并优化负载性能。 w3 (opens new window)

#cache

← Chrome的三种加载方式 Service Worker→