强缓存和协商缓存

在介绍缓存的时候,我们习惯将缓存分为强缓存和协商缓存两种。两者的主要区别是使用本地缓存的时候,是否需要向服务器验证本地缓存是否依旧有效。

顾名思义,协商缓存,就是需要和服务器进行协商,最终确定是否使用本地缓存。

两种缓存方案的问题点

强缓存

我们知道,强缓存主要是通过http请求头中的Cache-Control和Expire两个字段控制。Expire是HTTP1.0标准下的字段,在这里我们可以忽略。我们重点来讨论的Cache-Control这个字段。

一般,我们会设置Cache-Control的值为“public, max-age=xxx”,表示在xxx秒内再次访问该资源,均使用本地的缓存,不再向服务器发起请求。

显而易见,如果在xxx秒内,服务器上面的资源更新了,客户端在没有强制刷新的情况下,看到的内容还是旧的。

如果发布新版本的时候,后台接口也同步更新了,那就gg了。有缓存的用户还在使用旧接口,而那个接口已经被后台干掉了。那怎么办呢?

协商缓存

协商缓存最大的问题就是每次都要向服务器验证一下缓存的有效性,似乎看起来很省事,不管那么多,你都要问一下我是否有效。但是,每次都去请求服务器,那要缓存还有什么意义。

最佳实践

缓存的意义就在于减少请求,更多地使用本地的资源,给用户更好的体验的同时,也减轻服务器压力。

所以,最佳实践,就应该是尽可能命中强缓存,同时,能在更新版本的时候让客户端的缓存失效。

在更新版本之后,如何让用户第一时间使用最新的资源文件呢?

机智的前端们想出了一个方法,在更新版本的时候,顺便把静态资源的路径改了,这样,就相当于第一次访问这些资源,就不会存在缓存的问题了。

webpack可以让我们在打包的时候,在文件的命名上带上hash值。

entry:{
main: path.join(__dirname,'./main.js'),
vendor: ['react', 'antd']
},
output:{
path:path.join(__dirname,'./dist'),
publicPath: '/dist/',
filname: 'bundle.[chunkhash].js'
}

综上所述,我们可以得出一个较为合理的缓存方案:

  • HTML:使用协商缓存。
  • CSS&JS&图片:使用强缓存,文件命名带上hash值。

CDN缓存

CDN的全称是Content Delivery Network,即内容分发网络。是架设在客户端和服务器之间的Cache层。

大致来讲,客户端请求资源时,CDN对域名解析进行了调整,然后返回一个CNAME,浏览器对CNAME进行解析后得到了CDN服务器的ip,CDN服务器上存在请求的资源就返回本地缓存,不存在则CDN服务器向真正的服务器发出请求,获得资源后缓存在本地,并返回给客户端,实现整个流程。

优点:CDN缓存主要起到客户端跟服务器之前地域的问题,减少延时,分流作用,降低服务器的流量,减轻服务器压力

最新文章

  1. Timer1控件的属性
  2. .net framework 源码调试 与 问题解决
  3. Java中的字符串驻留(String Interning)
  4. CentOS7 开关防火墙
  5. P - 奔小康赚大钱 - hdu 2255(带权值的匹配)
  6. AIX下RAC搭建 Oracle10G(四)安装CRS
  7. VS2015安装提示出现“安装包丢失或损坏”解决方法
  8. linux-Vim命令合集
  9. 5ci
  10. UVA12265-Selling Land(单调栈)
  11. (链表 双指针) leetcode 141. Linked List Cycle
  12. Flask核心机制--上下文源码剖析
  13. HTML之marquee妙用
  14. Centos安装elasticsearch教程
  15. ASP.NET MVC:UrlHelper.cs
  16. cocos2d-js 调试办法 断点调试 Android真机调试
  17. js实现类似qq表情(插入图片以及获取光标的效果)
  18. Win10系统下编译OSG3.4
  19. 【贪心算法】POJ-1017
  20. 微博推荐算法学习(Weibo Recommend Algolrithm)

热门文章

  1. hdu 4521 小明序列(线段树,DP思想)
  2. 关于docker中容器可以Ping通外网,真机无法Ping通容器的问题
  3. {% csrf_token %} 原理和作用 (踩坑必看)
  4. 剑指 Offer 20. 表示数值的字符串
  5. robot_framewok自动化测试--(9)连接并操作 MySql 数据库
  6. Fiddler抓包工具学习及使用
  7. lombok标签之@Data @AllArgsConstructor @@NoArgsConstructor -如何去除get,set方法。@Data注解和如何使用,lombok
  8. Vue组件传值prop验证方式
  9. 大爽Python入门教程 1-4 习题
  10. [spojQTREE7]Query on a tree VII