前端缓存【http缓存 | 浏览器缓存】

一、前端缓存分类【http缓存|浏览器缓存】

1、http缓存分类：强缓存  协商缓存

 

　　  都是服务端设置 HTTP Header 来实现的

（1）强缓存

• 不需要发送请求到服务端，直接读取浏览器本地缓存
• //
• 在 Chrome 的 Network 中显示的 HTTP 状态码是 200
• 在 Chrome 中，强缓存又分为 Disk Cache（存放在硬盘中）和 Memory Cache（存放在内存中），存放的位置是由浏览器控制的。
• //
• 是否强缓存：由 Expires、Cache-Control 和 Pragma 3 个 Header 属性共同来控制
  • Expires(优先级最低)
    • 服务端在响应头中设置一个 GMT 格式的到期时间，值为HTTP日期
    • 若系统时间小于响应头的Expires时间，会从本地读取，不会去请求服务器；超过了，就去请求服务区获取最新资源
    • 由于和系统时间进行比较，所以当系统时间和服务器时间不一致的时候，会有缓存有效期不准的问题==》出现了Cache-Contorl
  • Cache-Control (在请求头和响应头中都可以使用)

    • max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效

    • no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜

    • no-store：禁止使用缓存（包括协商缓存），每次都向服务器请求最新的资源

    • private：专用于个人的缓存，中间代理、CDN 等不能缓存此响应

    • public：响应可以被中间代理、CDN 等缓存

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

  • Pragma (优先级最高)
    • 只有一个属性值：no-cache (效果同Cache-Contorl中的no-cache)
    • 不使用强缓存，需要与服务器验证缓存是否新鲜

（2）协商缓存

• 协商缓存表示在使用本地的缓存之前，会先向服务器发一个请求，与服务器协商当前浏览器的缓存是否已经过期了，如果没过期，那么就使用本地的资源，如果过期了就去请求最新资源。
• 主要解决强缓存资源不能及时更新的问题
• 实现：(会将这两个属性值到服务端去验证是否命中协商缓存，如果命中了协商缓存，会返回 304 状态)
  • last-modified 配合 If-Modified-Since

    • 

      // 判断客户端请求的是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)
      }
      }

  • Etag 配合 If-None-Match

 　　　　　　　　

// 引入 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)
}
}

 

 

 

2、浏览器缓存分类：本地存储  默认缓存

 

二、缓存作用：

• 为加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力

三、缓存流程图：

 

四、http缓存的强缓存