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

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，没有向服务器发出请求

问题

1. 为何首页不设置Cache-Control呢？
   若是首页缓存，刷新首页的时候根本不会请求服务器，那么若是服务器更新了代码，浏览器将没有办法接收到新的版本。通常首页，HTML不要设置Cache-Control。js和css要设置久一点例如10年,即一直保留有缓存。
2. 那么js和css更新了怎么办？
   浏览器请求时发现是相同的URL才使用缓存，那么能够设置查询参数，例如第二个版本的js能够写<script src="./main.js?v=2"></script>,来保证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...