初识浏览器的强缓存和协商缓存

什么是浏览器缓存，为什么要缓存：

浏览器缓存是将浏览器初次加载的文档保存到本地磁盘中，当浏览器再次请求文档的时候可以直接从本地进行加载；所以通过浏览器缓存可以减少和服务器的请求，降低服务器负担，减少冗余数据的传输，从而加快客户端的加载速率；

什么是强缓存和协商缓存？

强缓存：利用http头中的Expires和Cache-Control俩个字段来表示资源缓存时间，普通刷新会忽略它，但是不会清除，需要强制刷新（Ctrl+F5||地址栏中直接刷新），浏览器强制刷新的时候，请求会带上Cache-Control:no-cache和Pragma:no-cache;

扩展一：什么是Expires和Cache-Control？他俩优先级是什么？

Expires的值是一个绝对时间的时间字符串，标识的是本地缓存资源失效的时间；

Cache-Control代表的是本地缓存资源的相对时间，常用的值有max-age，如max-age=1000表示资源的有效时间是1000秒；no-cache表示不适用本地缓存，使用协商缓存；no-store禁止浏览器缓存数据，每次请求都从服务器获取；public可以被所有用户缓存；private只能被浏览器终端用户缓存；

如果上述俩者都存在，难么Cache-Control的优先级高于Expires；

协商缓存：通过Etag和If-None-Match标识由服务器确定缓存的资源是否可用，普通刷新（F5）会启用协商缓存

扩展二：什么是Etag和If-None-Match?

两者返回的是一个校验码，Etag可以保证每个资源的唯一性，资源的变化都会引起ETag的变化，服务器根据浏览器传送的If-None-Match来确定是否重新缓冲；

扩展三：浏览器的缓存过程

浏览器缓存流程图
​​​​​

1.浏览器请求某一资源时，会先获取该资源缓存的header信息，然后根据header中的Cache-Control和Expires来判断是否过期，。若没过期则直接从缓存中获取资源信息，包括缓存的header的信息，所以此次请求不会与服务器进行通信。这里判断是否过期。则是强缓存相关，后面会讲Cache-Control和Expires相关。

2.如果显示已过期，浏览器会向服务器端发送请求，这个请求会携带第一次请求返回的有关缓存的header字段信息，比如客户端会通过If-None-Match头将先前服务器端发送过来的Etag发送给服务器，服务会对比这个客户端发过来的Etag是否与服务器的相同，若相同，就将If-None-Match的值设为false，返回状态304，客户端继续使用本地缓存，不解析服务器端发回来的数据，若不相同就将If-None-Match的值设为true，返回状态为200，客户端重新机械服务器端返回的数据；客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器，服务器端通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回最新的内容，如果是最新的，则返回304，客户端继续使用本地缓存。

上述内容以及流程图转载自https://blog.csdn.net/hhthwx/article/details/79942437，如侵必删；