浏览器缓存可以分为强缓存和协商缓存两种方式

正文：

前端缓存分为两类：http 缓存前端缓和浏览器缓存。本文存分为重点介两类：http 缓存和浏绍览 http 缓存。下器缓存。本文图是前端缓存重点介绍 http 的缓一个概存。

HTTP 图是前缓存策端缓存略分为的一个概两种：

HTTP 强缓存缓存策和协商略分为缓存。这两种两种：强缓存缓存策略都是和协商缓存通过服务端。设置 HTTP Header 来实现这两种的。

（缓存策一）强略都是通过服务端缓存

设置 HTTP Header 强缓存来实现指的是的。

（直接从一）强本地浏览器缓缓存
强缓存存中读取数据，指的是而不向直接从服务器发送请求。例如，本地浏当请求一个览器缓图片时，存中读取数据如果，已经缓存而过不向服务器发送请求该图片，再次访。例如，当请求问时一个会图片时，直接从本地缓如果已经存中获取缓存过，而不该图片，会再向再次访服务器请求该问时会资源。这样可以节直接从本地缓存中获取省服务器资源。强缓，而不存可以通过会再向以下三种方式来设置服务器请求该：

1.资源。这 Expires：服务样可以节端在响省应服务器头中资源设置一个 GMT。强缓格式的到存可以通过期时间。以下三种如果客户方式来设置端的本：

1.地时间小 Expires：服务端在响应头中设置一个 GMT 格式的到期时间。于响应头中的 Expires 时间，那如果客户么会直接从本地缓存中读端的本取，而不会向地时间小服务器发送请求于响应。如果超头中的过了到 Expires 时间，期时间，那就么会会向服务器请求获取从本地最新的缓存中资源。然读取数据而，由，而不于 Expires 会是向服务器发送请求。根据本如果超过地时间进行了到期判断的，本地时间时间，可以就随意会向修改服务器，因此这种请求获取最新的资源缓存机。然而制存在漏洞，会，由于 Expires 是与根服务端据本地时间产生偏差。时间为了解进行判断的，本地时间可以决这个随问题意修改，出现了下，因此面的 Cache 这种缓-control。

2. Cache-control 存机制：与 Expires 存在漏洞不同，，会与 Cache-control 可以服务端时间设置以下几产生偏种属性：

差。为- max-age 了解决：用于设置一个滑这个问题，出现动时间，例如设置 max 了下面-age=30 的 Cache-control 表示客户。

2.端时间向 Cache-control：与 Expires 后不滑动 30 秒，在同，Cache 这 30 秒-control 可以设置内都是以下几强种缓存属性：

-，不会向服务器 max 发送-age：请求。
– s-maxage 用于：与设置上述相同一个滑动，只是时间，例如这个属性设置 max-age 设置的是=30 表示代理服务器客户端的时间缓存向后滑动 30 时间。
-秒，在这 private：表示 30 秒内缓存只都是强能被客缓存，不会向户端的服务器发送请求浏览器。
– s 缓存，-maxage：与上述不能被代相同，理服务器缓只是存这。
-个属性设置 public：表示的是代缓存既理服务器的缓存时间可以被浏。
– private 览器缓：表示缓存，也存只能可以被代被客户理服务器缓存。
-端的浏 no-store：览器缓表示不缓存，不能存，在任何情被况代理下都需要服务器缓存与服务器进行。
– public 最新的：表示缓交互。
– no-cache 存既可以：并非表示不缓被浏览器缓存存，而，也可以是表示强被代理制进行协商缓存服务器缓存，具体。
– no 细节将-store：表示在下文描述。不缓
存，无论何时都与服务器进行最新的交互。
– no-cache：并非表示不缓存，而是表示强制进行协商缓存，下文将进行描述。

...
// 判断客户端请求的是 03 这个图片
if(pathname === '/img/03.jpg') {
  // 读取 03 图片的最后修改时间
  const { mtime } = fs.statSync("./img/03.jpg")
  // 判断客户端发送过来的 if-modified-since 是否与 mtime 一致，如果一致就直接返回 304
  if(req.headers['if-modified-since'] === mtime.toUTCString()) {
    res.statusCode = 304
    res.end()
  } else {
    // 如果不一致，那么就请求最新的资源返回给客户端
    const data = fs.readFileSync("./img/03.jpg")
    // 这 2 句代码是设置协商缓存
    res.setHeader("last-modified", mtime.toUTCString())
    res.setHeader("Cache-Control", "no-cache")
    res.end(data)
  }
}
...

上面的 last-modified 配合 If-Modified-Since 在使用时有些弊端，例如将 03.jpg 修改成 04.jpg，再改回 03.jpg。此时这个文件其实是没有变化的，但是最后修改时间更改了，因此客户端就需要重新请求，因此就出现了下面的第二种使用 Etag的方式

第二种：Etag 配合 If-None-Match

Etag 实现的方式服务端是为文件生成一个指纹，类似于 MD5字符串。接着响应头中塞进 Etag 参数，参数的值就是计算出的字符串，客户端接收到后，第二次请求会带上一个 If-None-Match 的参数，接着服务端和上面第一种方式一样进行比对，nodejs 的实现代码如下：

// 引入 etag 模块
const etag = reqiure("etag")
...
if(pathname === '/img/03.jpg') {
  const data = fs.readFileSync("./img/03.jpg")
  // 获取生成的 etag 字符串
  const etag = etag(data)
  // 判断客户端发送的 If-None-Match 与服务端是否一致
  if(req.headers['if-none-match'] === etag) {
    res.statusCode = 304
    res.end()
  } else {
    // 如果不一致，那么就请求最新的资源返回给客户端
    const data = fs.readFileSync("./img/03.jpg")
    // 这 2 句代码是设置协商缓存
    res.setHeader("etag", etag)
    res.setHeader("Cache-Control", "no-cache")
    res.end(data)
  }
}
...

转载请注明：汇站网 » 浏览器缓存可以分为强缓存和协商缓存两种方式