实践示例理解js强缓存协商缓存

2024-09-28 00:18:44

背景

无论是开发中或者是面试中，HTTP缓存都是非常重要的，这体现在了两个方面：

开发中：合理利用HTTP缓存可以提高前端页面的性能
面试中：HTTP缓存是面试中的高频问点

所以本篇文章，我不讲废话，我就通过Nodejs的简单实践，给大家讲最通俗易懂的HTTP缓存，大家通过这篇文章一定能了解掌握它！！！

前置准备

准备

创建文件夹cache-study，并准备环境

npm init

安装Koa、nodemon

npm i koa -D
npm i nodemon -g

创建index.js、index.html、static文件夹
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./static/css/index.css" rel="external nofollow" >
</head>
<body>
  <div class="box">
  </div>
</body>
</html>

static/css/index.css

.box {
  width: 500px;
  height: 300px;
  background-image: url('../image/guang.jpg');
  background-size: 100% 100%;
  color: #000;
}

static/image/guang.jpg

index.js

const Koa = require('koa')
const fs = require('fs')
const path = require('path')
const mimes = {
  css: 'text/css',
  less: 'text/css',
  gif: 'image/gif',
  html: 'text/html',
  ico: 'image/x-icon',
  jpeg: 'image/jpeg',
  jpg: 'image/jpeg',
  js: 'text/javascript',
  json: 'application/json',
  pdf: 'application/pdf',
  png: 'image/png',
  svg: 'image/svg+xml',
  swf: 'application/x-shockwave-flash',
  tiff: 'image/tiff',
  txt: 'text/plain',
  wav: 'audio/x-wav',
  wma: 'audio/x-ms-wma',
  wmv: 'video/x-ms-wmv',
  xml: 'text/xml',
}
// 获取文件的类型
function parseMime(url) {
  // path.extname获取路径中文件的后缀名
  let extName = path.extname(url)
  extName = extName ? extName.slice(1) : 'unknown'
  return mimes[extName]
}
// 将文件转成传输所需格式
const parseStatic = (dir) => {
  return new Promise((resolve) => {
    resolve(fs.readFileSync(dir), 'binary')
  })
}
const app = new Koa()
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 访问根路径返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 设置类型
    ctx.set('Content-Type', parseMime(url))
    // 设置传输
    ctx.body = await parseStatic(filePath)
  }
})
app.listen(9898, () => {
  console.log('start at port 9898')
})

启动页面

现在你可以在终端中输入nodemon index，看到下方的显示，则代表成功启动了服务

此时你可以在浏览器链接里输入http://localhost:9898/，打开看到如下页面，则代表页面访问成功！！！

HTTP缓存种类

HTTP缓存常见的有两类：

强缓存：可以由这两个字段其中一个决定

expires
cache-control(优先级更高)

协商缓存：可以由这两对字段中的一对决定

Last-Modified，If-Modified-Since

Etag，If-None-Match(优先级更高)

强缓存

接下来我们就开始讲强缓存

expires

我们只需设置响应头里expires的时间为当前时间 + 30s就行了

app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 访问根路径返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 设置类型
    ctx.set('Content-Type', parseMime(url))
    // 设置 Expires 响应头
    const time = new Date(Date.now() + 30000).toUTCString()
    ctx.set('Expires', time)
    // 设置传输
    ctx.body = await parseStatic(filePath)
  }
})

然后我们在前端页面刷新，我们可以看到请求的资源的响应头里多了一个expires的字段

并且，在30s内，我们刷新之后，看到请求都是走memory，这意味着，通过expires设置强缓存的时效是30s，这30s之内，资源都会走本地缓存，而不会重新请求

注意点：有时候你Nodejs代码更新了时效时间，但是发现前端页面还是在走上一次代码的时效，这个时候，你可以把这个Disabled cache打钩，然后刷新一下，再取消打钩

cache-control

其实cache-control跟expires效果差不多，只不过这两个字段设置的值不一样而已，前者设置的是秒数，后者设置的是毫秒数

app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 访问根路径返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    // 设置类型
    ctx.set('Content-Type', parseMime(url))
    // 设置 Cache-Control 响应头
    ctx.set('Cache-Control', 'max-age=30')
    // 设置传输
    ctx.body = await parseStatic(filePath)
  }
})

前端页面响应头多了cache-control这个字段，且30s内都走本地缓存，不会去请求服务端

协商缓存

与强缓存不同的是，强缓存是在时效时间内，不走服务端，只走本地缓存；而协商缓存是要走服务端的，如果请求某个资源，去请求服务端时，发现命中缓存则返回304，否则则返回所请求的资源，那怎么才算命中缓存呢？接下来讲讲

Last-Modified，If-Modified-Since

简单来说就是:

第一次请求资源时，服务端会把所请求的资源的最后一次修改时间当成响应头中Last-Modified的值发到浏览器并在浏览器存起来
第二次请求资源时，浏览器会把刚刚存储的时间当成请求头中If-Modified-Since的值，传到服务端，服务端拿到这个时间跟所请求的资源的最后修改时间进行比对
比对结果如果两个时间相同，则说明此资源没修改过，那就是命中缓存，那就返回304，如果不相同，则说明此资源修改过了，则没命中缓存，则返回修改过后的新资源

// 获取文件信息
const getFileStat = (path) => {
  return new Promise((resolve) => {
    fs.stat(path, (_, stat) => {
      resolve(stat)
    })
  })
}
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 访问根路径返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    const ifModifiedSince = ctx.request.header['if-modified-since']
    const fileStat = await getFileStat(filePath)
    console.log(new Date(fileStat.mtime).getTime())
    ctx.set('Cache-Control', 'no-cache')
    ctx.set('Content-Type', parseMime(url))
    // 比对时间，mtime为文件最后修改时间
    if (ifModifiedSince === fileStat.mtime.toGMTString()) {
      ctx.status = 304
    } else {
      ctx.set('Last-Modified', fileStat.mtime.toGMTString())
      ctx.body = await parseStatic(filePath)
    }
  }
})

第一次请求时，响应头中：

第二次请求时，请求头中：

由于资源并没修改，则命中缓存，返回304：

此时我们修改一下index.css

.box {
  width: 500px;
  height: 300px;
  background-image: url('../image/guang.jpg');
  background-size: 100% 100%;
  /* 修改这里 */
  color: #333;
}

然后我们刷新一下页面，index.css变了，所以会没命中缓存，返回200和新资源，而guang.jpg并没有修改，则命中缓存返回304：

Etag，If-None-Match

其实Etag，If-None-Match跟Last-Modified，If-Modified-Since大体一样，区别在于：

后者是对比资源最后一次修改时间，来确定资源是否修改了
前者是对比资源内容，来确定资源是否修改

那我们要怎么比对资源内容呢？我们只需要读取资源内容，转成hash值，前后进行比对就行了！！

const crypto = require('crypto')
app.use(async (ctx) => {
  const url = ctx.request.url
  if (url === '/') {
    // 访问根路径返回index.html
    ctx.set('Content-Type', 'text/html')
    ctx.body = await parseStatic('./index.html')
  } else {
    const filePath = path.resolve(__dirname, `.${url}`)
    const fileBuffer = await parseStatic(filePath)
    const ifNoneMatch = ctx.request.header['if-none-match']
    // 生产内容hash值
    const hash = crypto.createHash('md5')
    hash.update(fileBuffer)
    const etag = `"${hash.digest('hex')}"`
    ctx.set('Cache-Control', 'no-cache')
    ctx.set('Content-Type', parseMime(url))
    // 对比hash值
    if (ifNoneMatch === etag) {
      ctx.status = 304
    } else {
      ctx.set('etag', etag)
      ctx.body = fileBuffer
    }
  }
})

验证方式跟刚刚Last-Modified，If-Modified-Since的一样，这里就不重复说明了。。。

总结

参考 https://www.jb51.net/article/254078.htm

以上就是实践示例理解js强缓存协商缓存的详细内容，更多关于js强缓存协商缓存的资料请关注我们其它相关文章！

js前端面试常见浏览器缓存强缓存及协商缓存实例

目录前言搭建环境强缓存协商缓存 Etag和If-None-Match Last-Modify和if-modified-since 前言最近在背面试题时,时常会看见浏览器缓存,虽然没有用过但是从它的描写中大致是知道它的作用和重要性.但是还是没有代码实操过,也是一知半解的,这口气咽不下啊,开始找资料,但是大部分都是理论半行代码没有,终于东拼西凑顿悟了.开始搭环境,干活. 浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本
详解浏览器的缓存机制

目录前言 1 浏览器缓存 1.1 浏览器缓存 1.2 浏览器缓存的意义 2 缓存类型 2.1 第一次请求数据 2.2 强制缓存 2.3 协商缓存 2.4 强制缓存和协商缓存的关系 3 缓存相关header 3.1 强制缓存 3.2 协商缓存 3.3 缓存请求 4 实例分析 4.1 官网首页: 4.2 社区 4.3 云市场 4.4 个人中心 4.5 论坛 4.6 App 总结前言浏览器缓存是前端性能优化的重要一环,对于前端效率提升的重要性,不言而喻. 之前对于浏览器缓存也是一知半解,这次借着
vue增加强缓存和版本号的实现方法

强缓存: 到底什么是强缓存?强在哪?其实强是强制的意思.当浏览器去请求某个文件的时候,服务端就在respone header里面对改文件做了缓存配置.缓存的时间.缓存类型都由服务端控制. 强缓存实现: cache-control: max-age=315360000, public ,immutable 客户端和代理服务器都可以缓存该资源,在315360000秒(10年)的有效期内,如果有请求该资源的需求的话就直接读取缓存,statu code:200 ,即使用户做了刷新操作,也不向服务器发起h
详解浏览器缓存和webpack缓存配置

浏览器缓存浏览器缓存分为两种类型: 强缓存:也称为本地缓存,不向服务器发送请求,直接使用客户端本地缓存数据协商缓存:也称304缓存,向服务器发送请求,由服务器判断请求文件是否发生改变.如果未发生改变,则返回304状态码,通知客户端直接使用本地缓存:如果发生改变,则直接返回请求文件. 浏览器缓存机制的过程如下: 强缓存(本地缓存) 强缓存是最彻底的缓存,无需向服务器发送请求,通常用于css.js.图片等静态资源.浏览器发送请求后会先判断本地是否有缓存.如果无缓存,则直接向服务器发送请求:如果有
node强缓存和协商缓存实战示例

目录前言什么是浏览器缓存优点强缓存 Expires Cache-Control 协商缓存 ETag.If-None-Match node实践 koa启动服务创建项目 koa代码原生koa实现简易静态资源服务强缓存验证设置Expire 协商缓存验证小结总结前言浏览器缓存是性能优化非常重要的一个方案,合理地使用缓存可以提高用户体验,还能节省服务器的开销.掌握好缓存的原理和并合理地使用无论对前端还是运维都是相当重要的. 什么是浏览器缓存浏览器缓存(http 缓存) 是指浏览器
实践示例理解js强缓存协商缓存

目录背景前置准备准备启动页面 HTTP缓存种类强缓存 expires cache-control 协商缓存 Last-Modified,If-Modified-Since Etag,If-None-Match 总结背景无论是开发中或者是面试中,HTTP缓存都是非常重要的,这体现在了两个方面: 开发中:合理利用HTTP缓存可以提高前端页面的性能面试中:HTTP缓存是面试中的高频问点所以本篇文章,我不讲废话,我就通过Nodejs的简单实践,给大家讲最通俗易懂的HTTP缓存,大家通过
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)

浏览器缓存浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档. 所以根据上面的特点,浏览器缓存有下面的优点: 减少冗余的数据传输减少服务器负担加快客户端加载网页的速度浏览器缓存是Web性能优化的重要方式.那么浏览器缓存的过程究竟是怎么样的呢? 在浏览器第一次发起请求时,本地无缓存,向web服务器发送请求,服务器起端响应请求,浏览器端缓存.过程如下: 在第一次请求时,服务器会将页面最后修改时间通过Last-Modifi
基于nginx设置浏览器协商缓存过程详解

这篇文章主要介绍了基于nginx设置浏览器协商缓存过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下强缓存与协商缓存的区别强缓存:浏览器不与服务端协商直接取浏览器缓存协商缓存:浏览器会先向服务器确认资源的有效性后才决定是从缓存中取资源还是重新获取资源协商缓存运作原理现在有一个这样的业务情景:后端的静态资源会不定时地发生更新,而因为浏览器默认使用强缓存,会默认从浏览器缓存中取到过时的资源. 现在我们希望浏览器每次获取资源的时候都向后
Node.js基础入门之缓存区与文件操作详解

目录缓存区 1. 什么是缓存区? 2. 创建指定长度的缓存区 3. 通过数组创建缓存区 4. 通过字符串创建缓存区 5. 读写缓存区 6. 复制缓存区文件操作 1. 异步直接读取 2. 同步直接读取 3. 流式读取 4. 写入文件 5. 流式写入文件 6. 读取文件信息 7. 删除文件 8. 管道 9. 链式流经过前面三天的学习,Node.js的基础知识已逐渐掌握,今天继续学习缓存区和文件操作,并稍加整理加以分享,如有不足之处,还请指正. 缓存区 1. 什么是缓存区? JavaScript
深入理解MyBatis中的一级缓存与二级缓存

前言先说缓存,合理使用缓存是优化中最常见的,将从数据库中查询出来的数据放入缓存中,下次使用时不必从数据库查询,而是直接从缓存中读取,避免频繁操作数据库,减轻数据库的压力,同时提高系统性能. 一级缓存一级缓存是SqlSession级别的缓存.在操作数据库时需要构造sqlSession对象,在对象中有一个数据结构用于存储缓存数据.不同的sqlSession之间的缓存数据区域是互相不影响的.也就是他只能作用在同一个sqlSession中,不同的sqlSession中的缓存是互相不能读取的. 一级缓
react后台系统最佳实践示例详解

目录一.中后台系统的技术栈选型 1. 要做什么 2. 要求 3. 技术栈怎么选二.hooks时代状态管理库的选型 context redux recoil zustand MobX 三.hooks的使用问题与解决方案总结一.中后台系统的技术栈选型本文主要讲三块内容:中后台系统的技术栈选型.hooks时代状态管理库的选型以及hooks的使用问题与解决方案. 1. 要做什么我们的目标是搭建一个适用于公司内部中后台系统的前端项目最佳实践. 2. 要求由于业务需求比较多,一名开发人员需要负
深入理解js函数的作用域与this指向

函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi
深入理解JS中的substr和substring

substr 方法返回一个从指定位置开始的指定长度的子字符串. stringvar.substr(start [, length ]) 参数 stringvar 必选项.要提取子字符串的字符串文字或 String 对象. start 必选项.所需的子字符串的起始位置.字符串中的第一个字符的索引为 0. length 可选项.在返回的子字符串中应包括的字符个数. 说明如果 length 为 0 或负数,将返回一个空字符串.如果没有指定该参数,则子字符串将延续到 stringvar 的最后. 示