使用HTTP Cache-Control 实现对网络的优化

前端攻城狮经常会为了用户体验去缓存一些不经常改动的数据来增加流畅度,实现方式五花八门,但是其实大家用的很多方式虽然最后达到了想要的效果,但不好意思,大家都绕路了,HTTP协议早就考虑到我们遇到的问题。

网页开发的同学们经常会遇到一个问题,就是自己改的html或者css老是不生效,当时有一个强制刷新的概念,Ctrl + F5就可以了,大家有想过一些问题吗?它为什么要缓存我们的文件?它会缓存多久呢?怎么去控制它?

为什么要缓存?

我们的图片、网页、css、js这些静态文件一旦被下载下来,改动的几率很小,每次都去加载势必会造成流量的浪费,而且加载速度上也会明显慢下来,特别在网速慢的客户端尤为明显。

它会缓存多久?

我们以JQuery为例,注意下图的响应头Cache-Control,max-age就是告诉浏览器这个文件要缓存多久的,单位是秒,也就是说这个文件要缓存十年!


怎么去控制它?

其实数据到底缓存多久,完全取决于服务器的响应头,客户端只是按照要求做事而已。具体Cache-Control包含哪些值我就不再赘述了,大家可以参考火狐浏览器的开发文档,里面有很全面的解答。


在Spring MVC中如何实现?

根据我们上面我们说的,其实浏览器就是我们我们服务器的小弟,我们要它干嘛它就得干嘛,所以我们要告诉它怎么做


我们再看一下结果


这是最简单的一种实现,对代码侵入性还是太强,后续我的想法是通过是通过注解的方式去实现数据的缓存


参考文献:

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容