前端百题斩【035】——一文了解HTTP缓存

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第35斩，希望朋友们关注公众号“执鸢者”，用知识武装自己的头脑。提前透露一下《前端百题斩（上）》pdf版下周就要出炉了，喜欢的小伙伴赶紧关注一波( ^_^ )

缓存是指代理服务器或客户端本地磁盘内保存的资源副本，利用缓存可减少对源服务器的访问，节省通信流量和通信时间。

浏览器缓存指的就是浏览器对之前请求过的文件进行缓存，以便在下一次访问时重复使用，从而节省带宽、提升访问速度、降低服务器压力。

今天所说的HTTP缓存机制就是利用HTTP响应头将所请求的资源在浏览器中进行缓存，缓存方式主要分为两种：强缓存、协商缓存。

3.1 强缓存

强缓存指的是在缓存时间内不会向服务器发起请求，只有过期之后才会向服务器发起请求，整个流程如下所示：

image-20210731172705021.png

HTTP中存在两个响应头来表征强缓存，分别是：Expires、Cache-Control，下面对这两个字段进行阐述。

3.1.1 Expires

Expires是HTTP1.0中的字段，是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。

3.1.2 Cache-Control

由于Expires存在服务器时间越客户端时间不一致的问题，所以HTTP1.1中新增了Cache-Control字段（注意：如果同时存在cache-control和expires时，浏览器总是优先使用cache-control），通过设置max-age来不存一个相对时间，表示其在该相对时间内容有效。对于Cache-Control字段的常见取值如下所示：

1. private：默认值，表示客户端可以缓存，中间代理、CDN等不能缓存此响应；

2. public：表示客户端和代理服务器都可缓存；

3. max-age=xxx：缓存的内容将在xxx秒后失效；

4. no-cache：需要使用协商缓存来验证缓存数据；

5. no-store：所有内容都不会缓存（包括协商缓存），每次都向服务器请求最新资源；

6. must-revalidate：在缓存过期前可以使用，过期后必须向服务器验证。

3.1.3 为什么增加Cache-Control字段？

Expires字段存在一个问题，即该字段利用的是绝对时间，由于服务器时间与客户端时间可能不一致，从而导致问题，所以新增了Cache-Control字段。

3.2 协商缓存

协商缓存都会向服务器发送请求，判断缓存数据是否过期，过期的话会返回新的内容，没有过期则使用本地的缓存数据。对于协商缓存主要利用两个字段：Last-Modify、Etag，其整体流程如下所示：

img

注：图片来源于（https://www.cnblogs.com/zhouwenhong/p/3928645.html）

3.2.1 Last-Modify

last-modified是HTTP1.0中的字段，是第一次请求资源时，服务器返回的字段，表示最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。

3.2.2 Etag

Etag是HTTP1.1中新增的字段，是资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

3.2.3 为什么增加Etag字段？

在Last-Modify字段存在情况下又新增Etag字段的理由主要有以下几点：

1. 一些文件进行更改后，其内容并没有发生变化，仅仅影响了修改时间，这时候不应该认为缓存过期了；

2. 某些文件修改太多频繁（秒级别以内），但是If-Modify-Since能检查的精度是秒级别，此时会导致问题；

3. 某些服务器并不能精确得到文件的最后修改时间。

1.如果觉得这篇文章还不错，来个分享、点赞、在看三连吧，让更多的人也看到～

2.关注公众号执鸢者，领取学习资料，定期为你推送原创深度好文

3. 提前透露一下《前端百题斩（上）》pdf版下周出炉，喜欢的小伙伴赶紧关注等待领取。

1. 前端百题斩[001]——typeof和instanceof

2. 前端百题斩【002】——js中6种变量声明方式

3. 前端百题斩【003-004】——从基本类型、引用类型到包装对象

4. 前端百题斩【005】—— js中9种遍历对象的方法

5. 前端百题斩【006】——js中三类字符串转数字的方式

6. 前端百题斩【007】——js中必须知道的四种数据类型判断方法

7. 前端百题斩【008-009】——从JavaScript的代码执行过程到函数执行过程

8. 前端百题斩【010】——通俗易懂的JavaScript执行上下文

9. 前端百题斩【011】——通俗易懂的变量对象

10. 前端百题斩【012】——js中作用域及作用域链的真面目

11. 前端百题斩【013】——用“闭包”问题征服面试官

12. 前端百题斩【014】——js中的这些“this”指向都值得了解

13. 前端百题斩【015】——快速手撕call、apply、bind

14. 前端百题斩【016】——原型、构造函数和实例之间的奇妙关系

15. 前端百题斩【017】——一基础、二主线、双机制理解原型链

16. 前端百题斩【018】——从验证点到手撕new操作符

17. 前端百题斩【019】——数组中方法原理早知道

18. 前端百题斩【020】——竟然有五种方式实现flat方法

19. 前端百题斩【021】——通俗易懂的防抖与节流

20. 前端百题斩【022】——开拓思路之三种方式实现字符串转驼峰

21. 前端百题斩【023】——赋值、浅拷贝、深拷贝大PK

22. 前端百题斩【024】——我从浏览器控制台看到了五种存储方式

23. 前端百题斩【025】——原来跨域也是可以进行分类的

24. 前端百题斩【026】——浏览器出让安全性造就JSONP

25. 前端百题斩【027】——解决跨域的常用利器CORS全解

26. 前端百题斩【028】——浏览器中的请求们

27. 前端百题斩【029】——原来浏览器中存在五类进程

28. 前端百题斩【030】——神奇的浏览器渲染流程

29. 前端百题斩【031】——从渲染流程认识重绘和回流

30. 前端百题斩【032】——两个角度一个实战了解事件循环

31. 前端百题斩【033-034】——网络七层模型及HTTP进化史