又叒叕是一篇讲缓存的文章
掘金上有很多讲缓存讲得很精彩很透彻的文章,我这篇文章重在个人的学习吧,希望尽量能往老瓶里面装点新酒。好吧,废话不多说,马上进入主题。
众所周知,缓存分为两种。一种是强缓存,另外一种是协商缓存。如果命中强缓存,那么浏览器将不需要请求服务器直接拿缓存资源来使用。而协商缓存不管是否命中都要和服务器端发生交互的。因此在实际开发中,是希望更多的命中强缓存的,因为这样可以减少对服务器的请求,性能无疑会更好。
缓存匹配流程图:
强缓存
由上面的图可以看出来,强缓存的优先级是要比协商缓存高的。而控制强缓存的有两个http头字段控制。
- Expires
它是一个HTTP 1.0版本的一个HTTP头字段,用于声明缓存的过期时间。但是由于它记录的是一个绝对的时间,这就很可能会因为时区或者时间格式等问题导致缓存失效。因此现在在实际开发中基本已经很少使用了。
- Cache-Control
Cache-Control是一个HTTP 1.1版本的HTTP头字段。它的优先级会比Expires高,当二者同时存在时,浏览器会以Cache-Control作为缓存是否过期的依据。
值得注意的是no-cache并不是说不缓存,而是指每次请求都必须先请求一下服务器,其实跟协商缓存很类似。而真正的不缓存是no-store.另外一个常用的字段就是max-age.max-age表示缓存的内容在XXX秒内有效,这就可以很好的解决了Expires由于地区和格式引起的问题。
协商缓存
协商缓存等于每次浏览器请求资源之前都会先发一个请求给服务器查看资源是否有更改,如果资源没有更改即使资源过期了,浏览器照样可以拿缓存的内容来使用。可以说是一种更安全的缓存方案。
- Last-modified/If-Modified-Since
Last-modified表示资源最后修改的时间,响应头会带上这个标识。当浏览器浏览器请求完这个资源之后就会把这个时间记录下来。再次请求时,请求头会带上If-Modified-Since 的字段,服务器端收到后,就会根据If-Modified-Since的时间与资源最后的更改时间进行比较,看资源是否发生了更改。如果没有发生更改,则会返回状态码为304的响应,如果发生了更改就会返回状态码为200的响应。
- Etag/If-None-Match
Etag是由服务器端生成的一段hash code.默认的计算方式是“文件的最后修改时间16进制-文件长度16进制”。服务器端在响应客户请求的时候会带上Etag,之后客户端请求就会通过If-None-Match携带上Etag。然后客户端会根据是否命中来决定返回304还是200.
项目实践
上面说了这么多概念性的东西,下面我来说一下我自己项目中一些缓存的实践吧。我们在项目开发中关于缓存会有以下几点的设置:
1.将JS,CSS,图片等静态资源的有效时间设置得很大(max-age=31536000),尽量命中强缓存。
2.将html的资源的有效时间设置得很短(max-age=0,或者cahe-control:no-store/no-cache).这样可以避免html不更新读取不到最新得资源文件。
3.在使用webpack打包时,将js,css,图片等静态资源使用contentHash来命名打包出来的文件。
entry:{main: path.join(__dirname,'./main.js'),vendor: ['react', 'antd']
},
output:{path:path.join(__dirname,'./dist'),publicPath: '/dist/',filname: 'bundle.[contentHash].js'
}
复制代码
- 4.最后部署时采用非覆盖式的部署。
最后
以上如果有说得不对的地方,欢迎指正~~
转载于:https://juejin.im/post/5c46db21f265da614e2c6090
又叒叕是一篇讲缓存的文章相关推荐
- iOS开发网络篇—数据缓存
iOS开发网络篇-数据缓存 一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造成以 ...
- 黑马Redis笔记高级篇 | 多级缓存
黑马Redis笔记高级篇 | 多级缓存(黑马教程云服务器踩坑记录) 1.JVM进程缓存(tomcat服务内部) 1.1 导入商品案例 1.2 初识Caffeine 1.3 实现进程缓存 2.Lua语法 ...
- OkHttp原理第五篇-Cache缓存类详解
✨作者简介:00后,22年刚刚毕业,一枚在鹅厂搬砖的程序员. ✨前置任务:本篇是CacheInterceptor的补充文章,重点讲解OkHttp的缓存类,读者最好也了解下,虽然不太影响后续文章的阅读, ...
- Java基础-->一篇讲全Java常用类(详细易懂,建议收藏)
Java基础–>一篇讲全Java常用类(详细易懂,建议收藏) 文章目录 Java基础-->一篇讲全Java常用类(详细易懂,建议收藏) 1.字符串相关的类 String类 概述 创建Str ...
- 秋色园QBlog技术原理解析:性能优化篇:用户和文章计数器方案(十七)
2019独角兽企业重金招聘Python工程师标准>>> 上节概要: 上节 秋色园QBlog技术原理解析:性能优化篇:access的并发极限及分库分散并发方案(十六) 中, 介绍了 ...
- 程序员怎样才能写出一篇好的技术文章
来源:http://droidyue.com/blog/2016/06/19/how-to-write-an-awesome-post/ 首先,这算是一篇回答知乎问题 程序员怎样才能写出一篇好的博客或 ...
- 转载一篇介绍 WordPress 的文章
Wordpress简明使用指南 从今年9月到现在,我用Wordpress也有大约3个月了.现将自己使用中的一些体会分简介.安装.一般使用.主题.插件.代码修改等几个部分逐一概述如下. 1. 简介 Wo ...
- 一百多篇热门经典计算文章 来自 11 个热门的技术类微信公众
为了扩散本文收录的一百多篇热门经典计算文章,主页君也做回标题党.拿了板砖的童鞋,请往下看了再拍不迟 :) 本文收录的文章来自 11 个热门的技术类微信公众号.我们从每个公号中选出了 2015 年最热门 ...
- 转载一篇关于ADA的文章
转载一篇关于ADA的文章 因为看ocarina的源码,所以转载了一篇ADA文章,也是第一篇博客,刚开始还不怎么会用,但是以后慢慢学吧. [转载部分]为什么要写关于这么古老的语言(1980年左右)的文章 ...
最新文章
- Linux下查看/修改系统时区、时间
- data structure begin!!
- LeetCode 11 盛最多水的容器
- 硬盘结构,主引导记录MBR,硬盘分区表DPT,主分区、扩展分区和逻辑分区,电脑启动过程...
- 架​设​W​e​b​服​务​器
- 4-6:TCP协议之滑动窗口
- leetcode —— 面试题 17.12. BiNode
- Web API 跨域访问
- YOLOv5瓷砖表面瑕疵质检
- ros control
- 阿里免费开放一切AI算力的背后是什么?
- axure删除的页面怎么恢复_Axure高保真还原Web首页布局和交互教程
- linux多线程调度设置
- AUTOCAD——成组命令
- 智能电子密码锁行业调研报告 - 市场现状分析与发展前景预测
- Oracle的Package的作用及用法
- maven的pom出现cannot reconnect错误
- VS-Code安装C++安装教程
- LeetCode 反转链表(C++)
- Javascript:一个屌丝的逆袭