浏览器缓存之参数详解 - 性能优化篇
目录
- 前言
- 知识点
- 缓存的类型
- 强缓存
- Expires
- Cache-Control
- 对比
- 协商缓存
- Last-Modified 和 If-Modified-Since
- ETag 和 If-None-Match
- 两者对比
- 缓存位置
- Service Worker
- Memory Cache
- preloader
- preload
- Disk Cache
- Push Cache
- 缓存过程分析
- 缓存策略的实际使用场景
- 不常变化的资源
- 常变化的资源
前言
很多时候面试官不会精确问你某个知识点，而是抛出一个有指向性但是又可以很发散的问题，比如：
“嗯… 那你说说浏览器的缓存吧“
这时候考验的就是你对浏览器知识的广度和深度。
当接到这样一个问题的时候，你得冷静思考有几个方面可以回答，各个大方面又可以从哪几个小方面说。
知识点
浏览器缓存这一块可以精确地回答一下几个大方面：
- 缓存的类型（强缓存 or 协商缓存）
- 缓存位置（Service Worker、Memory Cache…）
- 缓存过程分析
- 缓存策略的实际场景应用
缓存的类型
首先从缓存的类型上说，缓存分为 强缓存 和 协商缓存
强缓存是 不需要发送 HTTP 请求的，而协商缓存需要。
也就是说，在发送 HTTP 请求之前，浏览器会先检查一下强缓存，如果命中直接使用，否则就进入下一步。
强缓存
浏览器检查强缓存的方式主要有两个字段：
- HTTP/1.0 时期使用 Expires
- HTTP/1.1 时期使用 Cache-Control
Expires
Expires 字面意思是有效期，所以它表示的是一个具体的时间，例如：
Expires: Wed, Nov 11 2020 08:00:00 GMT
表示的是这个资源将在 2020年11月11日 8 点过期，过期就得重新向服务端发送请求。
很有意思的是，通常情况下服务端的时间与客户端的时间其实是并不一致的，那么如果设置了 Expires 字段就很有可能造成缓存失效，因此这种方式并不准确，所以在 HTTP/1.1 被摒弃了。
Cache-Control
摒弃了 Expires 之后，HTTP/1.1 采用了 Cache-Control 这个重要规则，它设置了一个具体的过期时长，其中的一个属性是 max-age。
Cache-Control: max-age=300
这表示当前资源会在 300s 后过期。
Cache-Control 不仅仅含有一个 max-age 的属性，他还有很多用法， 甚至还可以采用组合的方式：
Cache-Control: public, max-age=300
下面列举一些常用指令：
- public：客户端和代理服务器都可以缓存，响应可以被中间任何一个节点缓存
- private：这个是 Cache-Control 的默认取值，只有客户端可以缓存，中间节点不允许缓存
- no-cache：表示不进行强缓存验证，而是用协商缓存来验证
- no-store：所有内容都不会被缓存，既不使用强缓存，也不使用协商缓存
- max-age：表示多久时间之后过期
- s-max-age：作用同 max-age，但是表示代理缓存，且优先级更高
- max-stale：能容忍的最大过期时间
- min-fresh：能容忍的最小新鲜度
对比
- Expires 产于 HTTP/1.0，而 Cache-Control 产于 HTTP/1.1
- Expires 设置的是一个具体的时间，Cache-Control 可以设置除时间以外的其他属性
- 两者同时存在时，Cache-Control 优先级更高
- 在不支持 HTTP/1.1 的环境下，Expires 就会发挥作用，所以现阶段的存在是为了做一些兼容处理
协商缓存
上面我们介绍了强缓存，如果强缓存失效，则会进入协商缓存。
协商缓存概括起来就是浏览器会携带缓存标识（tag）向服务端发送请求，服务端会根据缓存标识（tag）来决定是否使用缓存。
所以对于服务器来说，返回的结果会有两种：
- 协商缓存生效，返回 304 状态码和 Not Modified（空的响应体）
- 协商缓存失效，返回 200 和请求结果
协商缓存分为 Last-Modified 和 ETag 两个字段控制。
Last-Modified 和 If-Modified-Since
从字面意思上我们可以看出，Last-Modified 表示的是资源最后的修改时间，它的实现方式是：
- 浏览器第一次向服务器请求该资源
- 服务器在返回这个资源的同时，会在响应头中添加 Last-Modified 的字段，值为最后的修改时间
- 当浏览器接收后缓存文件和这个 header
- 当下一次浏览器再次发送请求请求该资源的时候，检测到有 Last-Modified 这个 header，就会在请求头中添加 If-Modified-Since 这个字段，值为 Last-Modified
- 服务器接收到请求之后，根据 If-Modified-Since 与服务器的这一资源的最后修改时间做对比
- 如果结果相同，则返回 304 状态码和一个空的响应题，告诉浏览器使用缓存
- 反之，返回 200 状态码和请求的资源，同时在响应头中更新 Last-Modified
ETag 和 If-None-Match
Etag 的原理其实和 Last-Modified 相似，但是它是根据一个唯一标识来进行判断。
当浏览器请求服务器资源的时候，服务器会根据当前文件的内容，给文件生成一个唯一的标识，若是文件发生修改，则标识也会修改。
服务器在响应请求的时候，会在响应头添加一个 ETag 的字段，值为这个文件当前的唯一标识。
浏览器在接收到文件并缓存文件和 请求的响应头。
在下一次请求这个资源的时候，浏览器会在请求头上加一个 If-None-Match 的字段，值为 ETag。
服务器用请求头上的值和本地资源的值进行对比，如果命中则返回 304 告知浏览器使用本地缓存，否则返回 200 和最新的资源文件。
两者对比
首先对于 Last-Modified：
- 若是本地打开了缓存文件，并且并没有修改文件，也还是会改变最后的修改时间，导致缓存失败；
- 由于 Last-Modified 是以秒作为计时单位，若是某个文件的改动是在秒级以内的话，那么这之后就无法被记录导致缓存命中错误。
对于 ETag：
- 性能上会比 Last-Modified 差，因为只要文件发生修改，就会重新生成一个新的 hash 值。
综上：
- 准确度上，ETag 要高于 Last-Modified
- 性能上 Last-Modified 更好
- 两者都支持的话，ETag 优先级更高
缓存位置
在上面
浏览器缓存之参数详解 - 性能优化篇相关推荐
- MVC输出缓存(OutputCache参数详解）
1.学习之前你应该知道这些 几乎每个项目都会用到缓存,这是必然的.以前在学校时做的网站基本上的一个标准就是1.搞定增删改查2.页面做的不要太差3.能运行(ps真的有这种情况,答辩验收的时候几个人在讲台 ...
- 浏览器 缓存 面试 参数解析 Cache-Control Expires ETag Last-Modified
面试说法 面试: 缓存主要分为强缓存和协议缓存,在浏览器加载资源的时候,会根据请求头判断是否命中强缓存,如果命中强缓存的话,会直接从缓存中读取数据而不发送请求. 判断强缓存的方式的话,需要判断请求头中 ...
- 如何开启jvm日志_直通BAT必考题系列：JVM性能调优的6大步骤，及关键调优参数详解...
JVM系列 直通BAT必考题系列:7种JVM垃圾收集器特点,优劣势.及使用场景 直通BAT必考题系列:JVM的4种垃圾回收算法.垃圾回收机制与总结 直通BAT必考题系列:深入详解JVM内存模型与JVM ...
- 阿里云AMD服务器ECS实例g6a、c6a和r6a性能参数详解
阿里云AMD服务器ECS计算型c6a.通用型g6a和内存型r6a实例,CPU采用2.6GHz主频的AMD EPYCTM ROME处理器,睿频3.3GHz,计算性能稳定,云服务器吧来详细说下阿里云ECS ...
- 阿里云AMD服务器ECS计算型c7a、通用型g7a和内存型r7a性能参数详解
阿里云第二代AMD服务器ECS计算型c7a.通用型g7a和内存型r7a实例,CPU采用2.55 GHz主频的AMD EPYCTM MILAN处理器,单核睿频最高3.5 GHz,算力更强,云服务器吧详细 ...
- Supermap iDesktop模型生成缓存参数详解
如今Supermap iDesktop已经更新到11i了,在场景缓存上新增了部分功能,很多小伙伴都苦于各个参数设置上没有详细的介绍,并且在生成场景缓存时易奔溃.接下来,小编就整理了Supermap i ...
- mysql --skip-locking_skip-external-locking – MySQL性能参数详解
skip-external-locking – MySQL性能参数详解 MySQL的配置文件my.cnf中默认存在一行skip-external-locking的参数,即"跳过外部锁定&qu ...
- 阿里云ARM服务器通用型g6r实例CPU性能参数详解
查看全文 http://www.taodudu.cc/news/show-2713373.html 相关文章: oracle profile 参数,oracle profile的参数详解 CPU各项参 ...
- Linux系统上hdparm工具参数详解，硬盘检查、测速、设定和优化
Linux系统上hdparm工具参数详解,硬盘检查.测速.设定和优化 2012/07/25 hdparm, 硬盘 Linux命令相关 1 6,757 hdparm的功能:显示与设定硬盘的参数.hdpa ...
最新文章
- 雍培：电力遇上大数据，使我的科研如鱼得水 | 提升之路系列（九）
- linux发行版本在这里。
- 优秀架构师养成记：我是如何逆袭走向“人生巅峰”的？
- Spring data elasticsearch的使用
- oracle 12c undo,Oracle 12C新特性-临时UNDO段(Temporary Undo Segments) | 信春哥，系统稳，闭眼上线不回滚！...
- 决胜大数据时代：HadoopYarnSpark企业级最佳实践(3天)
- CodeForces - 1207F Remainder Problem(分块)
- 提升体验-支持Chrome Custom Tabs
- SAP收购的coresystem app的使用截图
- pythonspark实例_spark+python快速入门实战小例子(PySpark)
- 幸运三角形 南阳acm491（dfs）
- docker-compose的介绍与安装（结合官方文档）
- python控制语句_Python流程控制语句
- 特斯拉再回应自燃事件：正在权威部门主导下进行调查 暂未有初步结论
- while (n-- ＞ 0) 的用法
- JSP页面报错：“Uncaught SyntaxError: Unexpected token ”
- 安卓java代码写控件_安卓自定义流程进度图控件实例代码
- NTP授时系统（GPS时钟产品-GPS授时产品）
- java题目汇总(一)
- 几何公差学习笔记（一）-- 公差要素的概念