之前，由于公司需求搭建了公司的前端框架，后来在做性能优化时，通过插件检测说是使用浏览器缓存能够大大提高响应速度。本来以为还是比较好做的，但是，按着自己的想法做了很多的尝试，都不能成功。后来，转变思维模式，不仅仅局限在前端，哎，总之，绕了好大一圈才做好，花费了不少的时间。 下面小编将从零撸一遍关于浏览器缓存方面的知识：
一、什么是浏览器缓存？
在Web性能优化上，我们总是追求网页能快速打开相应，这时就是浏览器缓存上场的时间了。
概念：当浏览器向服务器发起资源请求后，相应后会加载各种资源：HTML页面、图片、JS文件、CSS文件，对于一些不经常变的内容，浏览器会将它们缓存下来，等下次再访问的时候，就直接从客户端加载这些资源了。 这些被浏览器保存下来的资源成为缓存。（注意：和cookie和localStorage是不同的概念）
二、缓存的分类
强缓存：http状态码为200 强缓存就是判断缓存是否在有效期内，如果在，则直接从客户端获取资源，不会发送请求向服务端。即使请求的资源已经更新。 Expires是HTTP 1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT，包含了Expires头标签的文件，就说明浏览器对于该文件缓存具有非常大的控制权。 Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如：随意修改下客户端时间，就能影响缓存命中的结果。所以在HTTP 1.1的时候，提出了一个新的header，就是Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示 Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。 这两个header可以只启用一个，也可以同时启用，当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires。 协商缓存：Last-Modified&Etag（是否更新）： 当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串
三、关于浏览器缓存
1、200 from memory cache 不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。但是这种方式只能缓存派生资源
2、200 from disk cache 不访问服务器，直接读缓存，从磁盘中读取缓存，当kill进程时，数据还是存在。这种方式也只能缓存派生资源
3、304 Not Modified 访问服务器，发现数据没有更新，服务器返回此状态码。然后从缓存中读取数据。
3.1、浏览器缓存的三级缓存原理
1、先去内存看，如果有，直接加载 2、如果内存没有，择取硬盘获取，如果有直接加载 3、如果硬盘也没有，那么就进行网络请求 4、加载到的资源缓存到硬盘和内存 一般浏览图片，如下流程：
访问-> 200 -> 退出浏览器 再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
4、application cache和上面缓存有点区别，是离线缓存，就是资源可以从硬盘上读取而不用联网，即使断网，用户也可以浏览。
四、HTTP中的Cache-Control和Expires
做浏览器缓存离不开要使用Cache-Control和Expires这两个属性。 Web页面设计中，建少HTTP请求可以提高页面响应速度。浏览器在第一次访问页面时下载的资源会缓存起来，第二次访问时会判断在缓存中是否已有该资源并且有没有更新过，如果已有该资源且没有更新过，则去缓存去取，这样减少了下载资源的时间。 原理：通过HTTP Rquest Header中的 if-modified-since 和Response Headers中的last-modified来实现（还有一对组合If-None-Match和Etag，类似，但有细微差别，不属于本文重点讨论范围，如有兴趣可参考链接Google Developers 优化性能指导），HTTP请求把if-modified-sincede 时间传给服务端，服务端把last-modified时间与之对比，如果相同，则意味着文件没有改动，则返回304，浏览器则从缓存中获取资源，无需下载。虽然这种方法减少了已缓存资源的下载时间，但是仍然发起了一次http请求。仍然还有更激进的做法来节省也页面加载的时间，就是免去该资源的http请求。即接下来的主角，HTTP的Expires和Cache-Control。
Cache-Control 的参数包括:
- max-age=[单位：秒 seconds] — 设置缓存最大的有效时间. 类似于 Expires, 但是这个参数定义的是时间大小（比如：60）而不是确定的时间点.单位是[秒 seconds].
- s-maxage=[单位：秒 seconds] — 类似于 max-age, 但是它只用于公享缓存 (e.g., proxy) .
- public — 响应会被缓存，并且在多用户间共享。正常情况, 如果要求 HTTP 认证,响应会自动设置为 private.
- private — 响应只能够作为私有的缓存(e.g., 在一个浏览器中)，不能再用户间共享。
- no-cache — 响应不会被缓存,而是实时向服务器端请求资源。这一点很有用，这对保证HTTP 认证能够严格地禁止缓存以保证安全性很有用（这是指页面与public结合使用的情况下）.既没有牺牲缓存的效率，又能保证安全。
- no-store — 在任何条件下，响应都不会被缓存，并且不会被写入到客户端的磁盘里，这也是基于安全考虑的某些敏感的响应才会使用这个。
- must-revalidate — 响应在特定条件下会被重用，以满足接下来的请求，但是它必须到服务器端去验证它是不是仍然是最新的。
- proxy-revalidate — 类似于 must-revalidate,但不适用于代理缓存.
For example:
1、Cache-control: max-age=5 表示当访问此网页后的5秒内再次访问不会去服务器。
2、 Cache-Control:max-age=3600,must-revalidate
如果Cache-Control 和 Expires 同时设置, Cache-Control 优先.如果你打算使用 Cache-Control ,别忘记好好看看关于 HTTP 1.1协议的文档
4.2、Expires
简要：添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续的页面中有效避免很多不必要的Http请求，WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。 例如：Expires：Thu，15 Apr 2010 20：00：00 GMT; 他告诉浏览器缓存有效性持续到2010年4月15日为止，在这个时间之内相同的请求使用缓存，这个时间之外使用http请求。
Cathe-Control：max-age=315360000
Expires有一个非常大的缺陷，它使用一个固定的时间，要求服务器与客户端的时钟保持严格的同步，并且这一天到来后，服务器还得重新设定新的时间。
HTTP1.1引入了Cathe-Control，它使用max-age指定组件被缓存多久，从请求开始在max-age时间内浏览器使用缓存，之外的使用请求，这样就可以消除Expires的限制，
如果对浏览器兼容性要求很高的话，可以两个都使用。
接下来用流程图详细的说明： 浏览器初次访问服务器---------------服务器返回200状态
浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中取，
服务器收到请求后，判断文件是否被修改过，若是则直接返回200，否则返回304，浏览器将从缓存中获取文件。
若同步刷新页面，则浏览器并不会先判断max-age，而是直接发送请求，服务器接收到请求后，判断文件是否有变化，若有则返回200，若没有则返回304
送一张浏览器缓存判断流程:
