HTTP缓存（Cache-Control、Expires 、ETag）

HTTP缓存

HTTP缓存（ ETag、Cache-Control）——谷歌开发者
HTTP缓存有利于web性能优化

Cache-Control

例子

假设我们首页有一个请求,请求js文件

如何让CSS和JS请求速度加快?

此时打开首页

发现这个文件大小为279KB，使用时间为382ms

如果再次刷新首页，那么这个文件还会被再次请求一次。那么如何重复利用之前获取的资源而不用反复请求呢？答案是HTTP缓存，这是性能优化的一个重要方面。

接下来在响应里设置响应头
Cache-Control: max-age=30
刷新两次首页

第二次的时间为0
响应头中的Cache-Control: max-age=30表示客户端将这个缓存最多 保存30 秒，30秒后再次请求文件将会再次下载。

即：
设置这个响应头之后，浏览器请求时发现是相同的URL，浏览器直接从内存里返回已经缓存的main.js，没有向服务器发出请求

问题

1. 为什么首页不设置Cache-Control呢？
   如果首页缓存，刷新首页的时候根本不会请求服务器，那么如果服务器更新了代码，浏览器将没有办法接收到新的版本。一般首页，HTML不要设置Cache-Control。js和css要设置久一点例如10年,即一直保留有缓存。
2. 那么js和css更新了怎么办？
   浏览器请求时发现是相同的URL才使用缓存，那么可以设置查询参数，例如第二个版本的js可以写,来保证URL的不同，重新获取新的js文件。这样即可以缓存很久，又可以随时更新

   例如知乎的网页里的请求：

总结

通过网络获取内容既速度缓慢又开销巨大。较大的响应需要在客户端与服务器之间进行多次往返通信，这会延迟浏览器获得和处理内容的时间，还会增加访问者的流量费用。因此，缓存并重复利用之前获取的资源的能力成为性能优化的一个关键方面。

好在每个浏览器都自带了 HTTP 缓存实现功能。您只需要确保每个服务器响应都提供正确的 HTTP
标头指令，以指示浏览器何时可以缓存响应以及可以缓存多久。

Expires

1. Expires 是以前用来控制缓存的http头，Cache-Control是新版的API。
2. 现在首选 Cache-Control。
3. 如果在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。
4. 响应头设置方式：
   Expires: Wed, 21 Oct 2015 07:28:00 GMT
5. Expires 响应头包含日期/时间， 即在此时候之后，响应过期。

注意： 因为过期标准的时间用的是本地时间，所以不靠谱，所以要游侠使用Cache-Control代替Expires

区别

1. Cache-Control设置时间长度
2. 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...