Express.js 中的缓存技巧:使用 Etags 和 Last-Modified

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

缓存是一项用于提高网站性能的技术。它是将数据存储在本地存储器中,从而避免在每次请求时都要重新获取数据。在前端开发中,使用缓存可以大大减少数据传输的时间,提高网站的加载速度和响应时间。在使用 Express.js 进行后端开发时,缓存也是非常重要的一项技术。本文将重点介绍如何在 Express.js 中使用 Etags 和 Last-Modified 来实现缓存。

Etags 与 Last-Modified 概述

ETag 是一个由服务器生成的标识,用来标识一个资源的版本信息。它是一个字符串,可以通过浏览器的 HTTP 头信息来传递给服务器。当服务器接收到一个请求时,它会将服务器上的资源与传递过来的 ETag 值进行比较,如果 ETag 值相同,则服务器返回 HTTP 304 Not Modified 响应,从而让浏览器使用缓存中的数据。

Last-Modified 是一个时间戳,用来标识一个资源的最后修改日期。它也可以通过浏览器的 HTTP 头信息来传递给服务器。当服务器接收到一个请求时,它会将服务器上的资源的最后修改日期与传递过来的 Last-Modified 值进行比较,如果它们相同,则服务器返回 HTTP 304 Not Modified 响应。

Etags 的使用

为了在 Express.js 中使用 Etags,我们需要使用 etag 中间件。这是一个 Express.js 的内置中间件,可以用于自动生成 Etag 值,并将其添加到响应的 HTTP 头信息中。

----- ------- - -------------------
----- ---- - ---------------- -- -- ---- ---

----- --- - ----------

------------ -------- ----- ---- -
  ----- ---- - ------ -------
  ----- --------- - ----------- -- -- ---- -
  --------------- ----------- -- --------- ----
  ---------------
---

---------------- -------- -- -
  ---------------- -- ------- -- ---- -------
---

在以上代码中,我们通过 etag 中间件生成了 Etag 值,并将其添加到了响应头信息中。当浏览器向服务器请求时,服务器会将客户端传递过来的 Etag 值与服务器上的 Etag 值进行比较。如果它们相同,则服务器返回 HTTP 304 Not Modified 响应,并告诉浏览器直接从缓存中获取数据。

Last-Modified 的使用

在 Express.js 中使用 Last-Modified 也非常简单。我们只需要在响应头信息中添加 Last-Modified 值即可。下面是一个示例代码:

----- ------- - -------------------
----- ------ - ------------------ -- -- ------ ---

----- --- - ----------

------------ -------- ----- ---- -
  ----- ---- - ------ -------
  ----- ------------ - ----------------------- -- -------
  ------------------------ -------------- -- --------- -------------
  ---------------
---

---------------- -------- -- -
  ---------------- -- ------- -- ---- -------
---

在以上代码中,我们使用了 moment 时间库来生成当前时间戳,并将其添加到响应头信息的 Last-Modified 字段中。当浏览器向服务器请求时,服务器会将客户端传递过来的 Last-Modified 值与服务器上的 Last-Modified 值进行比较。如果它们相同,则服务器返回 HTTP 304 Not Modified 响应,并告诉浏览器直接从缓存中获取数据。

结论

在本文中,我们介绍了在 Express.js 中使用 Etags 和 Last-Modified 来实现缓存的方法。这些技术可以大大提高网站的性能,减少数据的传输时间,提高网站的加载速度和响应时间。如果您正在开发一个需要高性能的 Express.js 应用程序,那么使用这些技术是非常重要的。希望本文对您有所帮助。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671aef4c9babaf620fa696fc


猜你喜欢

  • React Native 中的数据可视化教程

    React Native 是一个流行的、基于 JavaScript 的开源框架,它允许开发者使用 React 构建原生应用。随着移动应用的越来越广泛,数据可视化也成为了 React Native 的一...

    17 天前
  • Serverless 架构的函数一致性问题及解决方法详解

    在 Serverless 架构中,函数一致性问题是很常见的。当一个函数被多次调用时,可能会出现不同的结果。这是因为函数可能依赖于一些外部的状态或资源,例如数据库或文件系统。

    17 天前
  • ECMAScript 2021 中的 Array.from 方法使用方法详解

    随着 JavaScript 的快速发展,新的 ECMAScript 标准越来越频繁地发布。而本文将要讨论的 ECMAScript 2021 中的 Array.from 方法是一种非常有用的功能,可以在...

    17 天前
  • 使用 Mocha 和 Chai 在 Node.js 应用程序中进行测试驱动开发

    在现代的前端开发中,测试驱动开发(TDD)已经成为一种极其重要的实践。Mocha 和 Chai 是 Node.js 中经典的测试框架,它们可以在应用程序中进行单元测试、集成测试和端到端测试。

    17 天前
  • 如何在 Koa2 中使用 WebSockets 实现多人实时游戏

    如果你想在你的前端项目或者应用中实现多人实时游戏,并且考虑到性能和用户体验,那么你可以使用WebSockets。WebSockets 是一种为现代浏览器提供的全双工通信协议,使得服务器可以主动推送数据...

    17 天前
  • Cypress 测试框架集成 PactDSL 实现 API 自动化测试的技巧

    前言 Cypress 是一个快速、易于使用且功能强大的前端测试框架。它可以轻松地测试 Web 应用程序和单页面应用程序,并且具有强大的自动化功能。但是,它不能很好地与后端 API 集成。

    17 天前
  • RESTful API 优化性能的基本原则

    RESTful API是今天许多现代应用程序的基础,因为它们允许应用程序通过HTTP请求从服务器获取数据。然而,RESTful API的性能仍然是一件令人关注的事情,因为它们可能会影响WEB应用程序的...

    17 天前
  • Node.js 和 WebSocket:如何在客户端和服务器之间建立实时连接

    随着 Web 应用程序的不断发展,越来越多的应用程序需要实时连接,以提供实时的数据更新和交互性。 Node.js 是一个非常流行的服务器端 JavaScript 运行环境,它允许我们使用 JavaSc...

    17 天前
  • Webpack 构建优化:使用 HappyPack 提高打包速度

    前端开发中,我们通常使用 Webpack 来打包我们的代码,将许多文件合并成一个或者几个文件,并将所有依赖关系都解决掉,方便我们在生产环境中使用。但是,当代码变得越来越大时,Webpack 的打包速度...

    17 天前
  • 使用 Chai.js 测试 JavaScript 的类和继承

    JavaScript 是一种非常流行的编程语言,它在前端开发中广泛应用。在 JavaScript 中,可以使用类和继承来构建复杂的应用程序。在这篇文章中,我们将介绍如何使用 Chai.js 测试 Ja...

    17 天前
  • AngularJS SPA 应用的模块管理技巧

    AngularJS(以下简称 Angular)是一款优秀的前端 MVC/MVVM 框架,支持构建单页面 web 应用(Single Page Application,SPA)。

    17 天前
  • 运用 Fastify 和 Nginx 构建高可用性和负载平衡器

    前言 在前端领域,如何构建高可用性和负载平衡器是一个至关重要的问题。本文将介绍如何运用 Fastify 和 Nginx 构建高可用性和负载平衡器,帮助开发者更好地解决这一问题。

    17 天前
  • Custom Elements 如何正确地使用 CSS Flex 布局?

    Flex 布局是一种强大的 CSS 布局模式,它适用于各种不同的项目。自定义元素是一种完全自定义的 HTML 元素,它可以包括 JavaScript、CSS 和 HTML。

    17 天前
  • 如何自定义 ESLint 编码规范

    随着前端技术的不断发展和更新,代码质量始终是我们关注的重点之一。而 ESLint 是一个可扩展、模块化的 JavaScript 代码检查工具,可以帮助我们规范代码,避免出现一些常见的错误和不良实践。

    17 天前
  • 如何通过 Headless CMS 实现快速迭代?

    在现在这个快节奏的前端开发环境中,要快速迭代你的网站或者应用程序,常常需要使用一些高效的工具。Headless CMS (无头 CMS) 正是这样一种工具,为前端开发人员提供了一种解耦的方式,从而实现...

    17 天前
  • Vue.js 中重置 data 数据的方法

    在 Vue.js 中,我们通常会将数据存储在组件的 data 属性中,并根据需要对其进行修改和访问。但是在某些情况下,我们可能需要重置 data 数据,以便将其还原为初始状态或更改其现有值。

    17 天前
  • 如何在响应式设计中兼容低端设备

    随着移动设备和不同尺寸的屏幕的出现,响应式设计日益成为网页设计的主流趋势。但是,在设计响应式网站时,如何兼容低端设备却是一个问题。本文将介绍一些关键技术和最佳实践,帮助您在设计响应式网站时兼容低端设备...

    17 天前
  • 牢记 Promise 中的 then() 和 catch() 顺序

    对于前端开发人员来说,Promise 已经成为了日常编程中必不可少的部分。Promise 的 then() 方法和 catch() 方法是 Promise 最常用的两个方法。

    17 天前
  • 在 Kubernetes 中安全使用第三方 Docker 镜像的方法

    在 Kubernetes 中,使用 Docker 镜像是非常普遍的操作。然而,不安全的镜像会对集群造成重大威胁。因此,在 Kubernetes 中安全使用第三方 Docker 镜像是非常重要的。

    17 天前
  • 无障碍设计实践:网页键盘访问性与屏幕阅读器适配

    前言 在设计和开发网站时,我们经常会考虑如何使网站更加美观和易用。但是,在这个过程中,我们有时会忽略有些用户可能面临的访问障碍,这些用户可能是视障人士、听障人士、身体残障人士以及长期阅读的用户。

    17 天前

相关推荐

    暂无文章