HTTP协议缓存

时间 2019-12-07

标签 http 协议缓存栏目 HTTP/TCP 繁體版

原文原文链接

为何要使用 Web 缓存

Web缓存通常分为浏览器缓存、代理服务器缓存以及网关缓存，本文主要讲的是 浏览器缓存，其它两种缓存你们自行去了解下。css

Web 缓存游走于服务器和客户端之间。这个服务器多是源服务器（资源所驻留的服务器Add），数量多是1个或多个；这个客户端也多是1个或多个。Web 缓存就在服务器-客户端之间搞监控，监控请求，而且把请求输出的内容（例如html页面、图片和文件）（统称为副本）另存一份；而后，若是下一个请求是相同的 URL，则直接请求保存的副本，而不是再次麻烦源服务器。html

使用缓存的2个主要缘由：web

下降延迟：缓存离客户端更近，所以，从缓存请求内容比从源服务器所用时间更少，呈现速度更快，网站就显得更灵敏。
下降网络传输：副本被重复使用，大大下降了用户的带宽使用，其实也是一种变相的省钱（若是流量要付费的话），同时保证了带宽请求在一个低水平上，更容易维护了。

试想如今的大型网站，随便一个页面都是一两百个请求，天天 pv 都是亿级别，若是没有缓存，用户体验会急剧降低（表如今等待请求的时间上）、同时服务器压力和网络带宽都面临严重的考验。浏览器

浏览器缓存控制机制

浏览器缓存控制机制有三种：HTML5离线存储和本地缓存、HTML Meta 标签、HTTP 协议缓存。缓存

HTML5离线存储和本地缓存

该种缓存机制是运用 HTMl5 新推出一些支持离线应用的 API 来进行数据的缓存，好比 appcache、sessionStorage、localStorage等等。安全

appcache 经过定义一个描述文件（manifest file）来列出要下载和缓存的资源，manifest file 示例以下：服务器

CACHE MANIFEST
# Comment

file.js
file.css

而后在 html 中引用：网络

<html manifest="./xxx.manifest">

sessionStorage、localStorage 的基本用法以下：session

// localStorage 用法类似
sessionStorage.set('name', 'laixiangran') // 存储数据
sessionStorage.get('name') // 获取数据 'laixiangran'

本文暂时就不详细介绍，后面我会单独介绍这块的内容。app

HTML Meta 标签

使用 HTML Meta 标签，Web 开发者能够在 HTML 页面的 <head> 节点中加入 <meta> 标签，代码以下：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代码的做用是告诉浏览器当前页面不被缓存，每次访问都须要去服务器拉取。

使用上很简单，但只有部分浏览器能够支持，并且全部缓存代理服务器都不支持，由于代理不解析 HTML 内容自己。

HTTP 协议缓存

HTTP 协议缓存是咱们本文讲解的重点，它是经过 HTTP 头信息来控制缓存的，HTTP 头信息可让你对浏览器和代理服务器如何处理你的副本进行更多的控制。他们在 HTML 代码中是看不见的，通常由 Web 服务器自动生成。可是，根据你使用的服务器，你能够在某种程度上进行控制。

浏览器请求流程

浏览器第一次请求流程图：

该流程比较简单了，浏览器在第一次请求的时候不存在缓存，直接从浏览器请求，等请求返回结果以后再根据 HTTP 头信息将数据缓存在内存或者硬盘中。

浏览器再次请求时：

该流程就复杂多了，浏览器须要根据 HTTP 头信息来判断是否直接从缓存读取数据仍是交由服务器来判断是否从缓存读取数据。

几种状态码的区别：

下面咱们就从该流程中出现的 HTTP 状态码 200（from cache）和 304 来说解 HTTP 协议缓存中的 HTTP 头信息。

200（from cache）

这种 HTTP 状态码表示不访问服务器，直接从缓存（内存或者硬盘）读取数据。

看两张图：

从上面两张图，咱们会看到状态码有点不同，分别是 200（from memory cache） 以及 200（from diks cache），这两个的区别一个是从内存读取数据，一个是从硬盘读取数据，而后它们的前后顺序是先从内存读取，再从硬盘读取。这里咱们就统称为 200（from cache）。

出现 200（from cache） 这种状况，咱们须要关注 Expires 和 Cache-control 这两种HTTP 头信息字段。

Expires

Expires 的中文意思是“有效期”。显然，就是告诉浏览器缓存的有效期。若是过时，缓存会检查源服务器以肯定文件是否改变了。

Expires 头惟一的有效值是 HTTP 时间，其余值无效，不会去缓存的。注意：时间是格林威治时间（GMT），而不是本地时间。以下所示：

Expires: Mon, 29 Oct 2018 03:53:10 GMT

那么看咱们上面的两张图中的 Expires，它都是到 2018-10-29 03:53:10 过时，而咱们本次请求的时间 Date 是 2018-04-29 03：53：10，所以本次请求直接从缓存读取数据，返回 200（from cache）。

尽管 Expires 头颇有用，但它有必定的局限性：

由于牵扯到时间，Web 服务器端的时间必须和缓存的同步，不然极可能实现不了预期的结果 —— 缓存把过时的数据当成最新的数据，把最新的数据看成过时的数据。
你很容易忘记给某内容设置了一个特定时间，若是返回内容的时候没有更新这个过时时间，则每一个请求都是上访到服务器，反而增长了负载和响应时间。
最后呢，Expires 是 HTTP 1.0 的东西，如今默认浏览器均默认使用 HTTP 1.1，因此它的做用基本忽略。

Cache-Control

Cache-Control 与 Expires 的做用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存读取数据仍是从新发请求到服务器读取数据。只不过 Cache-Control 的选择更多，设置更细致，若是同时设置的话，其优先级高于 Expires。

Cache-Control 有用的响应头包括：

max-age=[秒]： 表示在这个时间范围内缓存是新鲜的无需更新。相似 Expires 时间，不过这个时间是相对的，而不是绝对的。也就是某次请求成功后多少秒内缓存是新鲜的。
s-maxage=[秒]： 相似 max-age, 除了仅应用于共享缓存（如代理）。
public： 标记认证的响应才可以被缓存。通常而言，须要认证 HTTP 请求内容会自动私有化（不会被缓存）。
privateN： 容许缓存专门为某一个用户存储响应，比方说在浏览器中；共享缓存通常不会，例如在代理中。
no-cache： 每次在释放缓存副本以前都强制发送请求给源服务器进行验证，这在确保认证有效性上很管用（和 public 结合使用）或者保证内容必须是即时的，不得无视缓存的全部优势，如国内的微博、twitter等的刷新显示。
no-store： 强制缓存在任何状况下都不要保留任何副本。
must-revalidate： 告诉缓存，我给你准备了一些关于新鲜度的信息，在表现的时候要严格遵循。HTTP 容许缓存在某些特定状况下返回过时数据，指定了这个属性，相对于告诉缓存，你必须严格遵循个人规则。
proxy-revalidate： 相似 must-revalidate，除了只能应用于代理缓存。

使用以下所示：

Cache-Control: max-age=15811200

那么看咱们上面的两张图中的 Cache-Control，它在当前请求成功后15811200秒内都是有效的，所以本次请求直接从缓存读取数据，返回 200（from cache）。若是从当前请求成功开始，过了15811200秒以后就会从新从服务器请求新数据。

304

当浏览器经过 Expires 或者 Cache-control 判断出缓存已通过期，那么就须要从新发送请求到服务器，让服务器判断当前缓存是否能够继续使用。

当服务器判断该缓存已经失效，那么就会返回新数据，HTTP 状态码为 200；

当浏览器判断该缓存还未失效，那么就会返回 HTTP 状态码为 304 (无需包体，节省流量)，告知浏览器继续使用缓存。

那么经过哪些 HTTP 头信息字段来判断是否返回 200 仍是 304 呢？那么咱们就请出接下来的主角： Last-Modified/If-Modified-Since 及 Etag/If-None-Match。这两个字段都须要配合 Cache-Control 使用。

Last-Modified/If-Modified-Since

Last-Modified： 标示这个响应资源的最后修改时间。web 服务器在响应请求时，告诉浏览器资源的最后修改时间。
If-Modified-Since： 当资源过时时（使用 Cache-Control 标识的 max-age），发现资源具备 Last-Modified 声明，则再次向 web 服务器请求时带上 If-Modified-Since，表示请求时间。web服务器收到请求后发现有 If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源有被改动过，则响应资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应 HTTP 304 (无需包体，节省流量)，告知浏览器继续使用缓存。

Etag/If-None-Match

这是在 HTTP 1.1 中引入了一个新的验证器。

Etag： web 服务器响应请求时，告诉浏览器当前资源在服务器的惟一标识（生成规则由服务器决定）。Apache 中，ETag 的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行 Hash 后获得的。
If-None-Match： 当资源过时时（使用 Cache-Control 标识的 max-age），发现资源具备 Etage 声明，则再次向 web 服务器请求时带上 If-None-Match （Etag 的值）。web 服务器收到请求后发现有 If-None-Match 则与被请求资源的相应校验串进行比对，决定返回 200 或 304。

Etag 优先于 Last-Modified

你可能会以为使用 Last-Modified 已经足以让浏览器知道本地的缓存副本是否足够新，为何还须要 Etag（实体标识）呢？HTTP1.1 中 Etag 的出现主要是为了解决几个 Last-Modified 比较难解决的问题：

Last-Modified 标注的最后修改只能精确到秒级，若是某些文件在1秒钟之内，被修改屡次的话，它将不能准确标注文件的修改时间。
若是某些文件会被按期生成，当有时内容并无任何变化，但Last-Modified却改变了，致使文件无法使用缓存。
有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形。

Etag 是服务器自动生成或者由开发者生成的对应资源在服务器端的惟一标识符，可以更加准确的控制缓存。Last-Modified 与 ETag 是能够一块儿使用的，服务器会优先验证 ETag，一致的状况下，才会继续比对 Last-Modified，最后才决定是否返回 304。

建立支持缓存网站的小技巧

经过上面的介绍，咱们知道 HTTP 协议缓存的机制，目的就是让你能够更灵活更细致的控制浏览器缓存，从而让你的网站的缓存更加友好，用户体验更完美。

下面这些技巧也可让你网站的缓存更加友好：

保持URL稳定： 这是缓存的金科玉律，若是你为不一样页面，不一样用户或不一样网站提供相同的内容，他们应该使用相同的URL。这是简单却很是行之有效的方法。例如，你的 HTML 中的某个引用地址是"/index.html", 则要一直使用这个地址。
不一样地方的图片和其余元素 使用同一库。
对于不常常改变的图片/页面启用缓存，经过将 Cache-Control: max-age 头信息的值设大一点。
对于按期更新的内容经过指定 max-age 或过时时间实现缓存。
若是资源改变了（尤为下载文件），改变其名字。因为通常这种资源会有很长的过时时间，而服务器上一直是正确的版本；所以，连接这个下载资源的页面须要要比较短的过时时间。不然，会出现服务器的资源是新的，但页面被缓存了，其中的连接地址仍是旧的，就会出现新旧版本冲突的可能。
万不得已不要变更文件： 不然你要设置一个新的 Last-Modified 值。另外，当你更新站点的时候，只要上传改动的那些文件，而不要把整个站点都覆盖过去。
Cookie能不用就不用： Cookie 难以被缓存，且大多情境下是没有必要的。若是你非得使用 Cookie，建议用在动态页面上。
减小SSL的使用： 由于共享缓存不能存储认证页面，只在必要的时候使用，而且在 SSL 页面上减小图片的使用。

SSL：全称 Secure Socket Layer – 安全套接层，为 Netscape 所研发，用以保障在 Internet 上数据传输之安全，利用数据加密 (Encryption) 技术，可确保数据在网络上的传输过程当中不会被截取及窃听。目前通常通用的规格为 40 bit 的安全标准，美国则已推出 128 bit 的更高安全标准，但限制出境。只要 3.0 版本以上的 I.E. 或 Netscape 浏览器便可支持 SSL。

使用 REDbot 检查你的网站： 能够帮助你应用本文所介绍的一些概念。

REDbot：REDbot = RED + robot，是个机器人，检查 HTTP 资源，看他们如何会表现，指出常见的问题，并提出改进建议。虽然它属于 HTTP 一致性测试仪，但却能够找到很多 HTTP 相关问题。

用户行为与缓存

用户的一些行为会影响到浏览器的缓存，具体以下：