浏览器缓存机制详解

一、为什么需要缓存

在前端开发中，我们主要追求的是性能和用户体验。对于一个网站查看性能最简单的
方式就是打开网站的速度。而一个好的缓存策略可以大大提升网站的性能。使得已经
下载后的资源被重复利用。减少客户端和服务器之间的请求次数，减少带宽，减少网
络负荷。

二、什么是缓存

对于web缓存，主要是针对一些web资源（html, js,图片，数据等），就是介于web
服务器和浏览器之间的文件数据副本。当我们第一次打开某一个网页时，浏览器向服
务器发起请求，请求所需要的资源。如果我们使用了web缓存，当我们下一次再次
访问该网站页面的时候，我们可以根据一些缓存策略，来决定是否直接使用缓存中的
一些资源，还是再次向服务端发起请求，从而避免再次向服务器发起请求，减少客户
端和服务器之间通信的时延。

三、缓存的作用

1、减少网络带宽的消耗
2、降低服务器压力
3、减少网络延时，加快页面打开速度。

四、浏览器的缓存机制

对于浏览器端的缓存来说，规则是在http协议头和html的mate标签中定义的，他们
分别从过期机制和校验值来判断是否直接使用该缓存，还是需要从服务器去获取更新
的版本。
1、新鲜度(过期机制)：也就是缓存副本的有效期。一个缓存副本必须满足以下条件
之一，浏览器才会认为它是有效的，足够新的，才会直接使用缓存。
(*)http协议头中存在过期时间等信息，并且仍在有效期内。
(*)浏览器已经使用过这个缓存副本，并且在一个会话中已经检查过新鲜度。
2、校验值(验证机制)：服务器相应中，在响应头中存在Etag标签，用来验证资源是
否更改的标识，如果缓存的标识和服务器的标识相同则无需重新请求资源，如果不相
同，则重新发送资源请求。

五、浏览器缓存控制
1、html中的mate标签设置缓存

例如
设置过期时间
＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞ 
设置缓存
＜meta http-equiv="Pragma" content="no-cache"＞  

2、与缓存有关的字段

Cache-control:max-age(单位为s),当某一个资源的响应头设置max-age=3600，
则表示在1h时间内，服务器的资源发生变化，浏览器都不会想服务器发送该资源的请
求，直接使用缓存。并且max-age会覆盖Expires。
如下图所示

Cache-control:s-maxage,s-maxage表示CDN缓存，也就是代理缓存，如果设置s-maxage=60,表示60秒内无论cdn服务器的该资源发生怎么样的改变，都不会重新请求，并且s-maxage会覆盖max-age和Expires.

Cache-control:public，指定是否是共享缓存，如果设置Cache-control的值设置为public,则表示多个浏览器之间可以共同使用该资源缓存。
如果没有指定Cache-control是为private还是public，则默认是public.

Cache-control:private，表示该缓存是私有的，不存在用户共享。

Cache-control:no-cache；Cache-control的值设置为no-cache并不代表不缓
存，浏览器是缓存的，但是当每一次访问该资源的时候，都要向服务器请求查看资源
是否改变，如果改变，则直接重新下载，如果没有改变，则使用缓存。可以在设置完no-cache之后，在设置private，以及设置过期时间为过去的时间。

Cache-control:no-store,表示严格不缓存，每一次资源必须从服务器上重新获取。

Expires:缓存过期时间，Expires=max-age + 最后一次请求的时间。Cache-control和Expires相比，Cache-control的优先级更高。Expires需要和Last-modifyed来一起使用。

Last-Modified和if-modified-since:last-modified是响应头上的属性，if-modifyed-since
是请求头的数据。该属性值需要cache-control配合使用。当再次向服务器发送请求
该资源时，会携带if-modified-since的请求头字段，到服务器比对和last-
modified是否相同。如果相同则直接返回304,直接使用缓存，如果不相同，则再次
请求新的数据，返回200.

ETag和if-None-Match:这俩个属性其实和last-modified和if-modified-since
类似。不过Etag是服务器更加内容产生的hash字符串，并且Etag是响应头内容。
if-None-match是请求头的内容。当再次向服务器发送请求某一个资源时，请求头会
携带if-None-match属性，到达服务器后，和Etag进行比对。如果相同，则返回
304，如果不相同则返回该资源，并且状态码为200.

六、缓存报文头种类和优先级

Cache-control和Expires比较
Cache-control的优先级比Expires的优先级高。

Last-Modified和ETag比较
Etag的优先级要高于Last-modified，当在请求头中会先进行ETag比较，然后再进行Last-modified比较，如果两者都相等，则直接返回304,直接使用缓存资源。
两者比较一下，你可能会觉得两者的功能差不多，但是为什么要在http1.1中新增Etag呢？
1、Last-modified精确到秒，如果在一秒钟内修改多次文件，则无法准确拿到最新的文件。
2、如果缓存文件，打开后但是不修改内容，导致Last-modified发生变化，下一次就没有办法使用缓存文件了。
3、可能存在服务器没有获取准确的修改时间，或者代理服务器时间不一致的情况。

Last-Modified/Etag和Cache-control/Expires比较
Cache-control/Expries的优先级要比Last-Modified/Etag的优先级高，当第二次发送请求时，会首先查看Cache-control/Expries是否过期，如果没有过期，则任然使用该资源，如果过期了，则再次向服务器发送请求来请求最新的资源。到达服务器时通过比对Last-modified/Etag是否和原来的值相等，来判断资源是否改变，如果没有改变，则返回304。如果改变了，则返回最新的资源，并且状态码为200.

七、有哪些请求不能进行缓存的

无法被浏览器缓存的请求
1、http信息头部cache-control:no-cache , pragma: nocache或者使用cache-control:max-age=0
2、根据cookie，认证信息决定输入内容的信息是否可以被缓存的。
3、经过https加密的请求。
4、post请求无法被缓存。
5、在http响应头中不存在last-modified/Etag和cache-control/expires等。

八、使用缓存流程

上面的过程可以分为三个阶段：
1、本地缓存阶段：如果本地存在缓存，并且通过检查本地资资源的缓存并没有过
期，则直接使用本地缓存。
2、协商缓存阶段：如果在本地存在该资源，但是本地资源已经过期，此时就需要封
装http请求，向服务端发送请求，检查是否存在更改资源。如果资源没有更改，则直
接返回304，直接在本地使用资源。
3、缓存失败阶段:如果资源发生了更改，则重新返回最新的资源，并且返回状态码为
200。如果此时不存在该资源，则直接返回404。

九、用户行为与缓存的关系

用户在浏览器采用一些操作，例如，返回上一阶段，下一阶段，刷新页面，强制刷新
等操作，这些对于一些缓存属性的影响是不一样的。下面将进行详细解读。
1、刷新（仅仅是F5刷新）:此时对于cache-control/Expires是不生效的，但是last-modified/Etag都生效的，所以此时会向服务器发起请求，用来判断目标文件是否发生变化。
2、强制刷新(F5刷新+ctrl):此时对于cache-control/expires和last-modified/Etag都不生效，此时必须从服务器拿到新数据。
3、回车或者转向：此时所有的缓存都生效。

十、从缓存角度改善站点

1、同一个资源保证只有一个稳定的url地址。
2、css,js,图片资源增加http缓存头，入口html文件不被缓存。
3、减少对cookie的依赖
4、减少对http协议加密的使用。