前言
作为Web性能优化的重要手段，Http缓存机制应该是从事Web开发的学生知识系统库的基础部分，对于有兴趣成为前端架构师的学生来说，它是必不可少的知识和技能。
但是对于许多前端学生来说，只知道浏览器会缓存所请求的静态文件，但为什么要缓存，缓存如何工作，但目前还不是很清楚。
在这里，我将尝试使用简单明了的文本，比如引入HTTP缓存机制，我希望您可以帮助您正确理解前端缓存。
在介绍HTTP缓存之前，作为知识的基础，让我们简要介绍一下HTTP数据包。
HTTP消息是当浏览器与服务器通信时发送和响应的数据块。
浏览器从服务器请求数据并发送请求消息；服务器将数据返回给浏览器并返回响应消息。
消息信息主要分为两部分。
包含属性的标头：附加信息（cookie，缓存信息等）和缓存相关规则信息包含在标头中。
包含数据的主体：您真正想要传输的HTTP请求的一部分。
缓存规则解析
为方便大家，我们认为浏览器有一个用于存储缓存信息的缓存数据库。
当客户端第一次请求数据时，此时缓存数据库中没有相应的缓存数据，需要请求服务器。服务器返回后，数据存储在缓存数据库中。
HTTP缓存有各种规则。根据您是否需要向服务器重新提交请求，我将它们分为两类（强制缓存，对比缓存）。在我们详细介绍这两个规则之前，我们首先使用时序图。让每个人都对这两条规则有一个简单的了解。
当已经缓存数据时，它仅基于强制缓存。请求数据的过程如下：
当已经缓存的数据时，仅基于比较缓存，请求数据的过程如下：
对缓存机制了解不多的学生可能会根据比较缓存过程询问是否使用缓存，需要向服务器发送请求，那么什么是缓存？
这个问题，让我们暂时把它放下来，当我们详细介绍每个缓存规则时，会给你答案。我们可以看到两种类型的缓存规则之间的区别。如果强制执行缓存生效，则无需与服务器交互，并且比较缓存需要与服务器交互，无论它是否有效。
两种类型的缓存规则可以同时存在。强制缓存优先级高于比较缓存。也就是说，当执行强制缓存规则时，如果缓存有效，则直接使用缓存，并且不执行比较缓存规则。
强制缓存
从上面我们知道强制缓存，在缓存数据未到期的情况下，您可以直接使用缓存数据，那么浏览器如何确定缓存数据是否无效？
我们知道当浏览器不缓存数据时，当浏览器从服务器请求数据时，服务器将返回数据和缓存规则，缓存规则信息包含在响应头中。
对于强制缓存，响应头中有两个字段用于指示失效规则（Expires/Cache-Control）
使用chrome的开发人员工具，您可以在强制缓存生效时清楚地看到网络请求的情况：
过期
Expires的值是服务器返回的到期时间。也就是说，当进行下一个请求时，请求时间小于服务器返回的到期时间，并且直接使用高速缓存的数据。
但是，Expires是HTTP 1.0的东西。现在，默认浏览器默认使用HTTP 1.1，因此基本上忽略了它的角色。
另一个问题是到期时间是由服务器生成的，但是客户端时间可能与服务器时间不准确，这将导致缓存命中中的错误。
所以HTTP 1.1版本被Cache-Control取代。
缓存控制
缓存控制是最重要的规则。常见值包括private，public，no-cache，max-age和no-store。默认为私有。
私有:客户端可以缓存
公共:客户端和代理服务器都可以缓存（前端同学可以认为公共和私有都是一样的）
Max-age=xxx:缓存的内容将在xxx秒后过期
无缓存:需要使用比较缓存来验证缓存数据（稍后描述）
无存储:所有内容都不会被缓存，强制缓存，比较缓存不会触发（对于前端开发，缓存越多越好，所以.基本上用它说886）
给栗子
在图中，Cache-Control仅指定max-age，因此默认为private，缓存时间为31536000秒（365天）。也就是说，如果您在365天内再次请求此数据，您将直接获取缓存数据库中的数据。使用。对比缓存
顾名思义，对比度缓存需要进行比较以确定是否可以使用缓存。
当浏览器首次请求数据时，服务器将缓存ID和数据一起返回给客户端，客户端将两者备份到缓存数据库。
当再次请求数据时，客户端将备份的缓存标识符发送到服务器。服务器根据缓存标识符进行判断。在判断成功之后，返回304状态代码以通知客户端比较成功，并且可以使用高速缓存的数据。
首次访问：
再次访问：
通过比较这两个数字，我们可以清楚地看到，当比较缓冲区生效时，状态代码为304，并且消息大小和请求时间大大减少。
原因是在服务器比较标识符之后，它只返回标题部分，并通过状态代码通知客户端使用缓存，不再需要将消息的主体返回给客户端。
对于比较缓存，我们需要了解缓存标识符的传递。它在请求标头和响应标头之间传递。它分为两种类型的标识符。接下来，我们将分别介绍它们。
Last-Modified/If-Modified-Since
最后修改：
服务器在响应请求时告诉浏览器资源的最后修改时间。
如果-Modified-Since的：
再次请求服务器时，此字段用于通知服务器服务器上次请求时返回的资源的上次修改时间。
在接收到请求之后，服务器发现将标头If-Modified-Since与所请求资源的最后修改时间进行比较。
如果资源的最后修改时间大于If-Modified-Since，表示资源已被更改，则返回整个资源的内容，并返回状态代码200；
如果资源的最后修改时间小于或等于If-Modified-Since，表明资源没有新修改，则通知HTTP 304通知浏览器继续使用保存的高速缓存。
Etag/If-None-Match
优先级高于Last-Modified/If-Modified-Since
ETAG：
当服务器响应请求时，它告诉浏览器当前资源由服务器唯一标识（生成规则由服务器确定）。
如果 - 无 - 匹配：
该字段用于在再次请求服务器时向服务器客户端通知段缓存数据的唯一标识符。
收到请求后，服务器发现标头If-None-Match与请求资源的唯一标识符进行比较：
不同，表示资源已被更改，响应资源的整个内容，返回状态码200；
同样，表明资源没有新的修改，响应HTTP 304，告诉浏览器继续使用保存的缓存。

• 上一篇: 蓝盟IT外包，元宇宙：四梁八柱是什么
  下一篇: 打印机在Windows 10中显示为未指定的设备

• 分享到：