您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

前端:你应该知道的缓存策略

时间:2023-05-04 12:15:18  来源:今日头条  作者:科技狠活与软件技术
缓存是提高我们网络平台性能的关键之一。了解缓存和专注于前端和客户端的特定用例。

缓存是所有工程师都必须知道的非常有用的软件组件。它是一个横向组件,适用于所有技术领域和架构层,如操作系统、数据平台、后端、前端和其他组件。在本文中,我们将描述什么是缓存,并针对前端和客户端解释具体用例。

什么是缓存?

缓存可以以基本方式定义为数据消费者和数据生产者之间的中间存储器,用于存储和提供将被相同/不同消费者多次访问的数据。除了提高性能外,它在用户可用性方面对数据消费者来说是一个透明层。 通常,数据生产者提供的数据的可重用性是利用缓存优势的关键。性能是使用内存数据库等缓存系统来提供具有低延迟、高吞吐量和并发性的高性能解决方案的另一个原因。

例如,每天有多少人查询天气,他们会重复查询多少次?假设纽约有 1,000 人查询天气,其中 50% 的人每天重复相同的查询两次。在这种情况下,如果我们可以将第一个查询存储在尽可能靠近用户设备的位置,我们将获得两个好处:增加用户体验,因为数据提供得更快,并减少对数据生产者/服务器端的查询次数。输出是更好的用户体验和支持更多并发用户使用该平台的解决方案。

天气查询场景

在高层次上,我们可以以互补的方式应用两种缓存策略:

Client/Consumer Side:缓存的数据存储在消费者或用户端,当我们谈论 Web 解决方案时,通常在浏览器的内存中(也称为私有缓存)。

服务器/生产者端:缓存的数据存储在数据生产者架构的组件中。

客户端和服务器端

与任何其他解决方案一样,缓存具有一系列优势,我们将对其进行总结:

  • 应用程序性能:提供更快的响应时间,因为可以更快地提供数据。
  • 减少服务器端的负载:当我们将缓存应用到以前的系统并重用一段数据时,我们正在避免查询/请求到下一层。
  • 可扩展性和成本改进:随着数据缓存越来越接近消费者,我们以更低的成本提高了解决方案的可扩展性和性能。

靠近客户端的组件更具可扩展性和更便宜,因为三个主要原因:

  • 这些组件侧重于性能和可用性,但一致性较差。
  • 他们只有部分信息:用户使用更多的数据。
  • 在浏览器的本地缓存的情况下,数据生产者没有成本。

成本、性能和一致性图

缓存的最大挑战是数据一致性和数据新鲜度, 这意味着数据如何在整个组织内同步和更新。根据用例,我们会有或多或少的要求限制,因为它与缓存图像相比与库存或销售行为有很大不同。

客户端缓存

谈到客户端缓存,我们可以有不同类型的缓存,我们将在本文中稍微分析一下:

  • HTTP 缓存:这种缓存类型是一种中间缓存系统,因为它部分取决于服务器。
  • 缓存 API:这是一个浏览器 API,允许我们在浏览器中缓存请求。
  • 自定义本地缓存: 前端应用控制缓存存储、过期、失效和更新。

缓存

它在浏览器中缓存对任何资源(csshtml、图像、视频等)的 HTTP 请求,并从前端管理所有与存储、过期、验证、获取等相关的内容。应用程序的观点几乎是透明的,因为它以常规方式发出请求并且浏览 器执行所有“魔术”。

缓存

控制缓存的方法是使用 HTTP Headers,在服务器端,它向 HTTP 响应添加特定于缓存的标头,例如:“Expires: Tue, 30 Jul 2023 05:30:22 GMT”,然后是浏览器知道这个资源可以被缓存,下次客户端(应用程序)请求同一个资源时,如果请求时间在过期日期之前,请求将不会完成,浏览器将返回该资源的本地副本。

它允许您设置响应的伪装方式,因为相同的 URL 可以生成不同的响应(并且它们的缓存应该以不同的方式处理)。例如,在返回一些数据的 API 端点中,我们可以使用请求标头来Content-type指定我们是否需要 JSON 或 CSV 等格式的响应。因此,缓存应根据请求标头与响应一起存储。为此,服务器应该设置响应标头Vary: Accept-Language,让浏览器知道缓存取决于该值。有很多不同的标头来控制缓存流和行为,但深入研究它不是本文的目标。它可能会在另一篇文章中解决。

正如我们之前提到的,这种缓存类型需要服务器设置资源过期、验证等。所以这不是一种纯粹的前端缓存方法或类型,但它是缓存前端应用程序使用的资源的最简单方法之一,它是我们将在下面提到的另一种方式的补充。

与这种缓存类型相关,由于它是中间缓存,我们甚至可以将其委托给客户端和服务器之间的“一块”;例如,CDN、反向代理(例如 Varnish)等。

HTTP 缓存的优点和缺点

缓存接口

它与 HTTP 缓存方法非常相似,但在这种情况下,我们控制哪些请求被存储或从缓存中提取。我们必须管理缓存过期(这并不容易,因为这些缓存被认为“永远存在”)。即使这些 API 在窗口上下文中可用,也非常适合它们在 worker 上下文中的使用。

该缓存非常适合用于离线应用程序。在第一次请求时,我们可以获取并缓存它需要的所有资源(图像、CSS、JS 等),从而允许应用程序离线工作。它在移动应用程序中非常有用,例如,除了天气数据之外,我们的 GPS 系统还可以使用地图。这使我们即使没有连接到服务器也能获得远足路线的所有信息。

它如何在窗口上下文中工作的一个示例:

const url = ‘
https://catfact.ninja/breeds’caches.open('v1').then((cache) => {
cache.match((url).then((res) => {
if (res) {
console.log('it is in cache')
console.log(res.json())
} else {
console.log('it is NOT in cache')
fetch(url) .then(res => {
cache.put('test', res.clone())
})
}
})
})

缓存 API 优缺点

自定义本地缓存

在某些情况下,我们 需要更多地控制缓存数据和失效(不仅仅是过期)。缓存失效不仅仅是检查max-age缓存条目。

想象一下我们上面提到的天气应用程序。该应用程序允许用户更新天气以反映某个地方的真实天气。该应用程序需要针对每个城市执行请求并将温度值从华氏度转换为摄氏度(这是一个简单的示例:在其他用例中计算成本可能更高)。

自定义本地缓存

为了避免向服务器做请求(即使它被缓存),我们可以一次做所有的请求,把所有的数据放在一个我们方便的数据结构中,并存储在,例如在浏览器的IndexedDB中,在LocalStorage、SessionStorage 甚至在内存中(不推荐)。下次我们要显示数据时,我们可以从缓存中获取它,而不仅仅是资源数据(甚至是我们所做的计算),节省网络和计算时间。

我们可以通过在API后面加上发布时间来控制缓存的过期,也可以控制缓存的失效。现在想象一下,用户在其浏览器中添加了一只新猫。我们可以让缓存失效,下次再做请求和计算,或者更进一步,用新数据更新我们的本地缓存。或者,另一个用户可以更改该值,服务器将发送一个事件以将更改通知给所有客户端。例如,使用WebSockets,我们的前端应用程序可以听到这些事件并使缓存无效或只更新缓存。

客户到供应商系统

这种缓存需要我们这边的工作来检查缓存并处理可能使其失效或更新的事件等,但非常适合六边形架构,其中使用端口适配器(存储库)从 API 使用数据可以听到域事件以对更改做出反应并使某些缓存无效或更新。

自定义本地缓存优缺点

这不是缓存通用解决方案。我们需要考虑它是否适合我们的用例,因为它需要在前端应用程序端工作以使缓存无效或发出和处理数据更改事件。在大多数情况下,HTTP 缓存就足够了。

结论

拥有缓存解决方案和良好的策略应该是任何软件架构中必须的, 但我们的解决方案将是不完整的,并且可能没有优化。 缓存是我们最好的朋友,主要是在高性能场景中。看起来技术失效缓存过程是挑战,但 最大的挑战是了解业务场景和用例,以确定在数据新鲜度和一致性方面的要求,使我们能够设计和选择最佳策略。



Tags:缓存   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
1. 缓存系统概述 如上图,是一次最基本的网络请求。用户请求从界面(浏览器或 App 界面)到网络转发、应用服务再到存储(数据库或文件系统),然后返回到界面呈现内容。 随着互联网的普...【详细内容】
2023-05-05  Tags: 缓存  点击:(0)  评论:(0)  加入收藏
缓存是提高我们网络平台性能的关键之一。了解缓存和专注于前端和客户端的特定用例。缓存是所有工程师都必须知道的非常有用的软件组件。它是一个横向组件,适用于所有技术领域...【详细内容】
2023-05-04  Tags: 缓存  点击:(0)  评论:(0)  加入收藏
一、一级缓存1、在⼀个sqlSession中,对User表根据id进行两次查询,查看他们发出sql语句的情况。2、同样是对user表进⾏两次查询,只不过两次查询之间进⾏了⼀次update操作。3、总...【详细内容】
2023-04-27  Tags: 缓存  点击:(15)  评论:(0)  加入收藏
MyBatis具有很多特性,包括支持一级和二级缓存。尽管缓存是提高性能的重要手段,但MyBatis的一级和二级缓存并不被建议使用。所以我们今天就来看看到底会有什么问题?一、什么是My...【详细内容】
2023-04-20  Tags: 缓存  点击:(18)  评论:(0)  加入收藏
DNS缓存是一个临时数据库,用于存储已解释的DNS查询信息。换句话说,每当你访问网站时,你的操作系统和网络浏览器都会保留域名和相应IP地址的记录。这消除对远程DNS服务器重复查...【详细内容】
2023-04-18  Tags: 缓存  点击:(17)  评论:(0)  加入收藏
一、为什么Redis集群的最大槽数是16384个?2^14^=16384、2^16^=65536。如果槽位是65536个,发送心跳信息的消息头是65536/8/1024 = 8k。如果槽位是16384个,发送心跳信息的消息头...【详细内容】
2023-04-13  Tags: 缓存  点击:(21)  评论:(0)  加入收藏
缓存是一种可以帮助网络连接更快的技术,因为需要传输的东西越少越好。许多资源可能非常大,检索的时间和实际成本(例如,在移动设备上)都非常昂贵。HTTP缓存是用于减少HTTP请求次数...【详细内容】
2023-03-30  Tags: 缓存  点击:(25)  评论:(0)  加入收藏
前言通过​​上一篇​​文章的学习,了解了Fiber是什么,知道了Fiber节点可以保存对应的DOM节点。Fiber节点构成的Fiber Tree会对应DOM Tree。前面也提到Fiber是一种新的调和算...【详细内容】
2023-03-28  Tags: 缓存  点击:(24)  评论:(0)  加入收藏
随着互联网应用的不断发展,应用程序越来越复杂,同时面对的数据量也越来越大,对于性能的要求也越来越高。缓存技术的应用已经成为了许多互联网应用的必备技术之一。SpringBoot作...【详细内容】
2023-03-16  Tags: 缓存  点击:(28)  评论:(0)  加入收藏
随着部署数量的加大,面临着资源快速供给、规范化部署、软件版本统一、集中运维管理等诸多挑战。为此,G行启动了分布式缓存平台建设项目,旨在打造一个具备快速部署、集中管理、...【详细内容】
2023-02-28  Tags: 缓存  点击:(37)  评论:(0)  加入收藏
▌简易百科推荐
在Vue项目中,当某一组件需要添加共用的逻辑或全局方法时,我们可以借助mixin来实现代码复用。在本篇文章中,我们将为您详细介绍在Vue项目中如何引入和使用mixin,同时配合实例代码...【详细内容】
2023-05-06  老汤前端  今日头条  Tags:Vue   点击:(2)  评论:(0)  加入收藏
如今,许多 Web 应用都提供了键盘快捷键。通过使用键盘快捷键,用户可以快速地进行常见任务。在前端开发中,实现键盘快捷键功能需要编写大量的 JavaScript 代码。为了简化这个过...【详细内容】
2023-05-05    前端宝藏  Tags:前端   点击:(0)  评论:(0)  加入收藏
缓存是提高我们网络平台性能的关键之一。了解缓存和专注于前端和客户端的特定用例。缓存是所有工程师都必须知道的非常有用的软件组件。它是一个横向组件,适用于所有技术领域...【详细内容】
2023-05-04  科技狠活与软件技术  今日头条  Tags:缓存   点击:(0)  评论:(0)  加入收藏
Vue.js是一种流行的前端框架,用于创建交互式UI。在Vue中,事件修饰符是一种技术,可以增强绑定到DOM事件上的行为。修饰符是指以点号(.)分隔的特殊后缀,通过将修饰符添加到事件名...【详细内容】
2023-04-29  老汤前端  今日头条  Tags:前端   点击:(0)  评论:(0)  加入收藏
整理 | 何苗出品 | CSDN(ID:CSDNnews)当 GPT-4 向大家展示了如何用十秒把一个网站的手绘草图变成功能齐全的网站,包括一些炫酷的js链接按钮,技惊四座。不可避免地,前端工程师们也...【详细内容】
2023-04-28    CSDN  Tags:前端   点击:(3)  评论:(0)  加入收藏
一、前言 前端已死这个说法并不是事实,而是一种极端的观点。事实上,前端开发在当今的互联网行业中扮演着至关重要的角色,它是构建 Web 应用程序所必需的一部分,能够实现动态交互...【详细内容】
2023-04-26  小徐码字  搜狐号  Tags:前端   点击:(6)  评论:(0)  加入收藏
Vue 正在不断发展,目前,在Vue 3 中有多种定义组件的方法。从选项到组合再到类 API,情况大不相同,如果您刚刚开始,可能会感到困惑。让我们定义一个简单的组件并使用所有可用的方...【详细内容】
2023-04-25  web前端开发  微信公众号  Tags:Vue 3   点击:(9)  评论:(0)  加入收藏
近年来,随着互联网技术的兴起,人们对其的用户体验要求也越来越高,这让Web前端一度成为炙手可热的就业岗位。由于其门槛低、薪资高,不少人纷纷转行,让不少还在观望的小白想了解一...【详细内容】
2023-04-21  金信润天  搜狐号  Tags:前端   点击:(13)  评论:(0)  加入收藏
随着前端项目中使用的依赖包越来越多,而其中一部分依赖包可能并未被项目所使用,手动查找这些依赖包既耗时又繁琐。那么,有没有工具能够快速地帮助我们识别和清理项目中未使用的...【详细内容】
2023-04-21  前端充电宝  微信公众号  Tags:前端   点击:(21)  评论:(0)  加入收藏
现在因为有个上传组件他用到了这个mixin文件,这个mixin文件中mounted请求了接口,这样一个页面中如果有多个上传组件的话,那么就会导致一上来就会一次性请求多个重复的接口,有什...【详细内容】
2023-04-18  前端阳光  微信公众号  Tags:Vue   点击:(12)  评论:(0)  加入收藏
站内最新
站内热门
站内头条