尧图网页设计  降到 O(1))
AutoGPT 前端性能规范实战用 Map 建立索引表把重复查找从 O(n) 降到 O(1)【免费下载链接】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-index-maps.md 展开讲解为重复查找建立索引 Map这一 JavaScript 性能优化模式的核心思想、复杂度推导与量化收益并结合 AutoGPT 平台前端中useExpertMap、edgeStore、草稿 diff 等真实源码展示该模式在 React Hooks、Zustand Store 和纯函数中的落地写法与注意事项如引用稳定性、键唯一性、与Set的分工。规则定位JavaScript Performance 类别中的索引表模式该文档位于 AutoGPT 仓库.claude/skills/目录下的 vercel-react-best-practices 技能 中是 Vercel Engineering 维护的 React / Next.js 性能优化指南的一部分。整套指南共 45 条规则、8 个类别按影响程度排序js-index-maps属于第 7 类JavaScript Performance影响级别 LOW-MEDIUM与js-set-map-lookups、js-combine-iterations、js-hoist-regexp等纯 JS 层面的优化规则并列。规则文件的 Frontmatter 元数据本身就定义了它的量化收益预期--- title: Build Index Maps for Repeated Lookups impact: LOW-MEDIUM impactDescription: 1M ops to 2K ops tags: javascript, map, indexing, optimization, performance ---impact: LOW-MEDIUM单条规则收益不算 CRITICAL相比消除瀑布式异步、减小包体积但属于几乎无成本、纯收益的改动impactDescription: 1M ops to 2K ops在典型数据规模1000 条订单 × 1000 个用户下操作数从约 100 万降到约 2000在合并版文档 AGENTS.md 中该规则被编为7.2 节与规则文件内容一致可作为交叉引用。这条规则的一句话核心是当对同一批数据按同一个键做多次.find()查找时应该先构建一次 Map再做 O(1) 查找。核心模式从每次 O(n)到一次建表 每次 O(1)原文档给出的反模式Incorrect是嵌套在map循环里的findfunction processOrders(orders: Order[], users: User[]) { return orders.map(order ({ ...order, user: users.find(u u.id order.userId) })) }问题在于orders.map每处理一条订单users.find就要从头扫描整个users数组。若orders有 M 条、users有 N 个总比较次数接近 M×N即O(M·N)——查找次数越多、被查数组越长退化越明显。规则给出的正确写法Correct是先把users按id建立索引表function processOrders(orders: Order[], users: User[]) { const userById new Map(users.map(u [u.id, u])) return orders.map(order ({ ...order, user: userById.get(order.userId) })) }复杂度拆解如下步骤复杂度说明new Map(users.map(u [u.id, u]))O(N)建表只做一次线性扫描 usersuserById.get(order.userId)O(1)均摊Map 内部按哈希表实现按键取值整体O(N M)相比 O(M·N) 是数量级的改善文档给出的量化结论Map 只构建一次O(n)之后所有查找都是 O(1)对于 1000 条订单 × 1000 个用户的场景操作数从 1M 降到 2K1000 次查找 1000 次建表约 2000 次操作对比 1000×10001,000,000 次比较。两个使用要点值得注意键必须是可哈希的值u.id通常是 string 或 number 这类原始类型Map.get的相等性基于SameValueZero与对象不同因此用原始类型做键是最直接可靠的键重复时的覆盖语义Map构造器遇到重复键是后者覆盖前者若上游数据可能出现重复 id建表前需要保证键唯一或自行去重否则索引到的元素不是你预期的那一个。与姊妹规则的关系Set管成员判定Map管取值同目录下还有一条紧密相关的规则 js-set-map-lookups.mdUse Set/Map for O(1) Lookups——把数组转成Set/Map以支持重复的成员检查// 反模式每次 O(n) const allowedIds [a, b, c, ...] items.filter(item allowedIds.includes(item.id)) // 正确每次 O(1) const allowedIds new Set([a, b, c, ...]) items.filter(item allowedIds.has(item.id))两者可以这样分工理解只需要判断是否存在成员判定→ 用Set.has()对应js-set-map-lookups需要根据键取回关联对象外连接式查找如订单 → 用户→ 用Map.get()对应本篇js-index-maps。实际代码里二者经常同时出现AutoGPT 的草稿 diff 工具 draft-utils.ts 就是一个典型例子// 成员判定用 Set const draftNodeIds new Set(draftNodes.map((n) n.id)); const currentNodeIds new Set(currentNodes.map((n) n.id)); const nodesAdded draftNodes.filter((n) !currentNodeIds.has(n.id)).length; // 按 id 取回对象做内容比较用 Map const draftNodeMap new Map(draftNodes.map((n) [n.id, cleanNode(n)])); const currentNodeMap new Map(currentNodes.map((n) [n.id, cleanNode(n)])); for (const [id, draftClean] of draftNodeMap) { const currentClean currentNodeMap.get(id); if (currentClean !isEqual(draftClean, currentClean)) { nodesModified; } }这里先各建一套Setadded/removed 统计和Mapmodified 统计把原本双循环逐对比较的 O(N²) diff 降为线性。这段源码印证了规则的一般化形态只要出现对每个元素去另一个集合里找对应项的结构索引表就是标准解法。AutoGPT 前端中的真实落地1. React Hook 场景useExpertMap—— 建表 引用稳定性CoPilot 对话树需要把专家列表按 id 提供给各层组件查询。useExpertMap.ts/copilot/useExpertMap.ts) 展示了这条规则在 React 中的完整形态const EMPTY_MAP: ExpertIdentityMap new Map(); export function useExpertMap() { const expertsQuery useListExperts({ /* ... */ }); // Memoized on purpose: the identities read out of this map are passed as // props (expertIdentity) down the whole chat tree, so rebuilding it every // render would hand every consumer a fresh object identity each time. const expertsById useMemo(() { const experts expertsQuery.data; if (!experts) return EMPTY_MAP; return new Map( experts.map((expert) [ expert.id, { id: expert.id, name: expert.name, avatarUrl: expert.avatar_url ?? null, role: expert.role ?? null, }, ]), ); }, [expertsQuery.data]); // ... }这段源码比规则文件本身多揭示了三个 React 特有的要点索引表要放进useMemonew Map(...)每次执行都会产生新的 Map 实例。若 Map或从它取出的值会作为 props 沿组件树下传每帧重建会让所有消费方拿到新鲜的对象身份触发不必要的子树重渲染。源码注释明确说明了这一动机——这正是建表只做一次原则在渲染循环里的投影用模块级常量EMPTY_MAP兜底空数据查询未返回时返回同一个空 Map 引用保证无数据分支的引用也是稳定的避免在空态下抖动建表时顺手裁剪字段experts.map(...)里只保留id / name / avatarUrl / role四个字段等价于指南中只传递客户端真正需要的字段的序列化思路让索引表里存的是轻量视图对象而不是完整 API 响应。2. Zustand Store 场景edgeStore.upsertMany—— 用 Map 做批量去重合并可视化工作流编辑器的边集合存储在 edgeStore.ts/build/stores/edgeStore.ts#L89-L96) 中批量更新接口upsertMany用 Map 完成了按 id 覆盖 去重 保序三合一upsertMany: (edges) set((state) { const byKey new Map(state.edges.map((e) [e.id, e])); edges.forEach((e) { byKey.set(e.id, e); }); return { edges: Array.from(byKey.values()) }; }),逻辑是先把现有state.edges按id建表O(n)再对新传入的边逐条set同 id 覆盖实现 upsert 语义最后Array.from(byKey.values())还原为数组——Map 的迭代序即插入序因此原有边顺序不变新边追加在尾部。这里建一次表 O(1) 覆盖的模式与processOrders示例是同一思想只是把查找换成了批量合并。3. 数据聚合场景useSitrepItems—— 外键关联查询Library 页面的态势概览 useSitrepItems.ts/library/components/SitrepItem/useSitrepItems.ts#L29-L33) 需要把执行记录列表按graph_id关联回对应的 agent这正是文档中orders × users结构在生产代码里的翻版return useMemo(() { if (agents.length 0) return []; const graphIdToAgent new Map(agents.map((a) [a.graph_id, a])); const agentExecutions groupByAgent(executions ?? [], graphIdToAgent); // ... }, [agents, executions]);执行记录可能有成百上千条每条都要知道它属于哪个 agent。若不建表groupByAgent内部对每条执行记录做一次agents.find(a a.graph_id exec.graph_id)复杂度就是执行数 × agent 数先建graphIdToAgent索引表后整轮分组就是线性的。同样useMemo的依赖是agents与executions数据本身而非每次渲染——再次体现表建一次查无数次。实践清单什么时候用、怎么用结合规则文档与上述源码可以提炼出如下实操判断触发条件循环体内map/filter/ 自定义 for对另一个数组做find/findIndex/findLast且按同一键匹配——这是最典型、收益最确定的场景建表时机索引 Map 在循环外构建一次在 React 组件内用useMemo缓存依赖原始数据而非渲染次数在 Store / 纯函数内则随数据变更即时重建键的选择优先使用id等原始类型主键确保唯一性警惕Map构造器的后写覆盖语义get返回undefined的处理与find一致未命中时为undefined如processOrders中user: userById.get(order.userId)下游渲染需容错例如useExpertMap消费方对空 MapEMPTY_MAP已有约定与Set的分工只要在/不在用Set.has要取对象用Map.get两者可在同一函数中配合使用见draft-utils.ts的 diff 实现不适用的情形单次查找只调一次find建表反而多付一次 O(n) 建表成本保持find更清晰极小数组几个元素上 Map 的常数开销与可读性损失可能大于收益——这也解释了该规则被定为 LOW-MEDIUM 而非 CRITICAL。小结js-index-maps.md 这条规则给出了一个成本极低、收益可量化的优化范式遇到同键多次find构建一次 O(n) 的索引 Map把每次查找降到 O(1)在千级数据规模下把百万次比较压缩到约两千次操作。AutoGPT 平台前端在 CoPilot 专家查询useExpertMap.ts、工作流边集合批量更新edgeStore.ts、Library 执行聚合useSitrepItems.ts与 Dexie 草稿 diffdraft-utils.ts中都有对应实现并额外示范了 React 语境下的关键细节——用useMemo和模块级空表常量保证引用稳定让索引表既快又不会成为重渲染的来源。在 AutoGPT 仓库中维护或生成类似的数据关联、分组、upsert 代码时这套建表一次、查找 O(1)的写法值得作为默认选择。【免费下载链接】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），仅供参考 AutoGPT 前端性能规范实战：用 Map 建立索引表，把重复查找从 O(n) 降到 O(1)
AutoGPT 前端性能规范实战用 Map 建立索引表把重复查找从 O(n) 降到 O(1)【免费下载链接】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-index-maps.md 展开讲解为重复查找建立索引 Map这一 JavaScript 性能优化模式的核心思想、复杂度推导与量化收益并结合 AutoGPT 平台前端中useExpertMap、edgeStore、草稿 diff 等真实源码展示该模式在 React Hooks、Zustand Store 和纯函数中的落地写法与注意事项如引用稳定性、键唯一性、与Set的分工。规则定位JavaScript Performance 类别中的索引表模式该文档位于 AutoGPT 仓库.claude/skills/目录下的 vercel-react-best-practices 技能 中是 Vercel Engineering 维护的 React / Next.js 性能优化指南的一部分。整套指南共 45 条规则、8 个类别按影响程度排序js-index-maps属于第 7 类JavaScript Performance影响级别 LOW-MEDIUM与js-set-map-lookups、js-combine-iterations、js-hoist-regexp等纯 JS 层面的优化规则并列。规则文件的 Frontmatter 元数据本身就定义了它的量化收益预期--- title: Build Index Maps for Repeated Lookups impact: LOW-MEDIUM impactDescription: 1M ops to 2K ops tags: javascript, map, indexing, optimization, performance ---impact: LOW-MEDIUM单条规则收益不算 CRITICAL相比消除瀑布式异步、减小包体积但属于几乎无成本、纯收益的改动impactDescription: 1M ops to 2K ops在典型数据规模1000 条订单 × 1000 个用户下操作数从约 100 万降到约 2000在合并版文档 AGENTS.md 中该规则被编为7.2 节与规则文件内容一致可作为交叉引用。这条规则的一句话核心是当对同一批数据按同一个键做多次.find()查找时应该先构建一次 Map再做 O(1) 查找。核心模式从每次 O(n)到一次建表 每次 O(1)原文档给出的反模式Incorrect是嵌套在map循环里的findfunction processOrders(orders: Order[], users: User[]) { return orders.map(order ({ ...order, user: users.find(u u.id order.userId) })) }问题在于orders.map每处理一条订单users.find就要从头扫描整个users数组。若orders有 M 条、users有 N 个总比较次数接近 M×N即O(M·N)——查找次数越多、被查数组越长退化越明显。规则给出的正确写法Correct是先把users按id建立索引表function processOrders(orders: Order[], users: User[]) { const userById new Map(users.map(u [u.id, u])) return orders.map(order ({ ...order, user: userById.get(order.userId) })) }复杂度拆解如下步骤复杂度说明new Map(users.map(u [u.id, u]))O(N)建表只做一次线性扫描 usersuserById.get(order.userId)O(1)均摊Map 内部按哈希表实现按键取值整体O(N M)相比 O(M·N) 是数量级的改善文档给出的量化结论Map 只构建一次O(n)之后所有查找都是 O(1)对于 1000 条订单 × 1000 个用户的场景操作数从 1M 降到 2K1000 次查找 1000 次建表约 2000 次操作对比 1000×10001,000,000 次比较。两个使用要点值得注意键必须是可哈希的值u.id通常是 string 或 number 这类原始类型Map.get的相等性基于SameValueZero与对象不同因此用原始类型做键是最直接可靠的键重复时的覆盖语义Map构造器遇到重复键是后者覆盖前者若上游数据可能出现重复 id建表前需要保证键唯一或自行去重否则索引到的元素不是你预期的那一个。与姊妹规则的关系Set管成员判定Map管取值同目录下还有一条紧密相关的规则 js-set-map-lookups.mdUse Set/Map for O(1) Lookups——把数组转成Set/Map以支持重复的成员检查// 反模式每次 O(n) const allowedIds [a, b, c, ...] items.filter(item allowedIds.includes(item.id)) // 正确每次 O(1) const allowedIds new Set([a, b, c, ...]) items.filter(item allowedIds.has(item.id))两者可以这样分工理解只需要判断是否存在成员判定→ 用Set.has()对应js-set-map-lookups需要根据键取回关联对象外连接式查找如订单 → 用户→ 用Map.get()对应本篇js-index-maps。实际代码里二者经常同时出现AutoGPT 的草稿 diff 工具 draft-utils.ts 就是一个典型例子// 成员判定用 Set const draftNodeIds new Set(draftNodes.map((n) n.id)); const currentNodeIds new Set(currentNodes.map((n) n.id)); const nodesAdded draftNodes.filter((n) !currentNodeIds.has(n.id)).length; // 按 id 取回对象做内容比较用 Map const draftNodeMap new Map(draftNodes.map((n) [n.id, cleanNode(n)])); const currentNodeMap new Map(currentNodes.map((n) [n.id, cleanNode(n)])); for (const [id, draftClean] of draftNodeMap) { const currentClean currentNodeMap.get(id); if (currentClean !isEqual(draftClean, currentClean)) { nodesModified; } }这里先各建一套Setadded/removed 统计和Mapmodified 统计把原本双循环逐对比较的 O(N²) diff 降为线性。这段源码印证了规则的一般化形态只要出现对每个元素去另一个集合里找对应项的结构索引表就是标准解法。AutoGPT 前端中的真实落地1. React Hook 场景useExpertMap—— 建表 引用稳定性CoPilot 对话树需要把专家列表按 id 提供给各层组件查询。useExpertMap.ts/copilot/useExpertMap.ts) 展示了这条规则在 React 中的完整形态const EMPTY_MAP: ExpertIdentityMap new Map(); export function useExpertMap() { const expertsQuery useListExperts({ /* ... */ }); // Memoized on purpose: the identities read out of this map are passed as // props (expertIdentity) down the whole chat tree, so rebuilding it every // render would hand every consumer a fresh object identity each time. const expertsById useMemo(() { const experts expertsQuery.data; if (!experts) return EMPTY_MAP; return new Map( experts.map((expert) [ expert.id, { id: expert.id, name: expert.name, avatarUrl: expert.avatar_url ?? null, role: expert.role ?? null, }, ]), ); }, [expertsQuery.data]); // ... }这段源码比规则文件本身多揭示了三个 React 特有的要点索引表要放进useMemonew Map(...)每次执行都会产生新的 Map 实例。若 Map或从它取出的值会作为 props 沿组件树下传每帧重建会让所有消费方拿到新鲜的对象身份触发不必要的子树重渲染。源码注释明确说明了这一动机——这正是建表只做一次原则在渲染循环里的投影用模块级常量EMPTY_MAP兜底空数据查询未返回时返回同一个空 Map 引用保证无数据分支的引用也是稳定的避免在空态下抖动建表时顺手裁剪字段experts.map(...)里只保留id / name / avatarUrl / role四个字段等价于指南中只传递客户端真正需要的字段的序列化思路让索引表里存的是轻量视图对象而不是完整 API 响应。2. Zustand Store 场景edgeStore.upsertMany—— 用 Map 做批量去重合并可视化工作流编辑器的边集合存储在 edgeStore.ts/build/stores/edgeStore.ts#L89-L96) 中批量更新接口upsertMany用 Map 完成了按 id 覆盖 去重 保序三合一upsertMany: (edges) set((state) { const byKey new Map(state.edges.map((e) [e.id, e])); edges.forEach((e) { byKey.set(e.id, e); }); return { edges: Array.from(byKey.values()) }; }),逻辑是先把现有state.edges按id建表O(n)再对新传入的边逐条set同 id 覆盖实现 upsert 语义最后Array.from(byKey.values())还原为数组——Map 的迭代序即插入序因此原有边顺序不变新边追加在尾部。这里建一次表 O(1) 覆盖的模式与processOrders示例是同一思想只是把查找换成了批量合并。3. 数据聚合场景useSitrepItems—— 外键关联查询Library 页面的态势概览 useSitrepItems.ts/library/components/SitrepItem/useSitrepItems.ts#L29-L33) 需要把执行记录列表按graph_id关联回对应的 agent这正是文档中orders × users结构在生产代码里的翻版return useMemo(() { if (agents.length 0) return []; const graphIdToAgent new Map(agents.map((a) [a.graph_id, a])); const agentExecutions groupByAgent(executions ?? [], graphIdToAgent); // ... }, [agents, executions]);执行记录可能有成百上千条每条都要知道它属于哪个 agent。若不建表groupByAgent内部对每条执行记录做一次agents.find(a a.graph_id exec.graph_id)复杂度就是执行数 × agent 数先建graphIdToAgent索引表后整轮分组就是线性的。同样useMemo的依赖是agents与executions数据本身而非每次渲染——再次体现表建一次查无数次。实践清单什么时候用、怎么用结合规则文档与上述源码可以提炼出如下实操判断触发条件循环体内map/filter/ 自定义 for对另一个数组做find/findIndex/findLast且按同一键匹配——这是最典型、收益最确定的场景建表时机索引 Map 在循环外构建一次在 React 组件内用useMemo缓存依赖原始数据而非渲染次数在 Store / 纯函数内则随数据变更即时重建键的选择优先使用id等原始类型主键确保唯一性警惕Map构造器的后写覆盖语义get返回undefined的处理与find一致未命中时为undefined如processOrders中user: userById.get(order.userId)下游渲染需容错例如useExpertMap消费方对空 MapEMPTY_MAP已有约定与Set的分工只要在/不在用Set.has要取对象用Map.get两者可在同一函数中配合使用见draft-utils.ts的 diff 实现不适用的情形单次查找只调一次find建表反而多付一次 O(n) 建表成本保持find更清晰极小数组几个元素上 Map 的常数开销与可读性损失可能大于收益——这也解释了该规则被定为 LOW-MEDIUM 而非 CRITICAL。小结js-index-maps.md 这条规则给出了一个成本极低、收益可量化的优化范式遇到同键多次find构建一次 O(n) 的索引 Map把每次查找降到 O(1)在千级数据规模下把百万次比较压缩到约两千次操作。AutoGPT 平台前端在 CoPilot 专家查询useExpertMap.ts、工作流边集合批量更新edgeStore.ts、Library 执行聚合useSitrepItems.ts与 Dexie 草稿 diffdraft-utils.ts中都有对应实现并额外示范了 React 语境下的关键细节——用useMemo和模块级空表常量保证引用稳定让索引表既快又不会成为重渲染的来源。在 AutoGPT 仓库中维护或生成类似的数据关联、分组、upsert 代码时这套建表一次、查找 O(1)的写法值得作为默认选择。【免费下载链接】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），仅供参考