前端http缓存知识点整理

大家好。最近学习了关于前端缓存的内容，这篇文章是对于所学知识进行一个整理同时分享给大家，欢迎大家相互交流、讨论。

HTTP缓存

http缓存分为强制缓存和协商缓存。

强制缓存

这里主要介绍Cache-Control和Expires字段。

Cache-Control

Cache-Control的优先级比Expire的优先级高，在缓存时间结束后，Expires才会开始生效。

以下是Cache-Control的主要取值

Expires

Expires是给返回的请求结果缓存设置一个到期时间，
例如：==“Tue, 21 Sep 2021 06:37:07 GMT”==这种格式。

在到期时间之前，可以直接从缓存中请求资源，伴随的缺点就是如果设置的到期时间过长，可能无法及时同步服务器已经更新的数据。

协商缓存

协商缓存是在强制缓存失效后，浏览器携带标识符向服务器发送请求，服务器再根据标识符决定是否使用缓存。

协商缓存优先级 < 强制缓存；

协商缓存生效——>返回304，使用缓存；

协商缓存失效——>返回200，向服务器重新发起请求。

Last-Modified/If-Modified-Since

Last-Modified：返回的资源内容在服务器最后修改时间。

If-Modified-Since：当二次请求资源时，会在请求头设置If-Modified-Since（其值等于上一次服务器返回的Last-Modified）。服务器通过If-Modified-Since的字段值与资源最后被修改时间Last-Modified相对比：

如果时间对比结果相同，则无更新内容，返回304使用缓存；

如果不相同，时间大于最后修改时间，返回200并向服务器重新发起请求。

Etag/If-None-Match

Etag：是资源唯一哈希值

If-None-Match： 在二次请求资源时，将上一次服务器返回的Etag值放到request header中的If-None-Match，与Etag进行对比：

	如果对比结果一致，则无更新内容，返回304；
	如果对比结果不同，则返回200，重新向服务器发起请求。

分级缓存策略

当二次请求资源时，分级缓存策略是十分稳妥的，能保证在拉取最新资源内容的情况下，不重复向服务器请求。

过程如下：

	  强制缓存max-age/s-maxage是否过期？
			 	| 			|
			 	|			|否
			 	|是	        ↓
			 	|		 使用缓存
			 	↓
Etag/If-None-Match；Last-Modified/If-Modified-Since对比是否相等？
				|			|
				|			|是
				|否			↓
				|		 使用缓存
			    ↓
		向服务器重新发起请求

知识点整合图

感谢大家的阅读，喜欢这篇文章的可以点关注+收藏！~