共计 1825 个字符，预计需要花费 5 分钟才能阅读完成。
HTTP 缓存
HTTP 缓存（ETag、Cache-Control）——谷歌开发者 HTTP 缓存有利于 web 性能优化
Cache-Control
例子
假设我们首页有一个请求, 请求 js 文件 <script src=”./main.js”></script> 如何让 CSS 和 JS 请求速度加快?
此时打开首页发现这个文件大小为 279KB，使用时间为 382ms
如果再次刷新首页，那么这个文件还会被再次请求一次。那么如何重复利用之前获取的资源而不用反复请求呢？答案是 HTTP 缓存，这是性能优化的一个重要方面。
接下来在响应里设置响应头 Cache-Control: max-age=30 刷新两次首页
第二次的时间为 0 响应头中的 Cache-Control: max-age=30 表示客户端将这个缓存最多 保存 30 秒，30 秒后再次请求文件将会再次下载。
即：设置这个响应头之后，浏览器请求时发现是相同的 URL，浏览器直接从内存里返回已经缓存的 main.js，没有向服务器发出请求
问题
为什么首页不设置 Cache-Control 呢？如果首页缓存，刷新首页的时候根本不会请求服务器，那么如果服务器更新了代码，浏览器将没有办法接收到新的版本。一般首页，HTML 不要设置 Cache-Control。js 和 css 要设置久一点例如 10 年, 即一直保留有缓存。
那么 js 和 css 更新了怎么办？浏览器请求时发现是相同的 URL 才使用缓存，那么可以设置查询参数，例如第二个版本的 js 可以写 <script src=”./main.js?v=2″></script>, 来保证 URL 的不同，重新获取新的 js 文件。这样即可以缓存很久，又可以随时更新
例如知乎的网页里的请求：
总结
通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。好在每个浏览器都自带了 HTTP 缓存实现功能。您只需要确保每个服务器响应都提供正确的 HTTP 标头指令，以指示浏览器何时可以缓存响应以及可以缓存多久。
Expires
Expires 是以前用来控制缓存的 http 头，Cache-Control 是新版的 API。
现在首选 Cache-Control。
如果在 Cache-Control 响应头设置了 “max-age” 或者 “s-max-age” 指令，那么 Expires 头会被忽略。
响应头设置方式：Expires: Wed, 21 Oct 2015 07:28:00 GMT
Expires 响应头包含日期 / 时间，即在此时候之后，响应过期。
注意：因为过期标准的时间用的是本地时间，所以不靠谱，所以要游侠使用 Cache-Control 代替 Expires
区别
Cache-Control 设置时间长度
Expires 设置时间点
详细：Expires – HTTP | MDN
MD5
MD5 是消息摘要算法。用于确保信息传输完整一致。
具体作用这样
接受一个 String 或 Buffer，返回一个固定的 String 如果接受的 String 改变，那么返回的 String 也会改变例如将 1.txt 中的其中一个 1 改为 0，那么返回值如下可见返回至完全改变了这个特性可以用来判断两次信息传输是否完整一致
ETag
例子：
例如我们请求一个 js 文件。设置一个 ETag 响应头设置的 ETage 响应头为这个 JS 文件的 MD5 值查看响应：
那么：下一次请求这个 JS 的时候，浏览器会把上一次响应的那个 ETage 的值放到 If-None-Match 里面，如图：这样做的作用是：如果请求和响应的 MD5 一样，说明不需要重新下载这个 js 文件。这时我们修改代码：
如果 MD5 一样，说明文件没改过，那么返回 304
304 Not Modified：HTTP 304 未改变说明无需再次传输请求的内容，也就是说可以使用缓存的内容。
HTTP 304 没有响应体，因为不需要下载响应内容，直接用缓存就行了
ETag 与 Cache-Control 的区别
假设我们请求两个文件，CSS 文件使用 Cache-Control 缓存，js 文件使用 ETag。代码如下：
两个请求区别：
所以：
由于 CSS 的请求是用缓存（Cache-Control）的，所以直接不发请求
而 js 用的 ETag，有请求也有响应，只不过如果 MD5 一样，那么就不下载响应体
我的博客即将同步至腾讯云 + 社区，邀请大家一同入驻：https://cloud.tencent.com/dev…
