AutoGPT 前端性能守则用模块级 Map 缓存重复函数调用js-cache-function-results 规则详解【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT本文详解 AutoGPT 仓库内置的 Vercel React 性能规范中的js-cache-function-results规则当同一个纯函数在渲染过程中被相同入参反复调用时如何用模块级Map将计算结果缓存起来把 O(N) 次重复求值降为 O(1) 次查找。读完本文你将掌握该规则的完整模式含单值函数的简化写法、失效invalidation时机以及 AutoGPT 前端源码中真实落地的模块级缓存实现。规则背景AutoGPT 仓库中的性能守则体系AutoGPT 的前端是基于 Next.js/React 的应用代码位于 autogpt_platform/frontend。仓库的.claude/skills/目录下内置了一套名为vercel-react-best-practices的性能守则来源是 Vercel Engineering 的 45 条 React/Next.js 优化规则按影响程度分为 8 个优先级类别供 AI Agent 和开发者在编写、审查、重构 React/Next.js 代码时统一遵循见 SKILL.md。该规则文件 js-cache-function-results.md 的元信息如下字段值含义titleCache Repeated Function Calls缓存重复的函数调用impactMEDIUM中等影响避免冗余计算tagsjavascript, cache, memoization, performanceJS 性能 / 缓存 / 记忆化在整体守则体系中它属于第 7 类JavaScript Performance前缀js-优先级 LOW-MEDIUM即单点收益不大、但在热路径上累积起来可观的微优化。它的完整展开版位于编译文档 AGENTS.md 第 7.4 节「Cache Repeated Function Calls」。核心原则用模块级 Map 缓存纯函数的重复调用规则原文的核心陈述只有一句话当同一个函数在渲染期间被相同的入参反复调用时用一个模块级module-levelMap缓存函数结果。反例重复计算function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // slugify() called 100 times for same project names const slug slugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }问题在于projects数组可能包含上百个条目但项目名往往有大量重复同一项目多个版本、同名条目等。每次渲染都会对相同字符串重复执行slugify()计算完全冗余。正例带缓存的函数// Module-level cache const slugifyCache new Mapstring, string() function cachedSlugify(text: string): string { if (slugifyCache.has(text)) { return slugifyCache.get(text)! } const result slugify(text) slugifyCache.set(text, result) return result } function ProjectList({ projects }: { projects: Project[] }) { return ( div {projects.map(project { // Computed only once per unique project name const slug cachedSlugify(project.name) return ProjectCard key{project.id} slug{slug} / })} /div ) }这个模式的关键点缓存声明在模块作用域const slugifyCache new Mapstring, string()而不是组件内部。Map 在模块加载时创建一次跨所有渲染、跨所有组件实例共享。先查后算has()命中则直接返回未命中才执行真正的slugify()再set()回填。计算次数与“唯一入参数量”成正比无论渲染多少次、列表多长每个唯一的项目名只被 slugify 一次。单值函数的简化模式对于无入参或入参固定、只产生单一结果的函数不必动用 Map一个模块级变量即可let isLoggedInCache: boolean | null null function isLoggedIn(): boolean { if (isLoggedInCache ! null) { return isLoggedInCache } isLoggedInCache document.cookie.includes(auth) return isLoggedInCache } // Clear cache when auth changes function onAuthChange() { isLoggedInCache null }这里有两个值得注意的细节用null作为“未计算”哨兵值而非undefined或false——因为false是合法结果值不能与“尚未计算”混淆。提供了显式的失效入口onAuthChange()当认证状态变化登录/登出时把缓存置回null下次调用重新从document.cookie读取。这说明模块级缓存不是“算一次永远算”而是**“在输入可能失效前算一次”**失效策略必须与数据的变更来源配套。为什么是 Map而不是 Hook规则原文给出了明确理由Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.即Map 不依赖 React 生命周期可以在纯工具函数、事件回调、非组件模块中随时使用而useMemo/useCallback只能在函数组件内调用且缓存随组件卸载销毁。选型原则可以概括为场景推荐手段原因纯函数、工具函数、事件处理器中的重复计算模块级 Map / 模块级变量作用域最广不依赖组件组件渲染中依赖 props/state 的计算useMemo随组件状态变化自动重算服务端请求内去重如鉴权查询React.cache()规则体系中server-cache-react的职责这也提示了模块级 Map 的适用边界它最适合纯函数相同入参必得相同输出。若函数依赖会变化的外部状态如时间、全局可变对象则必须像onAuthChange()那样配套失效逻辑否则缓存会返回过期结果。失效Invalidation策略对“结果会随外部变化”的缓存AutoGPT 守则体系中同目录的姊妹规则 js-cache-storage.mdCache Storage API Calls给出了更完整的失效模板可与本规则配合使用window.addEventListener(storage, (e) { if (e.key) storageCache.delete(e.key) }) document.addEventListener(visibilitychange, () { if (document.visibilityState visible) { storageCache.clear() } })要点是跨标签页的storage事件删除单键、页面重新可见时整体clear()。本规则的isLoggedInCache则走“事件驱动的单点置空”路线认证变更时置null。两者共同体现同一原则模块级缓存的收益来自“省掉重复计算”代价是“可能读到旧值”失效路径必须覆盖数据的所有写入方。仓库源码印证AutoGPT 前端的真实落地守则并非纸上谈兵AutoGPT 前端源码中就有与本规则同构的模块级 Map 缓存实现。以代码高亮插件 streamdown-code-plugin.ts 为例const MAX_CACHE_SIZE 500; const tokenCache new Mapstring, HighlightResult(); const pendingCallbacks new Mapstring, SetHighlightCallback(); const inFlightLanguageLoads new Mapstring, Promisevoid();这个实现比规则示例多了一层工程化细节复合缓存键getCacheKey()用语言:主题列表:代码哈希拼出键见 streamdown-code-plugin.ts保证“相同输入 相同渲染条件”才命中缓存避免不同主题下串味容量上限MAX_CACHE_SIZE 500规则示例中的slugifyCache没有上限实际落地时通常要防止无界增长占用内存可结合 LRU 或定期清理控制规模。此外Copilot 面板的 useArtifactContent.ts/copilot/components/ArtifactPanel/components/useArtifactContent.ts#L16) 也以模块级const contentCache new Mapstring, string()缓存会话内容说明该模式在 AutoGPT 前端列表渲染、会话数据、代码高亮等热路径是被一致采用的实践。与相邻规则的边界划分js-前缀的 12 条 JS 性能规则各自解决不同的冗余问题使用本规则时注意别与它们混淆js-index-maps.md / js-set-map-lookups.md针对“重复查找”——先把数组建成索引 Map 再 O(1) 查询不涉及函数求值js-cache-property-access.md针对循环内的重复属性访问缓存的是对象属性而非函数结果js-cache-storage.md针对localStorage/document.cookie等同步 I/O 的重复读取本规则 js-cache-function-results.md专门针对重复的函数求值把昂贵纯函数的结果记忆化。小结js-cache-function-results规则给出的是一种成本极低、适用面很广的记忆化手段模块级Map 先查后算单值场景降级为模块级变量 哨兵null 显式失效函数。它不要求引入任何依赖也不绑定 React 生命周期因此能覆盖从组件渲染到工具函数、事件回调的所有场景落地时再参照 AutoGPT 前端 streamdown-code-plugin.ts 的做法补充复合缓存键与容量上限即可安全地用于生产热路径。【免费下载链接】AutoGPTAutoGPT is the vision of accessible AI for everyone, to use and to build on. Our mission is to provide the tools, so that you can focus on what matters.项目地址: https://gitcode.com/GitHub_Trending/au/AutoGPT创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考