浏览器缓存

前言

在前端开发中，缓存有利于加快网页的加载速度，同时缓存可以被反复利用，因此能够减小流量和带宽的开销。

缓存的分类有不少种，CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。本篇未来讲解一下Web开发中的浏览器缓存。这个在实际开发环境中每每也会被问到，或者使用到。如何去准确认清楚缓存的概念，是前端必需要去学习的。若是你喜欢个人文章，欢迎评论，欢迎Star~。欢迎关注个人github博客

正文

浏览器的缓存问题，主要指的是http的缓存——即协议层。而h5新增的storage和数据库缓存，那是应用层缓存，并不被计入本篇的分析内容里面。下面咱们正式开始来进行缓存的分析。

协议层的缓存，其实，能够被分红强制缓存和对比缓存。

强制缓存

首先，咱们先来看一张强制缓存时的时序图，来了解一下强制缓存在不一样状况下的请求模式：

从图中，咱们不难看出，只有当缓存失效时，才会去服务器获取最新资源的方式，就是强制缓存。而在协议层的字段中，能够形成强制缓存的字段有两个Expires和Cache-Control。

1.0的时候见到我——Expires

最先使用的是Expires字段，该字段表示缓存到期时间，即有效时间+当时服务器的时间，而后将这个时间设置在header中返回给服务器。所以，该时间是一个绝对时间，举例说明：

Expires: Thu, 10 Nov 2017 08:45:11 GMT

图片示例：

![expires](
http://lhbzimo.oss-cn-shenzhe...

在响应消息头中，设置这个字段以后，就能够告诉浏览器，在未过时以前不须要再次请求。

可是，这个字段设置时有缺点：

因为是绝对时间，用户可能会将客户端本地的时间进行修改，而致使浏览器判断缓存失效，从新请求该资源，同时，还致使客户端与服务端的时间不一致，导致缓存失效。

1.1的时候我来了——Cache-Control

已知Expires的缺点以后，在HTTP/1.1中，增长了一个字段Cache-Control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不须要向服务器发送请求

这二者的区别就是前者是绝对时间，然后者是相对时间。咱们不妨举个例子来讲明一下：

Cache-Control: max-age=2592000

图片示例：

下面列举一下Cache-Control的字段能够带的值：

1. max-age：即最大有效时间，在上面的例子中咱们能够看到
2. no-cache：表示没有缓存，即告诉浏览器该资源并无设置缓存
3. s-maxage：同max-age，可是仅用于共享缓存，如CDN缓存
4. public：多用户共享缓存，默认设置
5. private：不可以多用户共享，HTTP认证以后，字段会自动转换成private。

总结一下，自从http1.1开始，Expires逐渐被Cache-Control取代。Cache-Control是一个相对时间，即便客户端时间发生改变，相对时间也不会随之改变，这样能够保持服务器和客户端的时间一致性。并且Cache-Control的可配置性比较强大。

对比缓存

扯完强制缓存，咱们来看看对比缓存。在解释这个以前，是否能够先猜测一下，强制缓存是，缓存在未过有效期时，不须要请求资源。那么，对比缓存的原理又该如何呢？

废话很少说，咱们也先从对比缓存的时序图讲起，如图：

对比缓存的过程是，先从缓存中获取对应的数据标识，而后向服务器发送请求，确认数据是否更新，若是更新，则返回新数据和新缓存；反之，则返回304状态码，告知客户端缓存未更新，可继续使用。

这正好弥补了一些强制缓存的缺陷。对比缓存主要应用于一些时常须要动态更新的资源文件。

对比缓存在协议里的字段是Last-Modified和If-Modified-Since。

别人的好伙伴——Last-Modified

Last-Modified：服务器告知客户端，资源最后一次被修改的时间，例如

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

If-Modified-Since：再次请求时，请求头中带有该字段，服务器会将If-Modified-Since的值与Last-Modified字段进行对比，若是相等，则表示未修改，响应304；反之，则表示修改了，响应200状态码，返回数据。

这个字段能够和Cache-Control配合使用。

可是他仍是有必定缺陷的：

1. 若是资源更新的速度是秒如下单位，那么该缓存是不能被使用的，由于它的时间单位最低是秒。
2. 若是文件是经过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，因此起不到缓存的做用。

我来完善它——Etag

因为Last-modified仍是存在缺陷的，尽管大多数状况下，会使用它，但当遇到咱们上面所说的场景时，咱们可能就须要了解一下，咱们另外一个小伙伴了——Etag。

Etag存储的是文件的特殊标识(通常都是hash生成的)，服务器存储着文件的Etag字段，能够在与每次客户端传送If-no-match的字段进行比较，若是相等，则表示未修改，响应304；反之，则表示已修改，响应200状态码，返回数据。

最后，经过一张原理图，咱们来加深一下记忆：

至此为止，两种缓存类型的缓存方式已经阐述完成了，不知你是否已经心中已经有个大体的印象，当别人问起时，你能够对答如流。但愿咱们一同进步吧，fighting。

浏览器行为引发的不一样

最后，咱们来聊聊浏览器行为会引发缓存的变化吧。

下面说一下浏览器的行为会产生怎样的请求：

1. 刷新网页 => 若是缓存没有失效，浏览器会直接使用缓存；反之，则向服务器请求数据
2. 手动刷新（F5） => 浏览器会认为缓存失效，在请求服务器时加上Cache-Control: max-age=0字段，而后询问服务器数据是否更新。
3. 强制刷新（Ctrl + F5） => 浏览器会直接忽略缓存，在请求服务器时加上Cache-Control: no-cache字段，而后从新向服务器拉取文件。

移动端的缓存处理

在PC端或许这样子的缓存机制就已经足够了，由于PC端不须要为网络的问题担忧。

可是，移动端却不行，任何一个网络请求的增长，对于移动端的加载消耗时间都是比较大的（谁叫移动端的网太差呢，3G、2G）。那么，上述的缓存有什么问题呢？其实，强制缓存是没有太大问题的，由于只要缓存不到期，是不会想服务器发送请求的；可是若是是对比缓存的状况下，304的问题就比较巨大，由于它会形成无用的请求。每次在使用缓存前，都会向服务器发送请求确认，致使网络的延时。

一次完美的缓存必须保证两点：

1. 数据缓存以后，尽可能减小服务器的请求
2. 若是资源更新的话，必须使得客户端的资源一块儿更新。

因此，通常咱们会运用的方式是：

在资源文件后面加上表示，如config.f1ec3.js、config.v1.js之类的，而后给资源设置较长的缓存时间，如一年

Cache-Control: max-age=31536000

这样子，就不会形成304的回包现象。
而后一旦资源发生更新时，咱们能够改变资源后面的标识符，实现静态资源非覆盖式更新。

总结

本篇大体分析了浏览器缓存部分的分类状况，以及细化分析。主要可分为：

1. 强制缓存

   • Expires字段
   • Cache-Control字段

2. 对比缓存

   • Last-Modefied字段
   • Etag标识
3. 浏览器行为引发的缓存变化
4. 移动端的缓存策略

其实，在讲述移动端的缓存策略时，并无分析的特别详细，只是大体的讲解了一下目前你们都在使用的缓存策略。可能以后，还会写一篇移动端缓存的细分文章。

最后，若是你对我写的有疑问，能够与我讨论。若是我写的有错误，欢迎指正。你喜欢个人博客，请给我关注Star~呦。你们一块儿总结一块儿进步。欢迎关注个人github博客