一、概述

浏览器缓存能够降低资源重复加载并提高网页的加载速度

浏览器的缓存分为两种，强缓存和协商缓存。

1、基本原理

• 浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。
• 如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过last-modified和etag验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，依然是从缓存中读取资源
• 如果前面两者都没有命中，直接从服务器加载资源

2、异同点

（1）相同点

如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；

（2）不同点

强缓存不会发送任何请求，直接从本地加载数据，协商缓存要向服务器发一次请求。

二、强缓存

1、Expires

Expires是一个Http1.0提出的概念，它描述的是一个绝对时间，由服务端返回

Expires: Wed, 11 May 2018 07:20:00 GMT

这种方式的弊端在于如果我们修改了客户端的时间可能会意外导致缓存失效。

2、Cache-Control

catche-control是http1.1提出的概念，优先级高于expires，描述的是一个相对时间

Cache-Control: max-age=315360000

除了max-age外，cache-control还有其他几个参数：

-no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。

-no-store：直接禁止浏览器缓存数据，每次用户请求该资源，都会向服务器发送一个请求，每次都会下载完整的资源。

-public：可以被所有的用户缓存，包括终端用户和CDN等中间代理服务器。

-private：只能被终端用户的浏览器缓存，不允许CDN等中继缓存服务器对其缓存。

三、协商缓存

协商缓存的优先级低于强缓存，当没有命中强缓存是，浏览器便会发一个请求到服务端，验证是否命中协商缓存，如果命中，则返回304状态码并显示一个Not Modified的字符串。

1、Last-Modified，If-Modified-Since

Last-Modified 表示本地文件最后修改日期，浏览器会在request header加上If-Modified-Since（上次返回的Last-Modified的值），询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来

但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag。

2、ETag、If-None-Match

ETag就像一个文件指纹，文件的每一次变动生成的ETag都是不同的，所以浏览器可以依此来判断文件是否有发生过修改。

If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来

ETag的优先级高于Last-Modified。

四、状态码

• 200：强缓Expires/Cache-Control存失效时，返回新的资源文件
• 200(from cache): 强缓Expires/Cache-Control两者都存在，未过期，Cache-Control优先Expires时，浏览器从本地获取资源成功
• 304(Not Modified )：协商缓存Last-modified/Etag没有过期时，服务端返回状态码304

现在的200(from cache)已经变成了from disk cache(磁盘缓存)和from memory cache(内存缓存)两种，而这两种方式又有什么区别呢：

from memory cache：字面理解是从内存中，其实也是字面的含义，这个资源是直接从内存中拿到的，不会请求服务器一般已经加载过该资源且缓存在了内存当中，当关闭该页面时，此资源就被内存释放掉了，再次重新打开相同页面时不会出现from memory cache的情况。

from disk cache：同上类似，此资源是从磁盘当中取出的，也是在已经在之前的某个时间加载过该资源，不会请求服务器但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会from disk cache。

下表统计了这两种类型各会存储的资源：