面试官：请说说你对 HTTP缓存 的理解？

面试官：请说说你对 HTTP缓存 的理解？

start

• 今天这篇文章来写一写 http 缓存，解决掉这个面试中经常出现的问题。
• 作者：lazyTomato
• 日期：2023/09/13

1. 前言

最近被问到 http缓存 ，看过相关内容，但并没有深入记忆，今天有学习了一遍，写点文章，加深一下记忆。

理解一下什么是 http缓存？
大白话理解：http缓存是发起请求的缓存。

需要注意：常见的 http缓存 只能缓存 get 请求响应的资源。

既然是缓存，那么第一次发起请求，是没有缓存的。只能在再次发起请求的时候，判断是否要使用缓存。

所以对于这个面试问题，其实本质上就是想问你：是否使用缓存，通过哪些属性去判断的呢？

这些属性主要是在 http 请求的header中。 （注意：请求头和响应头都会存在这些属性）

所以本文主要：学习这一些请求头，了解它们的属性值，以及它们的优先级

2. 缓存的分类

2.1 http缓存主要分为两种：

1. 强缓存

2. 协商缓存

2.2 强缓存

特点

• 不需要发送请求到服务端，直接读取浏览器本地缓存；
• 在 Chrome 的 Network 中显示的 HTTP 状态码是 200 ；
• 在 Chrome 中，强缓存又分为 Disk Cache (存放在硬盘中)和 Memory Cache (存放在内存中)，存放的位置是由浏览器控制的。
• 是否强缓存由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制。

个人理解：

1. 强缓存主要就依据header属性进行判断，由浏览器直接控制。如果命中，浏览器直接读取缓存，不需要请求服务器。
2. 返回状态码 200
3. 浏览器第一次加载完内容后，会按文件类型，对文件进行缓存。可以存放在磁盘，也可以存放在内存。
4. 主要由 Expires、Cache-Control 和 Pragma  三个请求头设定。

图例：

2.3 协商缓存

特点：

1. 当浏览器的强缓存失效的时候或者请求头中设置了不走强缓存，并且在请求头中设置了If-Modified-Since 或者 If-None-Match 的时候，会将这两个属性值到服务端去验证是否命中协商缓存；
2. 如果命中了协商缓存，会返回 304 状态，加载浏览器缓存；
3. 并且响应头会设置 Last-Modified 或者 ETag 属性；
4. 请求头会设置 If-Modified-Since 或者 If-None-Match

个人理解：

1. 强缓存没有命中，则会走协商缓存；
2. 协商缓存优先级低于强缓存；
3. 第一次加载内容时，服务器会在响应头中设置 Last-Modified 或者 ETag
4. 第二次加载时，如果没有命中强缓存，则会在请求头中设置 If-Modified-Since 或者 If-None-Match 。传递给后台服务器，由服务器去判断是否需要使用缓存
5. 不使用缓存，则返回200；使用缓存，则返回304；

图例：

3. 请求头有哪些？

3.1 强缓存

请求头属性	请求头属性值	说明	优先级
Pragma	no-cache	不使用强缓存，需要与服务器验证缓存是否新鲜	高
Cache-Control	max-age	单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效	中
	no-cache	不使用强缓存，需要与服务器验证缓存是否新鲜
	no-store	禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源
	private	专用于个人的缓存，中间代理、CDN 等不能缓存此响应
Expires	HTTP 日期	在浏览器发起请求时，会根据系统时间和 Expires 的值进行比较，如果系统时间超过了 Expires 的值，缓存失效。由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题。	低

3.2 协商缓存

响应头	请求头	属性值	说明	优先级
Last-Modified	If-Modified-Since	HTTP日期	代表文件的最后修改时间，第一次请求服务端会把资源的最后修改时间放到 Last-Modified 响应头中，第二次发起请求的时候，请求头会带上上一次响应头中的 Last-Modified 的时间，并放到 If-Modified-Since 请求头属性中，服务端根据文件最后一次修改时间和 If-Modified-Since 的值进行比较，如果相等，返回 304 ，并加载浏览器缓存。	高
ETag	If-None-Match	校验唯一值	ETag/If-None-Match 的值是一串 hash 码，代表的是一个资源的标识符，当服务端的文件变化的时候，它的 hash码会随之改变，通过请求头中的 If-None-Match 和当前文件的 hash 值进行比较，如果相等则表示命中协商缓存。	低

4. 相关文章

• 图解 HTTP 缓存–政采云
• Http缓存

end

缓存优先级：

• 强缓存>协商缓存；

• Pragma>Cache-Control>Expires;

• Last-Modified>ETag

小结：

1. 整体看下来，其实就五个参数。主要逻辑都是根据时间去做判断，又或者直接禁用了强缓存，又或者禁用缓存等；

2. 强缓存由浏览器自行判断；

3. 协商缓存，需要和服务器确认，所以会将认证信息又发送给服务器，由服务器决定是否使用缓存；

4. 强缓存的缓存内容，可以存在内存或磁盘中；（所以见到这样的英文不要感觉慌张了）