浅谈浏览器缓存机制

前言

在前端性能优化这一块上，利用好浏览器缓存可以说是最为简单高效的一中方式了，当然不只是在浏览器，不管是什么，利用好缓存都极大的提高性能。浏览器缓存机制也就是HTTP缓存机制，可以有效的减少网络传输所消耗的流量和时间，若所请求的资源在浏览器中存在缓存，那么则可以直接使用缓存而不发生请求，或者是发送请求但服务器上和客户端上的数据完全一致，不存在更新，那就不必再将数据回传给客户端，而是直接使用浏览器缓存，大大的减少了响应的数据，提高了性能。

缓存的作用

1. 减少传输的数据，节省了流量
2. 使用缓存，不必发送请求或是不必回传数据，提高了效率
3. 客户端使用了缓存，服务器也无需传输数据给客户端减少了服务的的负担
4. 用户体验更好，比如类似PWA就是使用本地缓存的一种，虽然不是这里所讨论的HTTP缓存

缓存策略

一般来说浏览器缓存的策略分为：强缓存和协商缓存，设置缓存策略是通过设置 HTTP Header 来实现的。

强缓存

强缓存，客户端向服务器发送数据请求，请求成功后将数据缓存在本地，如果以后客户端再次请求该资源，则不需要再次向服务器发送资源请求，直接使用本地的缓存。强缓存的特点是：不需要与服务器发送交互，直接使用本地缓存。

客户端访问强缓存的序列图

请求的数据命中缓存：客户端请求数据，先在本地缓存数据库中查找该数据，若本地缓存数据库中存在该数据且数据未过期，则缓存系统返回该数据给客户端，不必向服务器发送请求。

1
2

客户端->缓存数据库:请求数据
缓存数据库->客户端:请求的数据有缓存，并且未失效，返回数据

请求的数据，未命中缓存：若请求的数据在本地缓存数据库中存在但已经过期，则客户端重新向服务器发送请求，服务器将新的数据和缓存规则一起返回给客户端，客户端接收后将它们一起放入缓存数据库中，以备下次使用。

1
2
3
4
5

客户端->缓存数据库:请求数据
缓存数据库->客户端:缓存失效
客户端->服务器:请求数据
服务器->客户端:返回新数据和缓存规则
客户端->缓存数据库:将数据和缓存规则存入缓存系统中

协商缓存

协商缓存，顾名思义，就是缓存的数据是否发生改变需要发送请求与服务器进行协商，客户端需要向服务器发送请求询问数据是否更新。客户端第一次请求数据的时候，服务器响应请求会将缓存标识和数据主体一起返回给客户端，客户端接收到之后将它们备份至缓存数据库中。客户端再次请求该数据的时候，会将该数据的缓存标识发送给服务器，服务器根据缓存标识进行比较，若比较成功，则通知客户端所缓存的数据为发生改变，可以使用。

实际应用场景

demo

总结

正在编写中