聊聊 CDN 缓存与浏览器缓存

CDN 是互联网上内容分发的重要一环。不管您以前是否了解过 CDN，其实它已经在您的平常生活中发挥做用了。好比您正在淘宝挑选心仪的商品，或者在观看一段使人捧腹的视频，以及您正在阅读的这篇文章，这些资源展现的背后都有 CDN 的默默支撑。

为何 CDN 使用如此普遍呢？首先你们须要知道，CDN 旨在解决的最重要的问题是什么，咱们称之为网络延迟。举个例子，当您输入一个网址，敲击回车后到网页内容实际出如今屏幕上，中间加载耗费的这个时间，就是网络延迟。经过网络获取资源老是比从本地获取慢，不管服务器是在同一个局域网中仍是位于世界的另外一个角落，都是如此。这里的速度差别是 IT 行业的一个核心问题，开发者想了不少办法试图去弥补这个差别，CDN 就是应用最为普遍的一个解决方案。

CDN 为解决网络延迟提供了一整套技术方案，今天咱们介绍的缓存就是其中重要的一环。这篇文章主要介绍在使用了 CDN 以后，数据是如何被缓存的，以及缓存是如何提升数据加载速度的。

缓存的优势

在未接入CDN 以前，用户使用浏览器访问服务的时候，相互交互的过程以下图所示。

用户在第一次访问网站服务器的时候，浏览器会从服务器获取全部的资源，在传输过程当中，浏览器会经过一些约定好的响应头，从而肯定是否须要将这个资源保存一份到本地做为缓存。当用户第二次访问该网站的时候，浏览器就会优先从缓存中加载资源，不用向服务器请求资源，从而提升了网站的访问速度。

例如咱们第一次访问又拍云官网，下面就是浏览器加载资源的快照，能够看到 5.6MB 的数据被传输到本地。

在刷新又拍云官网后，咱们能够看到传输数据降到了 9.9KB，在使用了缓存以后，浏览器不用再下载所有的文件，减小了下载量也就意味着提升了页面加载的速度。

经过上面的例子，能够直观地观察到浏览器缓存对解决网络延迟起到的做用是很是明显的。

而对于一些用户访问量巨大的网站而言，若是全部用户都去服务器请求数据，服务器会很快崩溃，而且在不一样网络以及不一样地区的用户，请求服务器的速度也不同。为了提升这部分用户的访问速度，CDN 中又提出了新的网络架构，即建立一些最接近用户网络的边缘服务器，而后将文件缓存在这些边缘服务器（节点）上，这就是 CDN 缓存。

你们能够看到，服务接入了 CDN 后，数据经历了客户端（浏览器）缓存和 CDN 边缘节点缓存两个阶段，那么下面就分别对这两个阶段的缓存进行介绍。

浏览器缓存介绍

当咱们请求一个网页的时候，服务器会向浏览器返回大量数据，可是这些数据须要所有缓存吗？浏览器又是如何区分哪些数据须要进行缓存，哪些是须要实时跟源站获取的？接下来咱们就来看一下浏览器的缓存策略。

浏览器缓存策略

服务器会在资源返回的响应中，携带上如下四个经常使用的响应头，浏览器会经过判别这些响应值来决定资源缓存的状态。

• ETag
• Cache-Control
• Expires
• Last-Modified

ETag

ETag 值是一个字符串，其内容一般是数据的哈希值，每一个数据都有一个单独的标志，只要这个文件发生了改变，这个标志就会发生变化。

服务器能够在响应中返回 ETag，而后浏览器会在后续的请求中携带上这个参数来肯定缓存是否须要更新。若是 ETag 值相同，说明资源未更改，服务器会返回 304（Not Modified） 响应码，浏览器就知道本地缓存仍然是可使用的。

不过须要注意的是，ETag 只有在本地缓存已过时（Expires）或者缓存模式设置为 no-cache（Cache-Control）的时候，才会被浏览器携带上与服务器端的值进行判别。

Cache-Control

Cache-Control 能够携带多个响应值，这些值能够设置缓存时间、状态以及验证状态。不一样值说明以下。

例如，访问某张图片，服务器返回的响应以下：Cache-Control: max-age=691200，则说明这张图片能够在客户端存储 8 天。

Expires

这个响应头标记了数据的过时时间，超过其中规定的时间后，缓存会被定义为过时。例如：Expires: Sat, 27 Apr 2019 11:43:15 GMT

说明对应的数据会在 2019 年 4 月 27 号的 11 点 43 分后过时。

须要注意的是，若是 Cache-Control 中有 max-age 指令，浏览器会忽略此参数。

Last-Modified

服务器能够经过配置这个响应头，来向浏览器发送一个数据上次被修改的时间标签，例如：Last-Modified:Wed, 24 Apr 2019 02:54:16 GMT

这样浏览器就知道了该数据最后被修改的时间，后续请求中，会和服务器进行时间的比较，若是服务器上的时间比本地时间要新，说明数据有更改，浏览器须要从新下载数据。

HTTP 响应示例

接下来咱们能够看一个响应示例。

第 2 行告诉咱们 max-age 是 1 小时；

第 5 行告诉咱们这是一张 PNG 图片；

第 7 行向咱们显示了 ETag 值，该值将在 1 小时标记后用于验证，以验证资源是否有更改；

第 8 行是 Expires 响应，由于设置了 max-age，它将被浏览器忽略；

第 10 行是 Last-Modified 响应，显示上次修改图像的时间。

浏览器缓存的不足

当服务器返回的响应中有 Expires 或者 Cache-Control 设置了 max-age 响应头的时候，浏览器不会向服务器发起校验请求，而是直接复用本地缓存。若是此时服务器进行了资源的更新，用户就没法获取到最新的资源，只能经过强制刷新浏览器缓存来跟服务器请求最新的资源。

此外，Expires 是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，好比随意修改下客户端时间，就能影响缓存命中的结果。

所以在实际使用过程当中，须要灵活使用浏览器的缓存策略。

CDN 缓存介绍

当服务接入了 CDN 以后，浏览器本地缓存的资源过时以后，浏览器不是直接向源服务器请求资源，而是转而向 CDN 边缘节点请求资源。CDN 边缘节点中将用户的数据缓存起来，若是 CDN 中的缓存也过时了，CDN 边缘节点会向源服务器发出回源请求，从而来获取最新资源。如下介绍以又拍云 CDN 为例。

CDN 缓存策略

CDN 节点缓存策略通常都会遵循 HTTP 标准协议，又拍云在没有匹配到自定义缓存规则且源服务器也没有返回任何有效缓存头的状况下，默认配置策略以下：

1. 针对静态资源，全部正常状态码（大于等于 200 小于 400）均缓存 8 天。特别地，301 响应缓存 2 小时，302 响应缓存 20 分钟；
2. 针对动态资源，程序会自动识别，则不进行缓存；
3. 对于其余大于等于 400 的不正常响应，则不进行缓存；

缓存节点通知浏览器缓存的具体时间由 HTTP 响应头里面的 Cache-Control 和 Expires 响应头控制。

CDN 缓存的不足

CDN 缓存不只减小了用户的访问延时，相应的也减小了源服务器的负载，但这里须要注意，当源服务器资源更新后，若是 CDN 节点上缓存数据还未过时，用户访问到的依旧是过时的缓存资源，这会致使用户最终访问出现误差。所以，开发者须要手动刷新相关资源，使 CDN 缓存保持为最新的状态。

CDN 缓存刷新

又拍云为开发者执行缓存刷新提供了主动更新和被动更新两种方式。

主动更新主要是指同名资源在源服务器更新以后，开发者手动刷新文件。又拍云提供了可视化的操做台供用户执行缓存刷新操做，同时支持 URL 刷新和规则刷新。此外开发者也可经过 API 接口完成刷新操做。

被动刷新则是等文件在 CDN 节点的缓存过时以后，节点回源拉取源服务器上最新的文件。这个过程由 CDN 自动完成，无需手动操做。

现现在是一个快节奏的时代，人们老是但愿本身可以第一时间获取到最新的资讯，使用的是最快捷的服务。又拍云一直致力于解决互联网网络拥塞问题，提升终端用户访问网站的响应速度和可用性，为广大开发者提供更加简洁方便的 CDN 一站式服务。

目前又拍云 CDN 能够提供基于文件后缀、目录等多个维度来指定 CDN 缓存和浏览器时间，为开发者提供更精细化的缓存管理服务。针对开发者不一样的业务需求，又拍云提供了多项预制模板，方便快捷的来帮助开发者进行数据缓存管理，有效减轻源站负载，经过各网络、各区域的多个节点，来帮助减少终端用户访问服务延时。

 

推荐阅读：

这样介绍 CDN，老司机也能听懂

聊聊常见的网络攻击