iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >缓存是什么?用node怎么实现?
  • 586
分享到

缓存是什么?用node怎么实现?

前端面试Node.js 2023-05-14 22:05:55 586人浏览 八月长安
摘要

浏览器缓存是前端优化的一个重要方向,通过缓存静态资源,可以减少页面的加载时间和减轻服务器负担,提高用户体验。本文将介绍浏览器缓存的基本原理和常见的缓存策略,并用 nodejs的 koa 框架下的代码实现。缓存原理浏览器缓存的基本原理是将静态

浏览器缓存前端优化的一个重要方向,通过缓存静态资源,可以减少页面的加载时间和减轻服务器负担,提高用户体验。本文将介绍浏览器缓存的基本原理和常见的缓存策略,并用 nodejs的 koa 框架下的代码实现。

缓存是什么?用node怎么实现?

缓存原理

浏览器缓存的基本原理是将静态资源(如 CSSjavascript、图片等)缓存到本地,当页面再次请求这些资源时,直接从本地获取,而不是重新从服务器下载。这可以减少页面的加载时间和减轻服务器负担,提高用户体验。

Http 协议中,浏览器缓存可以通过两种机制实现:强缓存和协商缓存。【相关教程推荐:nodejs视频教程】

强缓存

  • Expires字段:

    • 值为服务端返回的到期时间,可能因为服务端和客户端时间不同而造成缓存命中误差
  • Cache-Control(替代方案)

    • public:所有内容都被缓存(客户端和代理服务器都可被缓存)

    • private:只缓存到私有缓存中(客户端)

    • no-cache:与服务端确认返回的响应是否被更改,然后才能使用该响应来满足后续对同一个网址的请求。因此,如果存在合适的验证令牌 (ETag),no-cache 会发起往返通信来验证缓存的响应,如果资源未被更改,可以避免下载。

    • no-store:值不缓存

    • must-revalidation/proxy-revalidation:如果缓存内容失效,则请求必须发送到服务器已进行重新验证

    • max-age=xxx:缓存内容在xxx秒后失效,这个选项只能在http1.1使用, 比last-Modified优先级更高

  • last-Modified(上次修改日期)

    • last-Modified:保存于服务器中,记录该资源上次修改的日期(不能精确到秒,如果在数秒内多次修改,可能会导致错误命中缓存)

    • if-modified-since:保存于客户端中,请求被携带并与服务端的last-Modified比较,相同则直接命中缓存返回304状态码

koa实现强缓存

const Koa = require('koa');
const app = new Koa();

// 设置 expires方案
const setExpires = async (ctx, next) => {
  // 设置缓存时间为 1 分钟
  const expires = new Date(Date.now() + 60 * 1000);
  ctx.set('Expires', expires.toUTCString());
  await next();
}
// Cache-Control方案(优先执行)
const setCacheControl = async (ctx, next) => {
  // 设置缓存时间为 1 分钟
  ctx.set('Cache-Control', 'public, max-age=60');
  await next();
}
// Last-Modified方案
const setLastModified = async (ctx, next) => {
  // 获取资源最后修改时间
  const lastModified = new Date('2021-03-05T00:00:00Z');
  // 设置 Last-Modified 头
  ctx.set('Last-Modified', lastModified.toUTCString());
  await next();
}

const response = (ctx) => {
  ctx.body = 'Hello World';
}

// 跟Last-Modified方案相对应
const lastModifiedResponse = (ctx) => {
  // 如果资源已经修改过,则返回新的资源
  if (ctx.headers['if-modified-since'] !== ctx.response.get('Last-Modified')) {
    	response(ctx)
  } else ctx.status = 304;
}

app.get('/getMes', setExpires, response);

app.listen(3000, () => console.log('Server started on port 3000'));

协商缓存(浏览器和服务器通过一个值进行协商判断)

  • Etag/if-None-Match

    • Etag:服务器根据请求的资源计算一个哈希值(也可以是其他算法,代表一个资源标识符) 并返回给浏览器,下次浏览器请求该资源时通过if-None-Match字段将Etag发送给服务器

  • Last_Modified和if-Modified-Since

    • last-Modified:保存于服务器中,记录该资源上次修改的日期(不能精确到秒,如果在数秒内多次修改,可能会导致错误命中缓存)

    • if-modified-since:保存于客户端中,请求被携带并与服务端的last-Modified比较,相同则直接命中缓存返回304状态码

协商缓存ETag和Last-Modified区别:

  • ETag 是服务器为资源分配的唯一标识符,而 Last-Modified 是服务器报告的资源的最后修改时间。

  • ETag 可以使用任何算法生成,例如哈希,而 Last-Modified 只能使用特定的时间格式(GMT)。

  • ETag 的比较是强验证器(exact-match validator),需要完全匹配,而 Last-Modified 的比较是弱验证器(weak validator),只需要在同一秒钟内相同即可。

  • ETag 适用于所有类型的资源,而 Last-Modified 只适用于不常更改的资源,例如图片、视频等。

对于经常更新的资源,ETag 更适合,因为它可以更准确地检测资源是否已经被修改;而对于不经常更新的资源,Last-Modified 更适合,因为它可以减少服务器负载和网络流量。

koa实现协商缓存

const Koa = require('koa');
const app = new Koa();

// 设置 eTag方案
const setExpires = async (ctx, next) => {
  // 设置缓存时间为 1 分钟
  const maxAge = 60;
  ctx.set('Cache-Control', `public, max-age=${maxAge}`);
  // 设置 ETag 头
  const etag = 'etag-123456789';
  ctx.set('ETag', etag);

  await next();
}
// Last-Modified方案
const setLastModified = async (ctx, next) => {
  // 设置缓存时间为 1 分钟
  const maxAge = 60;
  ctx.set('Cache-Control', `public, max-age=${maxAge}`);
  // 设置 Last-Modified 头
  const lastModified = new Date('2021-03-05T00:00:00Z');
  ctx.set('Last-Modified', lastModified.toUTCString());

  await next();
}

const response = (ctx) => {
  ctx.body = 'Hello World';
}

// 跟Etag方案对应
const etagResponse = (ctx) => {
  // 如果 ETag 头未被修改,则返回 304
  if (ctx.headers['if-none-match'] === ctx.response.get('ETag')) {
    ctx.status = 304;
  } else ctx.body = 'Hello World';
}
// 跟Last-Modified方案相对应
const lastModifiedResponse = (ctx) => {
  // 如果资源已经修改过,则返回新的资源
  if (ctx.headers['if-modified-since'] !== ctx.response.get('Last-Modified')) {
    	response(ctx)
  } else ctx.status = 304;
}

app.get('/getMes', setExpires, response);

app.listen(3000, () => console.log('Server started on port 3000'));

koa使用哈希计算Etag值:

const Koa = require('koa');
const crypto = require('crypto');

const app = new Koa();

// 假设这是要缓存的资源
const content = 'Hello, world!';

app.use(async (ctx) => {
  // 计算资源的哈希值
  const hash = crypto.createHash('md5').update(content).digest('hex');

  // 设置 ETag 头
  ctx.set('ETag', hash);

  // 判断客户端是否发送了 If-None-Match 头
  const ifNoneMatch = ctx.get('If-None-Match');
  if (ifNoneMatch === hash) {
    // 如果客户端发送了 If-None-Match 头,并且与当前资源的哈希值相同,则返回 304 Not Modified
    ctx.status = 304;
  } else {
    // 如果客户端没有发送 If-None-Match 头,或者与当前资源的哈希值不同,则返回新的资源
    ctx.body = content;
  }
});

app.listen(3000);

缓存执行流程:

  • 强缓存未失效,从缓存中读取数据,cache-control优先级高于last-Modified

  • 强缓存失效,执行协商缓存,Etag的优先级会高于last-Modified

  • 缓存未失效服务器返回304状态码,客户端从缓存中读取数据

  • 缓存已失效则返回资源和200状态码

强缓存和协商缓存的使用?

强缓存通常在浏览器中缓存静态资源(如 CSS、JavaScript、图片等),以减少页面的加载时间和减轻服务器负担。

协商缓存通常用于缓存动态资源(如 html 页面、api 数据等),以减少服务器的负担和网络带宽的消耗。

在实际应用中,强缓存和协商缓存可以单独使用或一起使用。对于一些静态资源,可以只使用强缓存;对于一些动态资源,可以只使用协商缓存;对于一些经常变化的资源,可以使用强缓存和协商缓存结合使用,既可以减少服务器的负担,也可以保证及时获取到最新的资源。

结语

虽然是用后端nodejs实现,但是我认为前端也应该多多少少了解一下这方面的知识,以便于后端更好的进行交互。后面会讲前端如何实现?

以上就是缓存是什么?用node怎么实现?的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 缓存是什么?用node怎么实现?

本文链接: https://www.lsjlt.com/news/207086.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 缓存是什么?用node怎么实现?
    浏览器缓存是前端优化的一个重要方向,通过缓存静态资源,可以减少页面的加载时间和减轻服务器负担,提高用户体验。本文将介绍浏览器缓存的基本原理和常见的缓存策略,并用 nodejs的 koa 框架下的代码实现。缓存原理浏览器缓存的基本原理是将静态...
    99+
    2023-05-14
    前端 面试 Node.js
  • node强缓存和协商缓存怎么实现
    这篇文章主要介绍了node强缓存和协商缓存怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇node强缓存和协商缓存怎么实现文章都会有所收获,下面我们一起来看看吧。什么是浏览器缓存浏览器缓存(http 缓存...
    99+
    2023-07-02
  • 用node如何实现缓存
    本文小编为大家详细介绍“用node如何实现缓存”,内容详细,步骤清晰,细节处理妥当,希望这篇“用node如何实现缓存”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。缓存原理浏览器缓存的基本原理是将静态资源(如 CS...
    99+
    2023-07-05
  • Clean Architecture是什么?怎么用Node实现?
    用户创建,查询帖子的发布,编辑,查询,删除项目结构├── server │ ├── core // 核心业务逻辑 │ │ └── src │ │ ├── domain │ │ ├── reposi...
    99+
    2023-05-14
    Node.js 架构 JavaScript
  • php中什么是进程缓存?怎么实现?
    PHP(Hypertext Preprocessor)是一种开源的服务器脚本语言,主要用于网站开发。随着网站访问量的增加,PHP页面的加载也会变得更加缓慢,从而降低用户体验。为了提高PHP页面加载速度,可以使用进程缓存技术,本篇文章将介绍如...
    99+
    2023-05-14
    php 缓存
  • 什么是缓存?php怎么自动清除缓存?
    在PHP项目开发过程中,经常会出现一些缓存使用的情况,例如网站的缓存、数据库的缓存等等。缓存可以提高网站的响应速度,但是如果缓存不正确地使用,就会导致程序出现一些异常错误。为了解决这些问题,程序开发人员通常需要利用PHP的一些功能来自动清除...
    99+
    2023-05-14
    php
  • 怎么实现redis缓存
    这篇文章主要介绍了怎么实现redis缓存的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么实现redis缓存文章都会有所收获,下面我们一起来看看吧。1、使用宝塔面板先搭建好微擎...
    99+
    2024-04-02
  • 怎么利用Node实现HTML5离线存储
    这篇文章主要介绍了怎么利用Node实现HTML5离线存储,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言支持离线Web应用开发是HTML5的一个重点。离线Web应用就是在设...
    99+
    2023-06-09
  • 什么是MyBatis缓存
    这篇文章主要介绍“什么是MyBatis缓存”,在日常操作中,相信很多人在什么是MyBatis缓存问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”什么是MyBatis缓存”的疑惑...
    99+
    2024-04-02
  • java二级缓存的实现原理是什么
    Java二级缓存是一种应用级缓存,它通过将数据存储在内存中,以减少对底层数据源的访问次数,提高数据访问的性能。实现Java二级缓存的...
    99+
    2023-10-09
    java
  • SpringBoot怎么使用Caffeine实现缓存
    这篇文章主要介绍“SpringBoot怎么使用Caffeine实现缓存”,在日常操作中,相信很多人在SpringBoot怎么使用Caffeine实现缓存问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Sprin...
    99+
    2023-07-02
  • redis实现清空缓存的方法是什么
    这篇文章主要介绍“redis实现清空缓存的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“redis实现清空缓存的方法是什么”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • LRU缓存算法的实现方法是什么
    这篇文章主要讲解了“LRU缓存算法的实现方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“LRU缓存算法的实现方法是什么”吧!LRU就是Least R...
    99+
    2024-04-02
  • golang cache缓存怎么实现
    在Go语言中,实现缓存可以使用以下两种方式: 使用sync.Map实现缓存:sync.Map是Go语言提供的并发安全的map,可以...
    99+
    2024-02-29
    golang
  • redis缓存的作用是什么
    redis缓存的作用:提高系统的性能,减少IO的操作。关系型数据库的扩展性不强,难以改变表结构,而redis缓存降低数据库的负载。解决应用服务器的cpu和内存压力,并且读取速度快,对较大数据处理快。...
    99+
    2024-04-02
  • PHP缓存技术是什么及怎么使用
    这篇文章主要介绍“PHP缓存技术是什么及怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“PHP缓存技术是什么及怎么使用”文章能帮助大家解决问题。概述缓存已经成了项目中是必不可少的一部分,它是提...
    99+
    2023-07-04
  • go分布式缓存的实现原理是什么
    Go分布式缓存的实现原理通常包括以下几个步骤: 数据分片:将数据按照一定的规则进行分片,通常使用哈希算法来实现。每个节点负责一部...
    99+
    2024-02-29
    go
  • HTML5怎么实现应用程序缓存
    这篇文章主要介绍HTML5怎么实现应用程序缓存,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!为什么要使用Application Cache技术?在HTML5之前,我们需要接入网络才能访问,这毫无疑问是网站多次请求服务...
    99+
    2023-06-09
  • odoo中怎么使用redis实现缓存
    本篇内容主要讲解“odoo中怎么使用redis实现缓存”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“odoo中怎么使用redis实现缓存”吧!Odoo中使用Redis实现缓存可以提高系统性能,避...
    99+
    2023-07-05
  • 如何利用node实现静态文件缓存详解
    目录缓存缓存位置分类缓存设置headernode实现静态文件缓存强缓存思路代码实现效果展示协商缓存思路代码实现效果展示总结缓存 浏览器缓存(Brower Caching)是浏览器对...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作