浏览器缓存机制-强缓存/协商缓存

xnia2020

于 2024-06-04 16:17:33 发布

阅读量654

点赞数 9

文章标签：缓存

本文链接：https://blog.csdn.net/m0_46639734/article/details/139443966

版权

浏览器的缓存机制是通过使用HTTP缓存来存储资源，以减少加载时间和网络流量。浏览器缓存主要分为强缓存和协商缓存两种方式。

强缓存

强缓存通过设置`Cache-Control`和`Expires`响应头来控制缓存，浏览器在缓存有效期内直接使用缓存，不发起请求。

强缓存通过设置`Cache-Control`和`Expires`响应头来控制缓存。具体实现如下：

1. 使用`Cache-Control`响应头来指定缓存策略，可以设置的值包括：

`public`：表示响应可以被任何缓存保存，包括浏览器和CDN。
`private`：表示响应只能被浏览器缓存，不允许CDN缓存。
`no-cache`：指令告诉浏览器在每次请求时都必须与服务器进行验证，即使资源在缓存中也是如此。
no-store指令则告诉浏览器不要存储资源的任何副本。
`max-age=<seconds>`：表示资源在缓存中的最大有效时间，单位为秒。

2. 使用`Expires`响应头来设置资源的过期时间，是一个具体的日期时间，告诉浏览器在该时间之前可以直接从缓存中获取资源。

这样设置后，浏览器在接收到这些响应头后，会根据缓存策略来判断是否直接从缓存中获取资源，从而实现强缓存控制。

协商缓存

协商缓存通过设置`Last-Modified`和`ETag`响应头来控制缓存，浏览器在缓存失效时发起请求，服务器根据请求头中的`If-Modified-Since`和`If-None-Match`来判断是否使用缓存。

// 强缓存示例
app.get('/example', (req, res) => {
    res.setHeader('Cache-Control', 'max-age=3600'); // 设置缓存有效期为1小时
    res.send('Hello, World!');
});

// 协商缓存示例
app.get('/example', (req, res) => {
    const lastModified = new Date(); // 设置最后修改时间
    res.setHeader('Last-Modified', lastModified.toUTCString());

    const etag = '123456'; // 设置ETag
    res.setHeader('ETag', etag);

    if (req.headers['if-modified-since'] === lastModified.toUTCString() || req.headers['if-none-match'] === etag) {
        res.status(304).send(); // 返回304表示使用缓存
    } else {
        res.send('Hello, World!');
    }
});

这些 <meta> 标签在HTML中用于控制浏览器如何缓存页面内容。具体来说，它们与HTTP响应头中的等效字段具有相似的功能，但直接在HTML文档中指定。

<meta http-equiv="expires" content="0">

这个标签告诉浏览器页面内容应该立即过期，而不是被缓存并在后续的请求中重新使用。"0" 通常指的是Unix时间戳中的零值，它实际上表示1970年1月1日 00:00:00 UTC，但在这种情况下，它通常被解释为“立即过期”。

2. <meta http-equiv="Pragma" content="no-cache">

Pragma 是一个HTTP/1.0的响应头字段，它通常与 no-cache 值一起使用，以指示浏览器不要缓存页面内容。然而，值得注意的是，Pragma 主要是为了向后兼容HTTP/1.0而存在的，并且在HTTP/1.1及更高版本中，通常推荐使用 Cache-Control 字段。

3. <meta http-equiv="Cache-control" content="no-cache">

这个标签使用 Cache-Control 字段，它是HTTP/1.1中用于控制缓存行为的更强大和灵活的方法。no-cache 指令告诉浏览器在每次请求时都必须重新验证页面内容，而不是简单地使用缓存的版本。

综上所述，这些 <meta> 标签共同确保了浏览器不会缓存页面内容，而是在每次访问时都从服务器获取最新版本。这在需要确保用户始终看到最新内容（例如，在线银行或实时新闻网站）的情况下非常有用。然而，请注意，这些标签只是HTML文档中的建议，并不总是能保证浏览器一定会遵循它们。真正的缓存控制通常还是在服务器端通过HTTP响应头来实现的。

浏览器缓存到底是后端来设置还是前端来设置？

浏览器缓存确实是通过服务器端返回的HTTP响应头来进行判断的。然而，在HTML文档中使用<meta>标签设置类似Cache-Control的字段，其实是一种建议或指令，告诉浏览器应该如何处理页面的缓存。但是，这些<meta>标签设置的缓存指令并不是HTTP协议规范的一部分，而是HTML规范的一部分，并且它们的效果取决于浏览器是否遵循这些建议。

实际上，浏览器缓存的控制主要由服务器端来设置，通过HTTP响应头中的Cache-Control、Expires、ETag等字段来指示浏览器如何缓存资源。这些HTTP响应头字段定义了缓存策略，如缓存时长、是否允许缓存、缓存验证机制等。

前端HTML文档中的<meta>标签，虽然可以设置类似Cache-Control的字段，但通常不被视为决定性的缓存控制手段。这些<meta>标签主要用于向浏览器提供关于页面缓存的额外信息或建议，但浏览器是否遵循这些建议则取决于其实现和配置。

因此，对于关键性的缓存控制，最佳的做法是在服务器端设置正确的HTTP响应头。这样可以确保缓存策略的一致性和可靠性，并且可以覆盖前端HTML文档中可能存在的任何缓存控制建议。

总结来说，浏览器缓存主要由服务器端来设置，通过HTTP响应头中的相关字段来控制。前端HTML文档中的<meta>标签可以设置缓存建议，但通常不被视为决定性的缓存控制手段。

以下是关于协商缓存的详细解释：

协商缓存的工作流程

首次请求资源：
- 当浏览器首次请求某个资源时，服务器会返回该资源以及相应的HTTP响应头。
- 响应头中可能包含两个与协商缓存相关的字段：Last-Modified和ETag。
再次请求资源：
- 当浏览器再次请求该资源时，浏览器会发送一个带有特定请求头的请求到服务器。
- 对于Last-Modified，浏览器会发送一个If-Modified-Since头，其值为之前服务器返回的Last-Modified值。
- 对于ETag，浏览器会发送一个If-None-Match头，其值为之前服务器返回的ETag值。
服务器验证资源：
- 服务器收到请求后，会检查请求头中的If-Modified-Since和If-None-Match字段。
- 服务器会比较这些字段的值与资源在服务器上的最后修改时间和当前ETag值。
响应结果：
- 协商缓存有效：如果资源在服务器上没有变化（即最后修改时间未变或ETag值相同），服务器会返回一个304 Not Modified的响应，浏览器会直接从缓存中加载资源。
- 协商缓存无效：如果资源在服务器上已经发生变化，服务器会返回200 OK的响应，并包含最新的资源数据。

协商缓存的字段解释

Last-Modified：表示资源在服务器上的最后修改时间。浏览器会发送一个If-Modified-Since头，其值为该时间，以检查资源是否已更改。
ETag：是一个唯一标识资源的字符串，通常基于资源的内容计算得出。浏览器会发送一个If-None-Match头，其值为该ETag，以检查资源是否已更改。