浏览器缓存

浏览器缓存解决的问题

1.加快静态资源的加载速度
2.加快浏览器页面的渲染速度
3.减少用户的请求次数，减少带宽消耗
4.减轻服务器的压力

浏览器缓存—强制缓存和协商缓存

浏览器资源缓存一般通过资源的Response Header来做处理的：其中
补充：
Cache-Control:
public：相应被缓存，并且可以被多用户共享
private：只能客户端缓（私有的缓存），不能被共享
no-store：强制不做任何的缓存
no-cache：跳过强制缓存，走协商缓存（需要做协商缓存的配置）
max-age=数值：单位为秒，间隔一段时间的缓存，基于请求时间（Date字段）的相对时间间隔，而不是绝对过期时间
Expires：具体的时间，当客户端的时间超过这个时间，则视为缓存过期，直接向服务器请求资源

1.强制缓存是由Cache-Control和Expires来控制的；
1)常用Cache-Control：max-age=300（一个秒为单位的数值，举列300s），来强制缓存资源，当超过300s时，则向服务器请求资源，若没有则直接使用缓存中的资源来加载。
2)Expires：一个具体的时间，比较客户端时间是否大于该时间，大于则视为过期，直接向服务请求资源（有个缺点，因为客户端时间是可以改的，会影响缓存）
注意：当Cache-Control：max-age和Expires同时存在时，Cache-Control：max-age会把Expires覆盖，当多次设置Cache-Control：max-age时，会取最小值；

协商缓存

协商缓存主要看两对HTTP Response Header里的参数，last-modified/if-modified-since和etag/if-none-match
1.last-modified/if-modified-since :其值是本地资源文件的在服务器上的最后修改时间。
具体工作流程是：客户端第一次请求资源，服务器响应时会在HTTP Response Header加上last-modified参数（需要去开启，有些服务器是默认开启的），值为服务器上资源的最后修改时间，当客户端第二次去请求资源时，浏览器会在请求头加上if-modified-since：last-modified，服务器会拿if-modified-since去与当前服务器上该资源文件的最后修改时间做比较，若变化，则返回200+新资源+最新的修改时间，若五变化，则直接单纯返回403状态码；
2.etag/if-none-match：其值是一个计算出来的hash值（一般是），一个资源文件只要没有变化，etag的值相等。
具体工作流程是：客户端第一次请求资源，服务器相应时会在HTTP Response Header加上etag参数（需要去开启，有些服务器是默认开启的），值为服务器根据文件计算出来的（hash值），当客户端第二次去请求资源时，浏览器会在请求头里加上if-none-match，服务器会重新计算文件的hash值再与if-none-match值比较，若变化，则返回200+新资源+最新的hash，若五变化，则直接单纯返回403状态码；
具体可以参考：
https://juejin.cn/post/6844903511008739341
https://juejin.cn/post/7063768338844876814