【前端面试小册】网络-第2节：资源缓存

一、什么是缓存

1.1 定义

缓存是指将数据存储在临时存储位置，以便将来可以更快地访问。

浏览器缓存：第一次访问网站后，会将该网站需要的资源保存在本地，下次访问的时候，直接加载本地的资源，省去了下载资源的时间，所以变得更快，体验更好。

类比理解：缓存就像家里的储物柜，常用的东西放在储物柜里，需要时直接取用，不用每次都去商店买。

1.2 缓存的好处

1. 提升访问速度：直接读取本地资源比从服务器获取来得快
2. 减少服务器压力：减少了对服务器访问，可以缓解服务器压力
3. 节省带宽：少了请求访问，减少了带宽消耗，访问缓存消耗流量更少
4. 提升用户体验：页面加载更快，用户体验更好

二、缓存种类

2.1 按位置分类

数据库缓存

将数据库查询结果缓存起来，减少数据库查询次数。

应用场景：

• Redis 缓存
• Memcached
• 数据库查询结果缓存

CDN 缓存

内容分发网络（CDN）将资源缓存到离用户最近的节点。

优势：

• 减少网络延迟
• 减轻源服务器压力
• 提升访问速度

代理服务器缓存

代理服务器缓存常用资源，减少对源服务器的请求。

浏览器缓存

浏览器将资源缓存到本地，下次访问时直接使用。

本文重点讲解浏览器缓存。

2.2 按策略分类

• 强缓存：不向服务器发送请求，直接使用缓存
• 协商缓存：向服务器发送请求，验证资源是否更新

三、缓存位置

浏览器缓存有以下几个位置，按优先级排序：

3.1 Service Worker

概览

运行在浏览器背后的独立线程，在常规的 JS 引擎线程以外开辟了新的 JS 线程，可以实现缓存功能。

特点：

• 服务于多个页面：而不是某个特定页面（按照同源策略）
• 常驻浏览器中：即便注册它的页面已经关闭，也不会停止。除非用户主动结束或者浏览器回收，这个线程才会结束
• 不能访问 DOM：Service Worker 运行在 worker 上下文，因此它不能访问 DOM

安全要求

Service Worker 要求传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。

使用示例

// 注册 Service Worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
        .then(registration => {
            console.log('Service Worker 注册成功');
        })
        .catch(error => {
            console.log('Service Worker 注册失败');
        });
}

// sw.js
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                return response || fetch(event.request);
            })
    );
});

3.2 Memory Cache

3.2.1 概述

内存中的缓存，操作系统读取内存 IO 开销比从磁盘读取小很多，所以 Memory Cache 比 Disk Cache 快。

网络请求资源基本都会被浏览器自动加入到 memory cache 中。

但是浏览器占用的内存有限，所以 Memory Cache 能存的资源（js、css 文件等）也有限。

3.2.2 Memory Cache 特点

1. 正常情况，关闭 TAB 才会失效

2. 因为内存有限，某个页面占很大内存，会导致前面的缓存失效，此时 TAB 还未关闭

3. 几乎所有请求都能进入 memory cache，因此保证了相同的两个请求 src 或者 img，只会被请求一次

<img src="/static/mashroom.jpg">
<img src="/static/mashroom.jpg">

只会被请求一次，如果是 no-store 就会两次。

同步请求方面，浏览器会自动把当次 HTML 中的资源存入到缓存（memory cache），这样碰到相同 src 的图片就会自动读取缓存（但不会在 Network 中显示出来）。

不过在匹配缓存时，除了匹配完全相同的 URL 之外，还会比对他们的类型，CORS 中的域名规则等。因此一个作为脚本（script）类型被缓存的资源是不能用在图片（image）类型的请求中的，即便他们 src 相等。

4. memory cache 获取缓存内容时，浏览器会忽视例如 max-age=0、no-cache 等头部配置，所以没有那些请求头

5. 其他

// JS 一般缓存在 memory
// 因为 JS 存在磁盘中，执行的时候把资源从磁盘加载到内存中
// IO 开销比较大，可能导致浏览器失去响应

// CSS 一般缓存在磁盘（from disk cache）
// 因为 CSS 样式加载一次即可渲染出页面

3.2.3 Preloader 与 Memory Cache

Preloader 是浏览器自有的缓存机制。

会对 script、img 等资源缓存到 memory cache，相同资源 URL 只会加载一次。

不过在匹配缓存时，除了匹配完全相同的 URL 之外，还会比对他们的类型，CORS 中的域名规则等。

3.3 Disk Cache

概述

磁盘缓存，将资源存储在硬盘上。

特点：

• 容量大，可以存储更多资源
• 速度比 Memory Cache 慢
• 关闭浏览器后仍然存在
• 受 HTTP 缓存策略控制

存储位置

• Windows：C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Cache
• Mac：~/Library/Caches/Google/Chrome/Default/Cache
• Linux：~/.cache/google-chrome/Default/Cache

3.4 Push Cache

概述

HTTP/2 的 Server Push 功能，服务器主动推送资源到客户端。

特点：

• HTTP/2 特性
• 服务器主动推送
• 优先级最低
• 会话（session）级别，关闭页面后失效

四、缓存策略

4.1 强缓存与协商缓存

这里内容比较多，单独一节讲解，具体查看小册"强缓存与协商缓存"部分。

简单说明：

• 强缓存：不向服务器发送请求，直接使用缓存
• 协商缓存：向服务器发送请求，验证资源是否更新

4.2 缓存流程图

graph TD
    A[请求资源] --> B{是否有缓存?}
    B -->|无| C[请求服务器]
    B -->|有| D{强缓存是否有效?}
    D -->|有效| E[使用强缓存 200 from cache]
    D -->|无效| F[发送请求到服务器]
    F --> G{协商缓存是否有效?}
    G -->|有效| H[304 Not Modified]
    G -->|无效| I[200 OK 返回新资源]
    C --> J[存储到缓存]
    I --> J

五、刷新方式对缓存的影响

5.1 F5 刷新

跳过强缓存，但是会检查协商缓存。

• 会发送请求到服务器
• 携带 If-Modified-Since 或 If-None-Match
• 如果资源未更新，返回 304，使用缓存
• 如果资源已更新，返回 200，使用新资源

5.2 Ctrl+F5 刷新（强制刷新）

直接从服务器加载，跳过强缓存和协商缓存。

• 请求头添加 Cache-Control: no-cache 和 Pragma: no-cache
• 强制从服务器获取最新资源
• 返回 200，使用新资源

5.3 浏览器输入 URL

浏览器地址栏中写入 URL，回车

• 浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿
• 会检查强缓存和协商缓存
• 如果缓存有效，直接使用缓存

5.4 对比表格

六、缓存最佳实践

6.1 资源分类

• HTML：使用协商缓存（no-cache）
• CSS/JS：使用强缓存（max-age），文件名带 hash
• 图片：使用强缓存（max-age），文件名带 hash
• 字体：使用强缓存（max-age），文件名带 hash

6.2 缓存时间设置

• 静态资源：长期缓存（1 年）
• HTML：不缓存或短期缓存
• API 数据：根据业务需求设置

6.3 版本控制

使用文件 hash 或版本号控制缓存：

<!-- 文件名带 hash -->
<link rel="stylesheet" href="/css/main.a1b2c3d4.css">
<script src="/js/app.e5f6g7h8.js"></script>

七、面试要点总结

核心知识点

1. 缓存位置：Service Worker、Memory Cache、Disk Cache、Push Cache
2. 缓存策略：强缓存、协商缓存
3. 刷新方式：F5、Ctrl+F5、地址栏输入的区别
4. 缓存优化：合理设置缓存时间、使用文件 hash

常见面试题

Q1: 浏览器缓存有哪些位置？

答：

1. Service Worker：独立线程，可编程控制
2. Memory Cache：内存缓存，速度快但容量小
3. Disk Cache：磁盘缓存，容量大但速度慢
4. Push Cache：HTTP/2 Server Push，优先级最低

Q2: F5 和 Ctrl+F5 的区别？

答：

• F5：跳过强缓存，检查协商缓存
• Ctrl+F5：跳过强缓存和协商缓存，强制从服务器获取

Q3: 如何合理设置缓存？

答：

• HTML 使用协商缓存
• CSS/JS/图片使用强缓存，文件名带 hash
• 根据资源更新频率设置缓存时间

实战建议

• ✅ 理解不同缓存位置的特点
• ✅ 掌握强缓存和协商缓存的区别
• ✅ 根据资源类型合理设置缓存策略
• ✅ 使用文件 hash 控制缓存更新