浏览器缓存机制

一个，什么是缓存？

缓存可以减少浏览器对资源的请求数量. 当第一个请求的资源完成时，一些静态资源将根据相应的缓存机制存储在本地磁盘中，以便下次浏览器请求资源时，浏览器直接在本地缓存中读取文件，而无需再次发送请求. 这样可以减少网络延迟，加快页面响应速度并增强用户体验. 减少网络带宽消耗；并减轻服务器压力.

（本文内容围绕此思维导图开发）

第二，浏览器缓存的标识符是什么？

以Chrome为例，打开开发人员工具，点击“网络”标签，然后全选. 在此处，将显示我们请求的所有静态资源的加载状态.

这种请求的大小不为0表示不使用缓存. 内存缓存和磁盘缓存的大小意味着浏览器不向服务器发送请求，而是直接读取本地缓存的资源文件.

三，什么是内存缓存？什么是磁盘缓存？两者有什么区别？

1，内存缓存

内存缓存是一种特殊的缓存，不受max-age，no-cache和其他配置的影响. 即使我们没有设置缓存，如果当前的内存空间足够，某些资源仍将被缓存. . 但是这种缓存是暂时的. 关闭浏览器后，将释放用于缓存的这部分存储空间. 如果您确实不想使用缓存，则可以设置无存储，这样即使是内存缓存也不会生效.

尽管内存缓存效率更高，但是它仍然受到计算机内存大小的限制，因此我们可以使用的内存并不多. 此时，需要硬盘来存储大量缓存.

2，磁盘缓存

磁盘缓存是存储在硬盘中的缓存. 与内存缓存相比，优点是长期的.

它将根据HTTP标头中设置的字段类型来确定是否需要再次请求资源.

如果当前内存使用率很高，则请求的资源很可能会缓存在磁盘缓存中.

四个缓存过程分析

浏览器第一次请求资源后，它将获得请求的结果和缓存标识符. 接下来，浏览器将根据第一个请求返回的响应标头确定缓存处理方法，即强缓存和协商缓存.

强大的缓存

没有请求发送到服务器，并且资源直接从缓存中读取. 可以通过设置两个HTTP标头来实现强大的缓存: Expires和Cache-Control.

在这里，我们仅强调Cache-Control. Expires已经是一种较旧的处理方法，并且具有某些限制. 在企业中设置缓存策略时，只需直接使用Cache-Control.

缓存控制

当Cache-Control: max-age = 300时，这意味着如果在此请求的正确返回时间（也将由浏览器记录）的5分钟内再次加载资源，它将导致缓存.

可以在请求标头或响应标头中设置Cache-Control，并且可以将其组合使用.

no-cache: 客户端缓存内容. 是否使用缓存，您需要协商缓存以验证该决定. 这意味着Cache-Control的缓存控制方法不用于预验证，而Etag或Last-Modified字段用于控制缓存. 这个名字有点含糊. 这并不意味着浏览器无法缓存，而是在浏览器使用缓存的数据时，需要确认资源文件是否仍与服务器一致.

不存储: 将不缓存所有内容，即不使用强制性缓存或协商性缓存（内存缓存也将无效）

max-age: max-age = xxx表示缓存的内容将在xxx秒后过期

通常，我们将Cache-Control的值设置为“ public，max-age = xxx”，这意味着将在xxx秒内再次访问该资源，并且将使用本地缓存来代替请求服务器

强大的缓存基于特定的时间或特定的时间段，因此它不会响应服务器端资源文件中的更改. 更改资源文件后，强缓存的文件将不会在时间范围内更改，因此这将导致服务器和浏览器之间的文件不一致. 如何解决这个问题呢？此时，我们需要使用协商缓存.

协商缓存

协商缓存是一个过程，在该过程中，浏览器会携带缓存标识符，以在迫使缓存过期后向服务​​器发起请求，然后服务器根据缓存标识符确定是否使用缓存.

可以通过设置两个HTTP标头（Last-Modified或ETag）来实现协商缓存.

Last-Modified是资源文件的最后修改时间. 服务器将在响应头中将其返回. 当浏览器下次发送请求时，将其放在“请求标题”中的“ If-Modified-Since”中. 服务器还将对它进行比较，如果相同，它将进入协商缓存.

Etag是服务器响应请求时当前资源文件的唯一标识符. 只要资源更改，Etag就会重新生成. 下次浏览器加载资源并将请求发送到服务器时，它将把上次返回的Etag值放在“请求”标头的If-None-Match中. 服务器仅需要将来自客户端的If-None-Match与自己的服务器进行比较. 如果资源的ETag相同，则可以判断资源是否相对于客户端已修改.

从上图可以看到，Last-Modified返回的最小时间单位是秒. 因此，服务器资源和本地资源之间可能存在不一致. 如果请求的时间在资源更改的1 s之内，则使用ETag唯一标识符，因此可以很好地解决此问题.

五，浏览器缓存最佳实践经常更改资源

缓存控制: 无缓存

对于频繁更改的资源，您首先需要使用Cache-Control: no-cache使浏览器每次都请求服务器，然后使用ETag或Last-Modified验证资源是否有效. 尽管这种方法无法保存请求数，但可以大大减少响应数据的大小.

不经常更改的资源

缓存控制: max-age = 31536000

通常，在处理此类资源时，将其Cache-Control配置为具有较大的max-age = 31536000（一年），以便浏览器在以后请求相同的URL时将访问强大的缓存. 为了解决更新问题，有必要在文件名中添加哈希，然后更改哈希以达到更改请求路径的目的.

不要为HTML文件设置强大的缓存. 当前，在大多数情况下，开发页面是单页应用程序. 一旦无法成功更新html，将是灾难性的技术故障，因此应将html的Cache-Control设置为no -cache，将每个请求与服务器上的文件进行比较.

可以为长期强大的缓存设置诸如CSS，JS，图像等资源. 更改文件时，请与哈希值配合使用，以便在更改文件后，浏览器将直接请求新资源. 如果文件没有更改，它将直接使用本地缓存，而不是请求浏览器.

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-305616-1.html