RESTful API 的缓存最佳实践

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

在现代 Web 应用程序中，RESTful API 是一种非常流行的设计方式。它使得客户端与服务端之间的通信变得更为便捷和高效。在过去的几年中，RESTful API 已经成为前端开发不可或缺的一部分。然而，在某些情况下，RESTful API 可能会遭遇缓慢的响应时间和过多的请求次数。这时，缓存就成为了优化 RESTful API 的必备技能。

缓存的目的

缓存技术是通过将部分数据存储在客户端或服务器的内存中，以避免每次请求时访问数据源，从而优化应用程序的性能。简言之，缓存的目的是减少在服务器请求时需要执行的数据库操作。

RESTful API 的缓存

RESTful API 是一种基于 HTTP 协议的 API，它是无状态的。在 RESTful API 中，客户端通过 HTTP 请求访问服务器资源。由于请求和响应均是通过 HTTP 协议传输的，因此缓存 HTTP 响应是一种优化性能的方式。缓存状态不应与客户端状态关联，因此，缓存不应存储客户端数据，除非数据已被共享。

因此，RESTful API 可以通过将响应的 JSON 数据缓存在浏览器或服务器上，以避免对 API 的重复调用和数据重复传输。这对于频繁使用且数据经常不变的 API 来说尤为重要。

使用 HTTP 缓存

HTTP 规范提供了对响应结果进行缓存的机制。浏览器和服务器都可以使用 HTTP 缓存机制。HTTP 缓存机制可以将响应结果存储在浏览器的缓存中，以便在下一次请求相同的 API 时从缓存中获取数据，而不是再次请求数据。

一个响应的 HTTP Header 包含了多个缓存相关的头部信息。

Cache-Control

Cache-Control 头部指令是控制缓存行为的主要工具之一。它定义了客户端和缓存服务如何处理响应。最常用的缓存指令是 max-age 和 no-cache。

  • no-cache: 客户端和缓存服务都不能缓存该响应结果。
  • no-store: 不仅不能缓存响应结果，而且还不能存储请求和响应的内容的任何部分。
  • public: 响应可以被所有人缓存，包括代理服务器。
  • private: 响应只能被客户端缓存，代理服务器不能缓存。
  • max-age: 定义响应结果可以被缓存的最大时间。

ETag 和 If-None-Match

ETag 头部是一个由服务器创建的标识响应实体的字符串。当客户端再次请求同一个 URL 时，它在请求头部中发送 If-None-Match 字段，该字段包含了在先前响应中获取的 ETag 值。如果 ETag 值未发生变化，则返回 304 未修改响应，否则返回新的响应结果。

Last-Modified 和 If-Modified-Since

Last-Modified 头部指明了响应结果的最后修改时间。当客户端再次请求相同的 URL 时，它会在请求头部中发送 If-Modified-Since 字段，该字段包含了上次请求时响应的 Last-Modified 值。如果 Last-Modified 值未发生变化，则返回 304 未修改响应，否则返回新的响应结果。

前端缓存的最佳实践

在使用 RESTful API 的过程中，前端缓存可以减少 API 的请求次数，提高应用程序的性能，降低 API 利用率。这里列出的是一些前端缓存最佳实践的建议。

  1. 缓存数据的时效性应该与数据的稳定性相匹配。

如果 API 端点的数据稳定不变，可以将数据缓存的时效性设置为永久或者很长时间，例如一个星期或者一个月。但是，如果数据可能会更改，缓存的时效性应该和数据的变化频率相匹配。

  1. 避免缓存敏感数据。

例如，如果 API 返回是网站上的私人信息，如信用卡号、电话号码等，则避免缓存这些敏感信息。

  1. 考虑不同类型的缓存策略。

适当的缓存策略通常需要考虑多个因素，如时效性，大小，类型等等。例如，长时效性缓存是适用于很少更改的静态数据。而短时效性缓存是适用于基于时钟时间的事件数据，如短信，推特消息等。

  1. 考虑异步数据的问题。

在应用程序中使用异步请求的情况非常常见。对于已经异步获取数据的应用程序，通常为了防止向 API 发送过多的请求，可以使用缓存来快速获取以前获取的数据。

  1. 不要使用相同的缓存条目。

当多个不同的页面使用相同的 API 时，应该考虑使用不同的缓存条目，以便在缓存发生故障时只影响一个缓存条目而不是整个应用程序。

使用 JavaScript 缓存 API

除了 HTTP 缓存之外，还有一些其他的缓存技术可以用于优化 RESTful API 性能。

一个可行的技术方案是使用 JavaScript 具有的一些缓存 API，例如 localStorage 和 sessionStorage。

localStorage 和 sessionStorage 是 HTML5 新增的 JavaScript 接口，它们都提供了在客户端存储数据的一种方法。

区别在于，localStorage 允许数据持久存储并且在客户端之间共享，而 sessionStorage 仅在当前会话中有效，并且不会在不同页面间共享。

下面的示例展示了如何使用 localStorage 缓存和检索数据。

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

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

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

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

结论

使用缓存是提高 RESTful API 性能的有效方法。缓存为应用程序提供了一种存储和重复使用以前获取的数据的方法。在使用缓存时，应该考虑缓存的时效性，缓存的类型和异步数据问题。同时，HTTP 缓存机制和 JavaScript 缓存 API 都可用于缓存 RESTful API 的响应。虽然缓存是提高应用程序性能的好方法，但是需要谨慎使用，以避免缓存敏感数据或错误的数据。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/672451972e7021665e130818

阅读全文

猜你喜欢

  • GraphQL 中如何处理多表关联查询？

    GraphQL 是一种用于 API 的查询语言和运行时环境，它可以轻松地管理多表关联查询。在传统的 REST API 中，使用多个端点来获取多个数据并手动合并这些数据。

    9 天前
  • C++11 语言性能优化编程技巧

    前言 C++11 是 C++ 语言的一个重要版本，它在语法、库、性能等方面都有很大改进和优化，对于前端开发者来说，熟练掌握 C++11 的相关知识可以帮助我们更好地编写高性能的程序。

    9 天前
  • 如何完美实现响应式导航栏

    随着移动设备的普及，越来越多的用户使用手机或平板浏览网站。因此，响应式设计已经成为现代网站开发的重要组成部分。在响应式设计中，导航栏是至关重要的组件。因此，本文将介绍如何使用 HTML、CSS 和 J...

    9 天前
  • Redis 崩溃恢复导致数据丢失的解决方案

    问题描述 Redis 是当今最流行的 NoSQL 数据库之一，因为它快速、灵活、可扩展的特点。它可以承载大量数据以及应用程序的缓存层。但是，在 Redis 数据库的并发请求和复杂性方面，经常会遇到数据...

    9 天前
  • 使用 Custom Elements 和 Service Worker 在前端实现更好的缓存

    随着互联网的发展，网站和应用程序的访问量越来越大，页面的加载速度变得尤为重要。为了缩短页面加载时间，前端开发人员通常使用缓存来提高页面的加载速度。然而，使用缓存也会带来一些问题，例如在更新缓存时可能会...

    9 天前
  • ESLint 漫谈：配置 ESLint 来帮助团队开发，提高代码质量

    前言 现代前端项目越来越复杂，代码量越来越大。由于不同开发者的习惯和水平不同，代码风格也会有很大的差异。这使得团队开发时难以维护一个统一的代码风格，导致代码难以阅读、难以维护和易错等问题。

    9 天前
  • Flutter 中 Material Design 的典型实现方法

    Material Design 是 Google 推出的一种设计语言，旨在提供一种整洁、直观、有弹性的界面设计方案。作为 Google 官方推荐的设计语言，Material Design 已经成为移动...

    9 天前
  • PWA 应用如何克服服务端数据不稳定的问题？

    什么是 PWA？ PWA 即 Progressive Web Apps，是一种结合了 Web 和 Native 应用程序的新型应用程序设计方法。它可以给用户带来与 Native 应用相同的体验，如应用...

    9 天前
  • Promise 的错误处理机制的优化及实践

    在前端开发中，Promise 的错误处理机制是非常重要的一部分。它使得我们能够更加优雅地处理异步任务中的错误和异常，从而提高应用的稳定性和可靠性。本文将介绍 Promise 的错误处理机制，并给出一些...

    9 天前
  • Cypress End-to-End 测试操作流程和基本语法

    Cypress 是一个 JavaScript 测试框架，它通过使用 Chromium 浏览器来对 web 应用程序进行端到端 (end-to-end) 测试。本文将为您介绍 Cypress 的执行操作...

    9 天前
  • ES12 中的 AsyncLocalStorage 实现

    在现代的 Web 应用程序中，前端的复杂性不断增加。在处理异步逻辑时，从 ES6 开始，JavaScript 开发人员可以使用 Promise 和 async/await 等工具来简化代码。

    9 天前
  • 如何在 WordPress 中实现性能优化

    随着互联网的不断发展，网站访问速度已经成为用户体验的重要因素之一。许多人使用 WordPress 创建博客或网站，但是如果网站加载速度过慢，可能会严重影响访问者的体验，甚至会导致流失。

    9 天前
  • React Native中使用Expo的Push Notifications技术

    移动设备的推送通知技术是现代移动应用的常见功能之一。React Native作为一种流行的开发框架，提供了强大的推送通知解决方案-Expo的Push Notifications。

    9 天前
  • 无障碍设计之 Web 表单 UI 组件的设计及实现

    Web 表单作为 Web 应用中最常用和最直接的用户界面组件之一，其无障碍设计显得非常重要。在本文中，我们将探讨一些无障碍设计的最佳实践，以及如何实现一个无障碍的 Web 表单 UI 组件。

    9 天前
  • 使用 Custom Elements 和 Push API 构建强大的 Web Push 通知

    Web Push 是一项非常有用的技术，用于在浏览器中推送消息，使网站可以与用户进行更好的交互，并实现更多的功能。本文将介绍如何使用 Custom Elements 和 Push API 来创建一个强...

    9 天前
  • Kubernetes 中的命名和标签技术

    前言 Kubernetes 是一个流行的容器编排系统，用于自动化容器的部署、扩展和管理。在 Kubernetes 中，我们可以使用命名和标签技术来组织和管理集群中的资源。

    9 天前
  • 从 AngularJS 到 Angular 的过渡指南

    随着时间的推移，技术发展日新月异，我们的技术栈也在不断更新。AngularJS 是一个非常流行的前端框架，但它已经被 Angular 取代。Angular 在许多方面与 AngularJS 不同，它的...

    9 天前
  • GraphQL 中如何正确处理变量？

    GraphQL 是一种强类型的查询语言，它允许您在单个请求中声明您需要从服务器获取的数据，并返回精确的响应。在这个过程中，变量是一个重要的概念，因为它允许你在查询中传递参数，并提高了查询的可重用性。

    9 天前
  • 如何在 Mocha 测试框架中捕获 Node.js 应用中的异常

    如何在 Mocha 测试框架中捕获 Node.js 应用中的异常 Node.js 是一个非常流行的服务器端 JavaScript 运行时环境，而 Mocha 是一个开源的测试框架，同时它也是一个流行的...

    9 天前
  • 如何在 Vite 项目中使用 Babel

    Vite 是一个快速的 Web 开发构建工具，它通过利用现代浏览器原生的 ES Modules 功能来实现更快速的构建和热编译，但是由于某些限制，Vite 不支持一些不支持 ES Modules 的浏...

    9 天前

相关推荐

    暂无文章