前端浏览器缓存机制

1 缓存定义及其优点

什么是缓存？

当我们第一次访问网站的时候，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问的时候，网站就会从电脑中直接加载出来，这就是缓存。比如我们访问网页点击后退功能的时候，加载的非常快，这就是缓存的优势。

缓存优点：

1 缓存服务器压力，不用每次都去请求某些数据了

2 提升性能，打开本地资源肯定会比请求服务器更快

3 减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗。

浏览器缓存过程：

强缓存

协商缓存

强缓存与协商缓存的区别：

强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。

大部分web服务器都默认开启协商缓存

浏览器缓存位置

Service Worker

Memory Cache

Disk Cache

Push Cache

2 强缓存

       强缓存是当我们访问URL的时候，不会向服务器发送请求，直接从缓存中读取资源，但是会返回200的状态码。

如何设置强缓存？

       我们第一次进入页面，请求服务器，服务器会进行应答，浏览器根据服务器的应答respon Header来判断是否对资源进行缓存，如果响应头中有expires、pragma或cache-control字段，代表是强缓存，浏览器就会把资源缓存在memory cache 或 disk cache中。

       第二次请求时，浏览器判断请求参数，如果符合强缓存条件就直接返回状态码200，从本地缓存中拿数据。否则把响应参数存在request header请求中，看是否符合协商缓存，符合则返回状态码304，不符合则服务器返回全新资源。