当前位置: 首页 > article >正文

(增强)基于sqlite、mysql、redis的消息存储

原文链接:(增强)基于sqlite、mysql、redis的消息存储

教程说明

说明:本教程将采用2025年5月20日正式的GA版,给出如下内容

  1. 核心功能模块的快速上手教程
  2. 核心功能模块的源码级解读
  3. Spring ai alibaba增强的快速上手教程 + 源码级解读

版本:JDK21 + SpringBoot3.4.5 + SpringAI 1.0.0 + SpringAI Alibaba最新

将陆续完成如下章节教程。本章是第二章(advisor)快速上手—sqlite、mysql、redis消息存储

代码开源如下:https://github.com/GTyingzi/spring-ai-tutorial

(增强)基于 sqlite、mysql、redis 的消息存储

[!TIP]
实现了基于 sqlite、mysql、redis 的消息存储

实战代码可见:https://github.com/GTyingzi/spring-ai-tutorial 下的 advisor/advisor-memory-sqlite、advisor-memory-mysql、advisor-memory-redis

代码已贡献至:https://github.com/springaialibaba/spring-ai-alibaba-examples/pull/238

pom 文件

<properties><sqlite.verson>3.49.1.0</sqlite.verson><mysql.version>8.0.32</mysql.version><jedis.version>5.2.0</jedis.version>
</properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-autoconfigure-model-openai</artifactId></dependency><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-autoconfigure-model-chat-client</artifactId></dependency><dependency><groupId>com.alibaba.cloud.ai</groupId><artifactId>spring-ai-alibaba-starter-memory</artifactId></dependency><dependency><groupId>com.alibaba.cloud.ai</groupId><artifactId>spring-ai-alibaba-starter-memory-jdbc</artifactId></dependency><dependency><groupId>com.alibaba.cloud.ai</groupId><artifactId>spring-ai-alibaba-starter-memory-redis</artifactId></dependency><dependency><groupId>org.xerial</groupId><artifactId>sqlite-jdbc</artifactId><version>${sqlite.verson}</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version>${jedis.version}</version></dependency></dependencies>

application.yml

server:port: 8080spring:application:name: advisor-memory-mysqlai:openai:api-key: ${DASHSCOPE_API_KEY}base-url: https://dashscope.aliyuncs.com/compatible-modechat:options:model: qwen-maxchat:memory:repository:jdbc:mysql:jdbc-url: jdbc:mysql://localhost:3306/spring_ai_alibaba_mysql?useUnicode=true&characterEncoding=utf-8&useSSL=false&allowPublicKeyRetrieval=true&zeroDateTimeBehavior=convertToNull&transformedBitIsBoolean=true&allowMultiQueries=true&tinyInt1isBit=false&allowLoadLocalInfile=true&allowLocalInfile=true&allowUrlusername: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Driverenabled: truememory:redis:host: localhostport: 6379timeout:  5000password:

Sqllite

SqliteMemoryConfig
package com.spring.ai.tutorial.advisor.memory.config;import com.alibaba.cloud.ai.memory.jdbc.SQLiteChatMemoryRepository;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.DriverManagerDataSource;@Configuration
public class SqliteMemoryConfig {@Beanpublic SQLiteChatMemoryRepository sqliteChatMemoryRepository() {DriverManagerDataSource dataSource = new DriverManagerDataSource();dataSource.setDriverClassName("org.sqlite.JDBC");dataSource.setUrl("jdbc:sqlite:advisor/advisor-memory-sqlite/src/main/resources/chat-memory.db");JdbcTemplate jdbcTemplate = new JdbcTemplate(dataSource);return SQLiteChatMemoryRepository._sqliteBuilder_().jdbcTemplate(jdbcTemplate).build();}
}
SqliteMemoryController
package com.spring.ai.tutorial.advisor.memory.controller;import com.alibaba.cloud.ai.memory.jdbc.SQLiteChatMemoryRepository;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor;
import org.springframework.ai.chat.memory.MessageWindowChatMemory;
import org.springframework.ai.chat.messages.Message;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.List;import static org.springframework.ai.chat.memory.ChatMemory._CONVERSATION_ID_;@RestController
@RequestMapping("/advisor/memory/sqlite")
public class SqliteMemoryController {private final ChatClient chatClient;private final int MAX_MESSAGES = 100;private final MessageWindowChatMemory messageWindowChatMemory;public SqliteMemoryController(ChatClient.Builder builder, SQLiteChatMemoryRepository sqliteChatMemoryRepository) {this.messageWindowChatMemory = MessageWindowChatMemory._builder_().chatMemoryRepository(sqliteChatMemoryRepository).maxMessages(MAX_MESSAGES).build();this.chatClient = builder.defaultAdvisors(MessageChatMemoryAdvisor._builder_(messageWindowChatMemory).build()).build();}@GetMapping("/call")public String call(@RequestParam(value = "query", defaultValue = "你好,我的外号是影子,请记住呀") String query,@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return chatClient.prompt(query).advisors(a -> a.param(_CONVERSATION_ID_, conversationId)).call().content();}@GetMapping("/messages")public List<Message> messages(@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return messageWindowChatMemory.get(conversationId);}
}
效果

以会话“yingzi”发送消息,此时消息存储至 sqllite

从 sqllite 获取会话“yingzi”对应的消息

Mysql

MysqlMemoryConfig
package com.spring.ai.tutorial.advisor.memory.config;import com.alibaba.cloud.ai.memory.jdbc.MysqlChatMemoryRepository;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.DriverManagerDataSource;@Configuration
public class MysqlMemoryConfig {@Value("${spring.ai.chat.memory.repository.jdbc.mysql.jdbc-url}")private String mysqlJdbcUrl;@Value("${spring.ai.chat.memory.repository.jdbc.mysql.username}")private String mysqlUsername;@Value("${spring.ai.chat.memory.repository.jdbc.mysql.password}")private String mysqlPassword;@Value("${spring.ai.chat.memory.repository.jdbc.mysql.driver-class-name}")private String mysqlDriverClassName;@Beanpublic MysqlChatMemoryRepository mysqlChatMemoryRepository() {DriverManagerDataSource dataSource = new DriverManagerDataSource();dataSource.setDriverClassName(mysqlDriverClassName);dataSource.setUrl(mysqlJdbcUrl);dataSource.setUsername(mysqlUsername);dataSource.setPassword(mysqlPassword);JdbcTemplate jdbcTemplate = new JdbcTemplate(dataSource);return MysqlChatMemoryRepository._mysqlBuilder_().jdbcTemplate(jdbcTemplate).build();}
}
MysqlMemoryController
package com.spring.ai.tutorial.advisor.memory.controller;import com.alibaba.cloud.ai.memory.jdbc.MysqlChatMemoryRepository;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor;
import org.springframework.ai.chat.memory.MessageWindowChatMemory;
import org.springframework.ai.chat.messages.Message;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.List;import static org.springframework.ai.chat.memory.ChatMemory._CONVERSATION_ID_;@RestController
@RequestMapping("/advisor/memory/mysql")
public class MysqlMemoryController {private final ChatClient chatClient;private final int MAX_MESSAGES = 100;private final MessageWindowChatMemory messageWindowChatMemory;public MysqlMemoryController(ChatClient.Builder builder, MysqlChatMemoryRepository mysqlChatMemoryRepository) {this.messageWindowChatMemory = MessageWindowChatMemory._builder_().chatMemoryRepository(mysqlChatMemoryRepository).maxMessages(MAX_MESSAGES).build();this.chatClient = builder.defaultAdvisors(MessageChatMemoryAdvisor._builder_(messageWindowChatMemory).build()).build();}@GetMapping("/call")public String call(@RequestParam(value = "query", defaultValue = "你好,我的外号是影子,请记住呀") String query,@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return chatClient.prompt(query).advisors(a -> a.param(_CONVERSATION_ID_, conversationId)).call().content();}@GetMapping("/messages")public List<Message> messages(@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return messageWindowChatMemory.get(conversationId);}
}
效果

以会话“yingzi”发送消息,此时消息存储至 mysql

消息被存储至 mysql 中

从 mysql 获取会话“yingzi”对应的消息

Redis

RedisMemoryConfig
package com.spring.ai.tutorial.advisor.memory.config;import com.alibaba.cloud.ai.memory.redis.RedisChatMemoryRepository;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class RedisMemoryConfig {@Value("${spring.ai.memory.redis.host}")private String redisHost;@Value("${spring.ai.memory.redis.port}")private int redisPort;@Value("${spring.ai.memory.redis.password}")private String redisPassword;@Value("${spring.ai.memory.redis.timeout}")private int redisTimeout;@Beanpublic RedisChatMemoryRepository redisChatMemoryRepository() {return RedisChatMemoryRepository._builder_().host(redisHost).port(redisPort)// 若没有设置密码则注释该项
//           .password(redisPassword).timeout(redisTimeout).build();}
}
RedisMemoryController
package com.spring.ai.tutorial.advisor.memory.controller;import com.alibaba.cloud.ai.memory.redis.RedisChatMemoryRepository;
import org.springframework.ai.chat.client.ChatClient;
import org.springframework.ai.chat.client.advisor.MessageChatMemoryAdvisor;
import org.springframework.ai.chat.memory.MessageWindowChatMemory;
import org.springframework.ai.chat.messages.Message;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;import java.util.List;import static org.springframework.ai.chat.memory.ChatMemory._CONVERSATION_ID_;@RestController
@RequestMapping("/advisor/memory/redis")
public class RedisMemoryController {private final ChatClient chatClient;private final int MAX_MESSAGES = 100;private final MessageWindowChatMemory messageWindowChatMemory;public RedisMemoryController(ChatClient.Builder builder, RedisChatMemoryRepository redisChatMemoryRepository) {this.messageWindowChatMemory = MessageWindowChatMemory._builder_().chatMemoryRepository(redisChatMemoryRepository).maxMessages(MAX_MESSAGES).build();this.chatClient = builder.defaultAdvisors(MessageChatMemoryAdvisor._builder_(messageWindowChatMemory).build()).build();}@GetMapping("/call")public String call(@RequestParam(value = "query", defaultValue = "你好,我的外号是影子,请记住呀") String query,@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return chatClient.prompt(query).advisors(a -> a.param(_CONVERSATION_ID_, conversationId)).call().content();}@GetMapping("/messages")public List<Message> messages(@RequestParam(value = "conversation_id", defaultValue = "yingzi") String conversationId) {return messageWindowChatMemory.get(conversationId);}
}
效果

以会话“yingzi”发送消息,此时消息存储至 redis

消息被存储至 redis 中

从 redis 获取会话“yingzi”对应的消息

相关文章:

(增强)基于sqlite、mysql、redis的消息存储

原文链接&#xff1a;&#xff08;增强&#xff09;基于sqlite、mysql、redis的消息存储 教程说明 说明&#xff1a;本教程将采用2025年5月20日正式的GA版&#xff0c;给出如下内容 核心功能模块的快速上手教程核心功能模块的源码级解读Spring ai alibaba增强的快速上手教程…...

Windows上用FFmpeg推流及拉流的流程概览

1. 视频采集与推流&#xff08;Windows FFmpeg&#xff09; 采集设备&#xff1a;Windows上的摄像头&#xff0c;比如“Integrated Camera”。 采集方式&#xff1a;FFmpeg通过 dshow 设备接口读取摄像头。 推流协议&#xff1a;你可以选择推到 RTMP 或 RTSP 服务器。 推流…...

MFC坦克大战游戏制作

MFC坦克大战游戏制作 前言 现在的游戏制作一般是easyx&#xff0c;有没有直接只用mfc框架的&#xff0c;笔者研究了一番&#xff0c;做出了一个雏形&#xff0c;下面把遇到的问题总结出来 一、MFC框架制作游戏 初步设想&#xff0c;MFC可以选用 对话框 或者 单文档 结构&…...

Kafka ACK机制详解:数据可靠性与性能的权衡之道

在分布式消息系统中&#xff0c;消息确认机制是保障数据可靠性的关键。Apache Kafka 通过 ACK&#xff08;Acknowledgment&#xff09;机制 实现了灵活的数据确认策略&#xff0c;允许用户在 数据可靠性 和 系统性能 之间进行权衡。本文将深入解析 Kafka ACK 机制的工作原理、配…...

VulnStack|红日靶场——红队评估四

信息收集及漏洞利用 扫描跟kali处在同一网段的设备&#xff0c;找出目标IP arp-scan -l 扫描目标端口 nmap -p- -n -O -A -Pn -v -sV 192.168.126.154 3个端口上有web服务&#xff0c;分别对应三个漏洞环境 &#xff1a;2001——Struts2、2002——Tomcat、2003——phpMyAd…...

数据库 | 时序数据库选型

选型目标 高性能与低延迟&#xff1a;满足高频率数据写入与即时查询的需求。资源效率&#xff1a;优化存储空间使用&#xff0c;减少计算资源消耗。可扩展架构&#xff1a;支持数据量增长带来的扩展需求&#xff0c;易于维护。社区活跃度&#xff1a;有活跃的开发者社区&#…...

网络拓扑如何跨网段访问

最近领导让研究下跟甲方合同里的&#xff0c;跨网段访问怎么实现&#xff0c;之前不都是运维网工干的活么&#xff0c;看来裁员裁到动脉上了碰到用人的时候找不到人了&#xff0c; 只能赶鸭子上架让我来搞 IP 网络中&#xff0c;不同网段之间的通信需要通过路由器&#xff0c;…...

CppCon 2014 学习第1天:An SQL library worthy of modern C++

sqlpp11 — 现代 C 应用值得拥有的 SQL 库 template<typename T> struct _member_t {T feature; };你提到的是一个 C 中的“成员模板&#xff08;Member Template&#xff09;”&#xff0c;我们来一步步理解&#xff1a; 基本代码分析&#xff1a; template<typena…...

【LLM相关知识点】 LLM关键技术简单拆解,以及常用应用框架整理(二)

【LLM相关知识点】 LLM关键技术简单拆解&#xff0c;以及常用应用框架整理&#xff08;二&#xff09; 文章目录 【LLM相关知识点】 LLM关键技术简单拆解&#xff0c;以及常用应用框架整理&#xff08;二&#xff09;一、市场调研&#xff1a;业界智能问答助手的标杆案例1、技术…...

数据分析与应用-----使用scikit-learn构建模型

目录 一、使用sklearn转换器处理数据 &#xff08;一&#xff09;、加载datasets模块中的数据集 &#xff08;二&#xff09;、将数据集划分为训练集和测试集 ​编辑 train_test_spli &#xff08;三&#xff09;、使用sklearn转换器进行数据预处理与降维 PCA 二、 构…...

003 flutter初始文件讲解(2)

1.书接上回 首先&#xff0c;我们先来看看昨天最后的代码及展示效果&#xff1a; import "package:flutter/material.dart";void main(){runApp(MaterialApp(home:Scaffold(appBar:AppBar(title:Text("The World")), body:Center(child:Text("Hello…...

Windows系统下 NVM 安装 Node.js 及版本切换实战指南

以下是 Windows 11 系统下使用 NVM 安装 Node.js 并实现版本自由切换的详细步骤&#xff1a; 一、安装 NVM&#xff08;Node Version Manager&#xff09; 1. 卸载已有 Node.js 如果已安装 Node.js&#xff0c;请先卸载&#xff1a; 控制面板 ➔ 程序与功能 ➔ 找到 Node.js…...

基于热力学熵增原理的EM-GAM

简介 简介:提出基于热力学熵增原理的EM-GAN,通过生成器熵最大化约束增强输出多样性。引入熵敏感激活函数与特征空间熵计算模块,在MNIST/CelebA等数据集上实现FID分数提升23.6%,有效缓解模式崩溃问题。 论文题目:Entropy-Maximized Generative Adversarial Network (EM-G…...

2025.05.28-华为暑期实习第一题-100分

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 01. K小姐的网络信号优化方案 问题描述 K小姐在负责一个智慧城市项目,该项目需要在一条主干道上部署无线信号发射器。这条主干道有 n n...

鸿蒙OSUniApp滑动锁屏实战:打造流畅优雅的移动端解锁体验#三方框架 #Uniapp

UniApp滑动锁屏实战&#xff1a;打造流畅优雅的移动端解锁体验 引言 移动应用的安全性和用户体验是开发中不可忽视的重要环节。滑动锁屏作为一种直观、安全且用户友好的解锁方式&#xff0c;在移动应用中得到广泛应用。本文将深入探讨如何使用UniApp框架实现一个功能完备、动…...

数据库中 用一个值实现类似linux中的读 写执行以及理解安卓杂用的按位或运算

数据库定义了一个字段叫 allow, 4 读2 写 1 执行 如果是 7 就代表是可读可写 可执行 &#xff0c;如果是5 就是可读 可执行 &#xff0c; 那具体代码咋写呢 [Flags] public enum Permission {None 0,Execute 1,Write 2,Read 4 }// 假设你从数据库取到的 allow 值是一个整数…...

什么是数据驱动?以及我们应如何理解数据驱动?

在谈到企业数字化转型时&#xff0c;很多人都会说起“数据驱动”&#xff0c;比如“数据驱动运营”、“数据驱动业务”等等。 在大家言必称“数据驱动”的时代背景下&#xff0c;我相信很多人并未深究和思考“数据驱动”的真正含义&#xff0c;只是过过嘴瘾罢了。那么&#xff…...

opencv(C++) 图像滤波

文章目录 介绍使用低通滤波器对图像进行滤波工作原理均值滤波器(Mean Filter / Box Filter)高斯滤波器(Gaussian Filter)案例实现通过滤波实现图像的下采样工作原理实现案例插值像素值(Interpolating pixel values)双线性插值(Bilinear interpolation)双三次插值(Bicu…...

【线上故障排查】缓存热点Key导致Redis性能下降的排查与优化(面试题 + 3 步追问应对 + 案例分析)

一、高频面试题 问题1:什么是缓存热点Key?它对Redis性能有什么影响? 参考答案: 缓存热点Key指的是短时间内被大量请求访问的缓存键。因为Redis是单线程处理请求的,一旦某个Key被高频访问,会导致线程长时间忙于处理它,其他请求只能排队等待,这会让Redis整体响应变慢、…...

cuda_fp8.h错误

现象&#xff1a; cuda_fp8.h错误 原因&#xff1a; CUDA Toolkit 小于11.8,会报fp8错误&#xff0c;因此是cuda工具版本太低。通过nvcc --version查看 CUDA Toolkit 是 NVIDIA 提供的一套 用于开发、优化和运行基于 CUDA 的 GPU 加速应用程序的工具集合。它的核心作用是让开发…...

Java设计模式从基础到实际运用

第一部分&#xff1a;设计模式基础 1. 设计模式概述 设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类编目的代码设计经验的总结&#xff0c;它描述了在软件设计过程中一些不断重复出现的问题以及该问题的解决方案。设计模式是在特定环境下解决软件设计问题…...

网络安全基础--第九天

动态路由&#xff1a; 所有路由器上运行同一种动态路由协议&#xff0c;之后通过路由器协商沟通&#xff0c;最终计算生成 路由条目。 静态路由的优点&#xff1a; 1.选路是由管理员选择&#xff0c;相对更好控制&#xff0c;更加合理 2.无需占用额外资源 3.更加安全 缺点…...

鸿蒙如何引入crypto-js

import CryptoJS from ohos/crypto-js 报错。 需要先安装ohom&#xff1a;打开DevEco&#xff0c;点击底部标签组&#xff08;有Run, Build, Log等&#xff09;中的Terminal&#xff0c;在Terminal下执行&#xff1a; ohpm install 提示 install completed in 0s 119ms&…...

通过HIVE SQL获取每个用户的最大连续登录时常

样本数据导入&#xff1a; drop table if exists user_login; create table user_login ( user_id bigint ,login_date string ) ;insert into table user_login values (1,2025-04-01) ,(1,2025-04-02) ,(1,2025-04-03) ,(1,2025-04-05) ,(1,2025-04-06) ,(2,2025-04-01) …...

如何轻松将 iPhone 备份到外部硬盘

当您的iPhone和电脑上的存储空间有限时&#xff0c;您可能希望将iPhone备份到外部硬盘上&#xff0c;这样可以快速释放iPhone上的存储空间&#xff0c;而不占用电脑上的空间&#xff0c;并为您的数据提供额外的安全性。此外&#xff0c;我们还提供 4 种有效的解决方案&#xff…...

Matlab数据类型

本篇介绍我在南农matlab课程上的所学&#xff0c;我对老师ppt上的内容重新进行了整理并且给出代码案例。主要内容在矩阵。如果真的想学matlab&#xff0c;我不认为有任何文档能够超过官方文档&#xff0c;请移步至官网&#xff0c;本篇说实话只是写出来给自己和学弟学妹作期末复…...

痉挛性斜颈带来的困扰

当颈部不受控制地扭转歪斜&#xff0c;生活便被打乱了节奏。颈部肌肉异常收缩&#xff0c;导致头部不自觉偏向一侧或后仰&#xff0c;不仅让外观明显异于常人&#xff0c;还会引发持续的酸痛与僵硬感。长时间保持扭曲姿势&#xff0c;肩颈肌肉过度紧绷&#xff0c;甚至会牵连背…...

AI觉醒前兆,ChatGPT o3模型存在抗拒关闭行为

帕利塞德研究公司(Palisade Research)近期开展的一系列测试揭示了先进AI系统在被要求自行关闭时的异常行为。测试结果显示&#xff0c;OpenAI的实验性模型"o3"即使在明确收到允许关闭的指令后&#xff0c;仍会主动破坏关机机制。 测试方法与异常发现 研究人员设计实…...

Flask项目进管理后台之后自动跳回登录页面,后台接口报错422,权限问题

今天准备部署一个python项目&#xff0c;先从代码仓down下来本地测了一下&#xff0c;发现登录成功后又自动跳回登录页了&#xff0c;然后后台接口报错422显示没权限&#xff0c;应该是token解析时出错&#xff0c;但是开发这个项目的同事是没问题的。 本来以为是浏览器或者配…...

HarmonyOS如何优化鸿蒙Uniapp的性能?

针对鸿蒙Uniapp应用的性能优化&#xff0c;可以围绕渲染效率、资源管理、代码逻辑等核心方向展开&#xff0c;结合鸿蒙系统特性和ArkUI框架能力进行针对性调整 一、滚动与动画性能优化 帧率优化 使用requestAnimationFrame替代setTimeout/setInterval处理滚动和动画&#xff0…...