浅谈浏览器缓存机制

前言

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

缓存的作用

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

缓存策略

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

强缓存

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

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

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

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

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

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

协商缓存

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

实际应用场景

demo

总结

正在编写中

------ 本文结束 ------

版权声明

Tflin's Blog by Tan Feng Lin is licensed under a Creative Commons BY-NC-ND 4.0 International License.
谭丰林创作并维护的Tflin's Blog博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Tflin's Blog 博客( http://tflin.com ),版权所有,侵权必究。