前端缓存的问题


前端缓存的问题

Cache-Control是HTTP1.1中新增的字段,来定义缓存过期时间
诸如上图中Expires、Pragma、Cache-Control等字段若同时出现,优先级是
Pragma \u0026gt; Cache-Control \u0026gt; Expires 从高到低排列的
那么这些首部字段设置的意义何在?
我们试想这样的一个情景:
举个栗子
客户端上某个资源保存的缓存时间过期了,但服务端并没有进行过更新,恰巧这个资源数据量巨大,客户端要求服务端再把这个东西重新发一遍过来,是否非常浪费带宽和时间呢?
所以,这些首部字段是为了让客户端和服务器之间能够实现缓存资源是否更新的验证而存在的。
【前端缓存的问题】

■网友
因为如果你有了刷新的动作,根据cache-control的值服务器会给浏览器返回304协议缓存。原理就是你刷新的时候带着本地文件的版本戳去服务器请求,服务器如果比对你确实没过期,就返回一个304状态码使用本地资源。如果过期了,就返回200状态码和整个文件。对于这种刷新造成的304,移动端会明显看出有上下行缓存造成的延迟,我们美团有通用的解决方案 LsLoader 移动WEB工程化缓存方案 - 美团外卖前端技术栈 - 专栏 你可以参考一下
■网友
因为浏览器默认的缓存策略不一定是你所希望的。如果所有的静态资源文件都做文件名末尾唯一 hash,那么缓存应该是保留越长越好。如果是有明确更新时间的资源,应该指定过期时间更佳。 etag 和 last modify 组合可以让一些入口页面避免更新不及时或者没有缓存的尴尬。甚至还有一些业务追求更高的缓存效果而自行通过 local storage 来管理缓存的方案 。其实最关键是根据你的业务需要来部署配置,以达到减少带宽占用提高用户体验的目的。
■网友
根据不同文件的不同需求,以及一些基本上不会改变的资源,还有指定过期时间可以控制产品的自动升级


    推荐阅读