oogle Chrome、Internet Explorer、Mozilla Firefox、Safari，这些对于当今大多数使用互联网的人来说并不陌生。在当今时代，我们都非常熟悉这些网络浏览器，这是世界上使用最广泛的软件。在那个顶部宽大的白色框中，您以写下要导航到的任何网站地址，例如 www.facebook.com、www.google.com、www.medium.com，然后立即显示该页面。你有没有想过该网站是如何出现在你的屏幕上的？

什么是浏览器？

浏览器是一种软件程序，用于在万维网上呈现和探索内容。这些内容（包括图片、视频和网页）使用超链接（类似于网页地址）进行连接，并使用统一资源标识符 （URL） 进行分类。第一个是由万维网本身的发明者蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创建的。在那之后，现在有许多网络浏览器可供消费者使用，具有多功能功能。

浏览器始终需要服务器（旨在处理请求并通过本地网络或 Internet 将数据传送到其他（客户端）计算机的计算机）。当您在浏览器的地址栏中输入任何网页的任何URL（统一资源定位器）时，它会从服务器获取包含图像，PDF，视频，Flash文件的HTML文件，解释它们，然后将其显示在屏幕上。

但是，浏览器如何解释这些HTML文件？现在，浏览器如何解释这些HTML文件？浏览器显示网页方式的 HTML 和 CSS 规范由 W3C（万维网联盟）组织维护，该组织是万维网的主要国际标准组织。

当在浏览器中键入任何 URL 时会发生什么？

当在 Web 浏览器中键入任何 URL 时，为了加载页面，它首先必须找到 Web 服务器的 IP 地址。它要求操作系统 （OS） 检查本地缓存中的服务器名称。如果它存在于缓存中，则渲染引擎将渲染网页。

1. 检查浏览器缓存：为了加载页面，浏览器首先必须找到 Web 服务器的 IP 地址。浏览器在固定的持续时间内维护 DNS 记录的缓存。因此，这是解析DNS查询的第一个地方。它检查本地缓存，如果请求的对象在缓存中并且是新的，请跳到步骤 9
2. 检查操作系统缓存：如果浏览器的缓存中不包含该记录，它会对底层操作系统进行系统调用以获取服务器的 IP 地址，因为操作系统还维护最近 DNS 查询的缓存。
3. 路由器缓存：如果上述步骤无法获取DNS记录，则搜索将继续到具有自己缓存的路由器。
4. ISP 缓存：如果一切都失败，搜索将转移到您的 ISP。首先，如果找不到，它会尝试在缓存中 - ISP的DNS递归搜索进入画面。DNS查找也是一个复杂的过程，它从Google等网站可用的许多选项列表中找到适当的IP地址。
5. 找到 IP 地址后，浏览器会启动与服务器的 TCP 连接（此步骤使用 HTTPS 要复杂得多）。
6. 浏览器根据HTTP（超文本传输协议）协议的规范，通过TCP连接向服务器发送HTTP GET请求。
7. 浏览器收到 HTTP 响应，并可能关闭 TCP 连接，或将其重用于其他请求
8. 获取请求的文件后，浏览器有两件事要做：解释和渲染 HTML 页面，并获取剩余的对象（图像、flash 文件、javascript 文件、css 文件、音频、视频等）并解释和显示它们。
9. 一些浏览器会立即开始解释和呈现 HTML 文件，并并行请求对象，在接收对象时填充对象。其他人将等待接收所有对象，然后渲染并显示 HTML 文件。
10. html 内容的呈现也是分阶段完成的。浏览器首先渲染裸骨 html 结构，然后发送多个 GET 请求来获取其他超链接内容，例如，如果 html 响应包含 img 标签形式的图像，例如 <img src=“/assets/img/set.png” />，浏览器将向服务器发送一个 HTTP GET 请求，以按照我们目前看到的完整步骤集获取图像。但这并不像看起来那么糟糕。静态文件（如图像、javascript、css 文件）都由浏览器缓存，以便将来不必再次获取它们。
11. 然后，浏览器将停止等待用户请求另一个文件以重新开始一切。

者：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 的强大存储能力：善于利用客户端能力，定制合适的缓存机制，打造极致体验。

结语

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