者：kevinylzhao，腾讯音乐前端开发工程师

浏览器缓存策略对于前端开发同学来说不陌生，大家都有一定的了解，但如果没有系统的归纳总结，可能三言两语很难说明白，甚至说错，尤其在面试过程中感触颇深，很多候选人对这类基础知识竟然都是一知半解，说出几个概念就没了，所以重新归纳总结下，温故而知新。

Web 缓存介绍

• Web 缓存是指一个 Web 资源（如 html 页面，图片，js，数据等）存在于 Web 服务器和客户端（浏览器）之间的副本。
• 缓存会根据进来的请求保存输出内容的副本；当下一个请求来到的时候，如果是相同的 URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。

Web 缓存的好处

• 减少网络延迟，加快页面打开速度
• 减少网络带宽消耗
• 降低服务器压力
• ...

HTTP 的缓存机制

简化的流程如下

根据什么规则缓存

1. 新鲜度（过期机制）：也就是缓存副本有效期。一个缓存副本必须满足以下条件，浏览器会认为它是有效的，足够新的：

• 含有完整的过期时间控制头信息（HTTP 协议报头），并且仍在有效期内；
• 浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度；

2. 校验值（验证机制）：服务器返回资源的时候有时在控制头信息带上这个资源的实体标签 Etag（Entity Tag），它可以用来作为浏览器再次请求过程的校验标识。如果发现校验标识不匹配，说明资源已经被修改或过期，浏览器需求重新获取资源内容。

HTTP 缓存的两个阶段

浏览器缓存一般分为两类：强缓存（也称本地缓存）和协商缓存（也称弱缓存）。

本地缓存阶段

浏览器发送请求前，会先去缓存里查看是否命中强缓存，如果命中，则直接从缓存中读取资源，不会发送请求到服务器。否则，进入下一步。

协商缓存阶段

当强缓存没有命中时，浏览器一定会向服务器发起请求。服务器会根据 Request Header 中的一些字段来判断是否命中协商缓存。如果命中，服务器会返回 304 响应，但是不会携带任何响应实体，只是告诉浏览器可以直接从浏览器缓存中获取这个资源。如果本地缓存和协商缓存都没有命中，则从直接从服务器加载资源。

启用&关闭缓存

按照本地缓存阶段和协商缓存阶段分类：

1. 使用 HTML Meta 标签 　　 Web 开发者可以在 HTML 页面的节点中加入标签，如下：

上述代码的作用是告诉浏览器当前页面不被缓存，事实上这种禁用缓存的形式用处很有限：

a. 仅有 IE 才能识别这段 meta 标签含义，其它主流浏览器仅识别“Cache-Control: no-store”的 meta 标签。

b. 在 IE 中识别到该 meta 标签含义，并不一定会在请求字段加上 Pragma，但的确会让当前页面每次都发新请求（仅限页面，页面上的资源则不受影响）。

2. 使用缓存有关的 HTTP 消息报头 这里需要了解 HTTP 的基础知识。一个 URI 的完整 HTTP 协议交互过程是由 HTTP 请求和 HTTP 响应组成的。有关 HTTP 详细内容可参考《Hypertext Transfer Protocol — HTTP/1.1》、《HTTP 权威指南》等。

在 HTTP 请求和响应的消息报头中，常见的与缓存有关的消息报头有：

上图中只是常用的消息报头，下面来看下不同字段之间的关系和区别：

1. Cache-Control 与 Expires
2. Cache-Control：HTTP1.1 提出的特性，为了弥补 Expires 缺陷加入的，提供了更精确细致的缓存功能。详细了解详细看几个常见的指令：_ max-age：功能和 Expires 类似，但是后面跟一个以“秒”为单位的相对时间，来供浏览器计算过期时间。_ no-cache：提供了过期验证机制。(在 Chrome 的 devtools 中勾选 Disable cache 选项，发送的请求会去掉 If-Modified-Since 这个 Header。同时设置 Cache-Control:no-cache Pragma:no-cache，每次请求均为 200)

• no-store：表示当前请求资源禁用缓存；
• public：表示缓存的版本可以被代理服务器或者其他中间服务器识别；
• private：表示只有用户自己的浏览器能够进行缓存，公共的代理服务器不允许缓存。
• Expires：HTTP1.0 的特性，标识该资源过期的时间点，它是一个绝对值，格林威治时间（Greenwich Mean Time, GMT），即在这个时间点之后，缓存的资源过期；优先级：Cache-Control 优先级高于 Expires，为了兼容，通常两个头部同时设置；浏览器默认行为：其实就算 Response Header 中沒有设置 Cache-Control 和 Expires，浏览器仍然会缓存某些资源，这是浏览器的默认行为，是为了提升性能进行的优化，每个浏览器的行为可能不一致，有些浏览器甚至没有这样的优化。

1. Last-Modified 与 ETag
2. Last-Modified(Response Header)与 If-Modified-Since(Request Header)是一对报文头，属于 http 1.0。If-Modified-Since 是一个请求首部字段，并且只能用在 GET 或者 HEAD 请求中。Last-Modified 是一个响应首部字段，包含服务器认定的资源作出修改的日期及时间。当带着 If-Modified-Since 头访问服务器请求资源时，服务器会检查 Last-Modified，如果 Last-Modified 的时间早于或等于 If-Modified-Since 则会返回一个不带主体的 304 响应，否则将重新返回资源。(注意：在 Chrome 的 devtools 中勾选 Disable cache 选项后，发送的请求会去掉 If-Modified-Since 这个 Header。)

• ETag 与 If-None-Match 是一对报文头，属于 http 1.1。ETag 是一个响应首部字段，它是根据实体内容生成的一段 hash 字符串，标识资源的状态，由服务端产生。If-None-Match 是一个条件式的请求首部。如果请求资源时在请求首部加上这个字段，值为之前服务器端返回的资源上的 ETag，则当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的时候，服务器才会返回带有所请求资源实体的 200 响应，否则服务器会返回不带实体的 304 响应。
• ETag 能解决什么问题？

a. Last-Modified 标注的最后修改只能精确到秒级，如果某些文件在 1 秒钟以内，被修改多次的话，它将不能准确标注文件的新鲜度；

b. 某些文件也许会周期性的更改，但是它的内容并不改变(仅仅改变的修改时间)，但 Last-Modified 却改变了，导致文件没法使用缓存；

c. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形。

• 优先级：ETag 优先级比 Last-Modified 高，同时存在时会以 ETag 为准。

缓存位置

浏览器可以在内存、硬盘中开辟一个空间用于保存请求资源副本。我们经常调试时在 DevTools Network 里看到 Memory Cache（內存缓存）和 Disk Cache（硬盘缓存），指的就是缓存所在的位置。请求一个资源时，会按照优先级（Service Worker -> Memory Cache -> Disk Cache -> Push Cache）依次查找缓存，如果命中则使用缓存，否则发起请求。这里先介绍 Memory Cache 和 Disk Cache。

200 from memory cache

表示不访问服务器，直接从内存中读取缓存。因为缓存的资源保存在内存中，所以读取速度较快，但是关闭进程后，缓存资源也会随之销毁，一般来说，系统不会给内存分配较大的容量，因此内存缓存一般用于存储较小文件。同时内存缓存在有时效性要求的场景下也很有用（比如浏览器的隐私模式）。

200 from disk cache

表示不访问服务器，直接从硬盘中读取缓存。与内存相比，硬盘的读取速度相对较慢，但硬盘缓存持续的时间更长，关闭进程之后，缓存的资源仍然存在。由于硬盘的容量较大，因此一般用于存储大文件。

下图可清晰看出差别：

200 from prefetch cache

在 preload 或 prefetch 的资源加载时，两者也是均存储在 http cache，当资源加载完成后，如果资源是可以被缓存的，那么其被存储在 http cache 中等待后续使用；如果资源不可被缓存，那么其在被使用前均存储在 memory cache。

CDN Cache

以腾讯 CDN 为例：X-Cache-Lookup:Hit From MemCache 表示命中 CDN 节点的内存；X-Cache-Lookup:Hit From Disktank 表示命中 CDN 节点的磁盘；X-Cache-Lookup:Hit From Upstream 表示没有命中 CDN。

整体流程

从上图能感受到整个流程，比如常见两种刷新场景：

• 当 F5 刷新网页时，跳过强缓存，但是会检查协商缓存；
• 当 Ctrl + F5 强制刷新页面时，直接从服务器加载，跳过强缓存和协商缓存

其他 Web 缓存策略

IndexDB

IndexedDB 就是浏览器提供的本地数据库，能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。

异步 API 方法调用完后会立即返回，而不会阻塞调用线程。要异步访问数据库，要调用 window 对象 indexedDB 属性的 open() 方法。该方法返回一个 IDBRequest 对象 (IDBOpenDBRequest)；异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。

常用异步 API 如下：

在 16 年曾基于 IndexDB 做过一整套缓存策略，有不错的优化效果：

Service Worker

SW 从 2014 年提出的草案到现在已经发展很成熟了，基于 SW 做离线缓存，让用户能够进行离线体验，消息推送体验，离线缓存能力涉及到 Cache 和 CacheStorage 的概念，篇幅有限，不展开了。

LocalStorage

localStorage 属性允许你访问一个 Document 源(origin)的对象 Storage 用于存储当前源的数据，除非用户人为清除(调用 localStorage api 或者清除浏览器数据)， 否则存储在 localStorage 的数据将被长期保留。

SessionStorage

sessionStorage 属性允许你访问一个 session Storage 对象，用于存储当前会话的数据，存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

定义最优缓存策略

• 使用一致的网址：如果您在不同的网址上提供相同的内容，将会多次获取和存储该内容。注意：URL 区分大小写！
• 确定中继缓存可以缓存哪些资源：对所有用户的响应完全相同的资源很适合由 CDN 或其他中继缓存进行缓存；
• 确定每个资源的最优缓存周期：不同的资源可能有不同的更新要求。审查并确定每个资源适合的 max-age；
• 确定网站的最佳缓存层级：对 HTML 文档组合使用包含内容特征码的资源网址以及短时间或 no-cache 的生命周期，可以控制客户端获取更新的速度；
• 更新最小化：有些资源的更新比其他资源频繁。如果资源的特定部分（例如 JS 函数或一组 CSS 样式）会经常更新，应考虑将其代码作为单独的文件提供。这样，每次获取更新时，剩余内容（例如不会频繁更新的库代码）可以从缓存中获取，确保下载的内容量最少；
• 确保服务器配置或移除 ETag：因为 Etag 跟服务器配置有关，每台服务器的 Etag 都是不同的；
• 善用 HTML5 的缓存机制：合理设计启用 LocalStorage、SessionStorage、IndexDB、SW 等存储，会给页面性能带来明显提升；
• 结合 Native 的强大存储能力：善于利用客户端能力，定制合适的缓存机制，打造极致体验。

结语

通过了解浏览器各种缓存机制和存储能力特点，结合业务制定合适的缓存策略，善用缓存是基本功，可以用于时常审查负责的业务，可能就会发现个别业务并没有运用到位，共勉。

览器缓存究竟是什么？

浏览器缓存（Browser Caching）是为了加速浏览，浏览器在用户磁盘上对请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。它是网站访问统计最难解决的问题之一。为了回收重复阅览网站而产生的资源浪费，而产生的机制。缓存的方式节约了网络的资源，提高了网络的效率。

为什么要清理缓存呢？缓存会带来哪些问题？

部署前端项目以后，你会发现一个问题（为什么必须刷新页面，页面才会更新到最新版本），其实就是因为服务器缓存的问题。缓存会导致你页面样式、图片或脚本等未能及时更新展示。

浏览器自身如何清理缓存呢？

以谷歌浏览器为例：按照下图指示：（也可使用快捷键直接唤起：Ctrl + Shift + Del）

vue项目中如何清理缓存呢?

1.在根目录下index.html的header头中添加一下代码：

2.配置 nginx 不缓存 html

index.html在服务器端可能是有缓存的，需要在服务器nginx上配置不让缓存index.html

名词解释:

no-cache：数据内容不能被缓存, 每次请求都重新访问服务器, 若有max-age（最大缓存期）, 则缓存期间不访问服务器

no-store：不仅不能缓存, 连暂存也不可以(即: 临时文件夹中不能暂存该资源)

以上就是我本次分享的方式，各位同仁们还有什么好的方式可以下方留言，共同学习！

---携手共进，一同进阶！

一篇文章介绍的是《浏览器缓存机制》，浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源，提升网页加载速度。缓存的数据到底放哪了呢？作为开发者，有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找？

1、http 缓存

http缓存是存在于服务器与浏览器之间，是一种保存资源副本并在下次请求时直接使用该副本的技术。web缓存发现请求资源已经被存储，它会拦截请求，返回资源副本，而不会去服务器重新请求资源。

具体的缓存设置，如何判断是否有缓存？等，上一篇文章以详细介绍，可点击《浏览器缓存机制》查看。

打开浏览器调试模式，在 Application 右侧就会有浏览器的 8 种缓存方式，具体如下：

2、websql

websql是较新的chrome浏览器支持，并以独立规范形式出现，引入了一组使用 SQL 操作客户端数据库的 APIs。websql主要特点：

• Web Sql数据库 API 不是HTML5的一部分，在H5之前就已经存在了。
• 将数据以数据库的形式存储在客户端，按需读取。
• 数据便于检索，允许使用sql语句。
• 可以使浏览器实现小型数据库存储功能。

websql常用的API如下：

openDatabase - 打开已存在的数据库，如果不存在，则会新建一个新的数据库。
transaction - 控制一个事物，以及这种情况执行提交或者回滚。
executeSql - 执行 SQL 语句。

3、indexDB

indexDB 是为了能够在客户端存储客观数量的结构化数据，并且在这些数据上使用索引进行高性能的检索。DOM存储对于少量数据是非常友好的，但不适合存储大量结构化数据，indexDB就是为了解决这个问题而生的。

indexDB 分别为同步和异步访问提供了单独的API，同步API本打算供Web Worker内部使用，但目前还未实现。异步API在Web Worker内部和外部都可以使用，另外浏览器对indexDB有50M大小限制。

indexDB主要特点有：

• indexDB大小取决于你的硬盘，存储的数据量非常大。
• 可以直接存储任何类型的数据，如 js任何类型的数据 、blob流。
• 可以创建索引，提供高性能搜索功能。
• 采用事务，保证数据的准确性和一致性。

4、cookie

cookie指的就是会话跟踪技术。一般指网站为了辨别用户身份，进行session跟踪而而存储在用户本地终端上的数据，cookie一般通过http请求头发送到服务器。cookie主要特点有：

• 跨域限制，同一个域名下可多个网页内使用。
• cookie可以设置有效期，超出有效期自动清除。
• cookie存储大小在4K以内。
• cookie的存储不能超过50个cookie。
• 只能存储字符串类型。

cookie常用操作：

setMaxAge - 设置cookie的有效期，时间单位是秒，负值时表示关闭浏览器后就失效，默认值为-1。
setDomain - 用于指定，只有请求指定域名才会带上该cookie。
setPath - 只有访问该域名下的cookieDemo的这个路径地址才会带cookie。
setValue - 重置 value 。

5、localstorage

localStorage 是HTML5的一种新的本地缓存方案，目前使用比较多，一般存储ajax返回的数据，存储特点主要有：

• 数据可以长久保存，没有有效期，直到手动删除为止。
• 存储的数据量大，一般5M以内。
• 存储的数据可以在同一个浏览器的多个窗口使用。
• 存储的数据不会发送到服务器。

localStroage常用API如下：

localStorage.setItem(key,value) // 保存数据
localStorage.getItem(key) // 获取数据
localStorage.removeItem(key) // 删除单个数据
localStorage.clear() // 删除全部

6、sessionstorage

sessionStorage与上述localStroage类似，它的特点主要有：

• 存储的数据在浏览器关闭后删除，与网页窗口具有相同的生命周期。
• 可以存储的数据大小5M。
• 存储的数据不会发送到服务器。

sessionStorage常用API如下：

sessionStorage.setItem(key,value) // 保存数据
sessionStorage.getItem(key) // 获取数据
sessionStorage.removeItem(key) // 删除单个数据
sessionStorage.clear() // 删除全部

7、application cache

application cache是离线缓存技术，将大部分的图片、js、css等资源放在mainfest文件配置中，页面打开时通过mainfest文件读取本地文件或请求服务器资源。通常用于静态页面的缓存。

application cache特点：

• mainfest文件必须有变化时才会更新。
• 一次必须更新mainfest文件中的所有文件才能生效。
• 当网络断开时，可以继续访问页面。
• 文件缓存到本地，不需要每次都从网络上请求。
• 稳定性比较好，遇网络故障或服务器故障可以继续访问本地缓存。
• 加载速度快，缓存资源为本地资源，因此加载速度较快。

8、cacheStorage

cacheStorage 表示 cache对象的存储。该接口提供 serviceWorker 或其他类型的工作线程或window范围访问的所有命名缓存的主目录。

CacheStorage常见方法：

• CacheStorage.match() - 检查给定的 Request 对象是否是 CacheStorage 对象跟踪的 Cache 对象中的键，返回Promise
• CacheStorage.has() - 返回一个 Promise，它解析为与 cacheName 相匹配的 Cache 对象。
• CacheStorage.delete() - 删除cache对象
• CacheStorage.keys() - 含有keys中字符串的任意一个，则返回一个promise对象。
• cacheStorage.has() - 如果包含cache对象，则返回一个promise对象。

9、flash缓存

flash缓存也是页面通过js调用flash读写特定的磁盘目录，达到本地数据缓存的目的。这是要基于flash的，所以基本不用。