共计 2588 个字符，预计需要花费 7 分钟才能阅读完成。
最近我在做前端面试题总结系列，感兴趣的敌人能够增加关注，欢送斧正、交换。
争取每个知识点可能多总结一些，至多要做到在面试时，针对每个知识点都能够侃起来，不至于哑火。
前言
通过上一篇的总结，咱们晓得 HTTP 缓存分为两种：
- 强缓存
- 协商缓存
明天咱们就先来理解一下强缓存相干的内容。
强缓存
特点
强缓存中，当申请再次收回时，浏览器会判断指标资源是否“命中”强缓存，如果命中则间接从缓存中获取资源，不会再与服务端产生通信。
在 Chrome 中，命中强缓存的状况下，Network 中显示的 HTTP 状态码是 200，比方：
规定
强制缓存的申请后果有两种状况：
- 命中缓存
- 未命中缓存
命中缓存
未命中缓存
分类
在 Chrome 中，强缓存又分为：
Disk Cache
缓存资源在硬盘中，浏览器（或页面标签）敞开后硬盘中的缓存不会隐没，下次进入页面还能从硬盘中获取。
Memory Cache
缓存资源在内存中，浏览器（或页面标签）敞开后内存中的缓存就会被开释，从新关上页面取不到该缓存。
缓存寄存的地位是由浏览器管制的。
如果不想从强缓存中获取资源，Windows 电脑能够通过
Ctrl + F5刷新页面，Mac OS 能够通过Shift + Command + R刷新页面，刷新后你能够看到资源不会呈现 from disk(or memory) cache 了。
属性
是否强缓存由以下 3 个 Header 属性独特来管制：
- Expires
- Cache-Control
- Pragma
Expires
Expires 的值是一个 HTTP 日期，当服务器返回响应时，在 Response Headers 中将过期工夫写入 Expires 字段。
在浏览器发动申请时，会依据零碎工夫和 Expires 的值进行比拟，如果零碎工夫超过了 Expires 的值，缓存生效，会持续从服务器获取资源，比方：
Expires 的值是一个相对工夫，能够看到上图中的工夫点：2021 年 8 月 15 日 07:16:53，这代表：这个资源在这个工夫点之前都能够间接从缓存中获取。
然而，应用 Expires 会存在一个问题：因为 Expires 的工夫戳是 服务器定义 的，而本地工夫的取值来自客户端，因而 Expires 的工作机制对于客户端工夫和服务器工夫的一致性要求极高，如果两者的工夫存在时差，会带来意料之外的后果。
Expires 的优先级在三个 Header 属性中是最低的。
Expires 字段是 HTTP 1.0 时代的产物，当初的浏览器用的全都是 HTTP 1.1 了，所以这个字段的作用根本能够疏忽。
Cache-Control
是 HTTP 1.1 中新增的属性，为了补救 Expires 缺点提出的，提供了更准确粗疏的缓存性能。Cache-Control 在申请头和响应头中都能够应用：
申请头 Cache-Control 字段列表：
- Cache-Control: max-age=<seconds>
- Cache-Control: max-stale[=<seconds>]
- Cache-Control: min-fresh=<seconds>
- Cache-control: no-cache
- Cache-control: no-store
- Cache-control: no-transform
- Cache-control: only-if-cached
响应头 Cache-Control 字段列表：
- Cache-control: must-revalidate
- Cache-control: no-cache
- Cache-control: no-store
- Cache-control: no-transform
- Cache-control: public
- Cache-control: private
- Cache-control: proxy-revalidate
- Cache-control: max-age=<seconds>
- Cache-control: s-maxage=<seconds>
Cache-Control 常见字段的含意：
- public
表明响应能够被任何对象（包含：发送申请的客户端，CDN 等代理服务器，等等）缓存，即便是通常不可缓存的内容（例如，该响应没有 max-age 指令或 Expires 音讯头）。 - private
表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）, 公有缓存能够缓存响应内容。 - no-cache
能够在本地进行缓存，但每次发申请时，都要向服务器进行验证，如果服务器容许，能力应用本地缓存（即：须要协商缓存）。 - no-store
禁止缓存客户端申请或服务器响应的内容，每次都须从新申请服务器拿内容。 - max-age
设置缓存存储的最大周期，超过这个工夫缓存被视为过期 (单位：秒)。 must-revalidate
在缓存过期前能够应用，过期后必须向服务器验证。
图中 Cache-Control 仅指定了 Max-age，所以默认为 private，缓存工夫为 31536000 秒（365 天），也就是说，在 365 天内再次申请这条数据，都会间接获取缓存数据库中的数据，间接应用。
在 HTTP 1.1 规范试图将缓存相干配置收敛进 Cache-Control 这样的大背景下，Max-age 能够视作是对 Expires 能力的补位 / 替换。在当下的前端实际里，咱们广泛会偏向于应用 Max-age。但如果你的利用对向下兼容有强诉求，那么 Expires 依然是不可短少的。
Pragma
Pragma 只有一个属性值，就是 no-cache，成果和 Cache-Control 中的 no-cache 统一，不应用强缓存，须要与服务器验证缓存是否陈腐，在 3 个头部属性中的优先级最高。
总结
- Expires 和 Pragma 是 HTTP 1.0 的产物，Cache-Control 是 HTTP 1.1 的产物。
- 当 Expires 和 Cache-Control 同时存在时，只有 Cache-Control 失效。
- 在某些不反对 HTTP 1.1 的环境下，Expires 就会施展用途，现阶段它的存在只是为了兼容性
- 大文件，优先缓存至 Disk，小文件优先缓存至 Memory
- 当内存占用率高的状况下，优先缓存至 Disk
~
~ 本文完，感激浏览！
~
学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！
大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！
你来，怀揣冀望，我有墨香相迎！你归，无论得失，唯以余韵相赠！
常识与技能并重，内力和外功兼修，实践和实际两手都要抓、两手都要硬！
