AutoGPT 前端性能守则：用模块级 Map 缓存重复函数调用（js-cache-function-results 规则详解）

本文详解 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 的元信息如下：

字段	值	含义
title	Cache Repeated Function Calls	缓存重复的函数调用
impact	MEDIUM	中等影响（避免冗余计算）
tags	javascript, cache, memoization, performance	JS 性能 / 缓存 / 记忆化

在整体守则体系中它属于第 7 类 JavaScript Performance（前缀 js-，优先级 LOW-MEDIUM），即单点收益不大、但在热路径上累积起来可观的微优化。它的完整展开版位于编译文档 AGENTS.md 第 7.4 节「Cache Repeated Function Calls」。

核心原则：用模块级 Map 缓存纯函数的重复调用

规则原文的核心陈述只有一句话：

当同一个函数在渲染期间被相同的入参反复调用时，用一个模块级（module-level）Map 缓存函数结果。

反例：重复计算

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 Map<string, 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>
  )
}

这个模式的关键点：

1. 缓存声明在模块作用域（const slugifyCache = new Map<string, string>()），而不是组件内部。Map 在模块加载时创建一次，跨所有渲染、跨所有组件实例共享。
2. 先查后算：has() 命中则直接返回；未命中才执行真正的 slugify()，再 set() 回填。
3. 计算次数与“唯一入参数量”成正比：无论渲染多少次、列表多长，每个唯一的项目名只被 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.md（Cache 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 Map<string, HighlightResult>();
const pendingCallbacks = new Map<string, Set<HighlightCallback>>();
const inFlightLanguageLoads = new Map<string, Promise<void>>();

这个实现比规则示例多了一层工程化细节：

• 复合缓存键：getCacheKey() 用 语言:主题列表:代码哈希 拼出键（见 streamdown-code-plugin.ts），保证“相同输入 + 相同渲染条件”才命中缓存，避免不同主题下串味；
• 容量上限 MAX_CACHE_SIZE = 500：规则示例中的 slugifyCache 没有上限，实际落地时通常要防止无界增长占用内存，可结合 LRU 或定期清理控制规模。

此外，Copilot 面板的 useArtifactContent.ts/copilot/components/ArtifactPanel/components/useArtifactContent.ts#L16) 也以模块级 const contentCache = new Map<string, 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 的做法补充复合缓存键与容量上限，即可安全地用于生产热路径。