 消除独立请求的水瀑布)
Langfuse 前端异步优化指南用 Promise.all() 消除独立请求的水瀑布【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse本指南以仓库内 Vercel React 最佳实践技能规则 async-parallel.md 为核心系统讲解如何用Promise.all()并发执行相互独立的异步操作从而将 N 次串行网络往返压缩为 1 次。文章同时结合 Langfuse 仓库Next.js 前端 Node.js worker 共享 TypeScript 包的真实代码给出可直接落地、可复制的并行化改造方案。规则速览什么是 Promise.all() 并行化在 vercel-react-best-practices 技能集中async-parallel属于第 1 优先级「消除水瀑布Eliminating Waterfalls」类别影响等级为CRITICAL官方标注的性能提升区间为2–10 倍。规则原文只有一句话当异步操作之间没有任何相互依赖时用Promise.all()并发执行它们。底层原理是await会挂起当前async函数而创建 Promise 本身不会阻塞。当你写出fetchUser()、fetchPosts()、fetchComments()三个调用时只要不立刻await三个请求就会同时发出只有Promise.all()的await会等待全部完成。因此// 错误顺序执行3 次网络往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // 正确并行执行1 次网络往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])每次多余的串行await都会叠加完整的网络延迟DNS、TLS、排队、服务器处理、响应传输。当调用链出现 3 个独立请求时串行总耗时约为并行方案的 3 倍这就是规则标注 2–10× 提升的来源。为什么这是最优先的优化水瀑布是头号性能杀手在技能集的完整汇编 AGENTS.md 中开篇即给出明确论断Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains. 水瀑布是头号性能杀手每个顺序 await 都会累加完整的网络延迟消除它们能带来最大的收益。该类别下的五条规则async-defer-await、async-dependencies、async-api-routes、async-parallel、async-suspense-boundaries全部标为 CRITICAL覆盖了水瀑布的三种典型形态形态对应规则文件解决思路无依赖的独立操作串行执行async-parallel.mdPromise.all()一次并发全部发起部分依赖的操作被整体串行化async-dependencies.md先创建所有 Promise最后统一awaitawait 被提前到不需要它的分支/路径async-defer-await.md把await下沉到实际使用它的代码分支async-parallel解决的是最简单也最常见的第一种操作之间完全独立没有任何数据依赖。判定标准什么时候该用 Promise.all()判断一个操作组合是否适合Promise.all()只需问两个问题各操作之间是否有数据依赖比如fetchPosts()需要user.id作为参数那它就不属于本规则的适用场景应参考async-dependencies的部分依赖并行化方案。是否已经返回了 Promise只要函数是async或返回Promise调用时不写await就不会阻塞——这正是并行化的前提。一个实用的改造套路是先删掉中间所有await把结果收集成 Promise 数组最后只用一次await Promise.all([...])。// 改造前3 个 await 串行 async function loadDashboard() { const projects await listProjects(projectId) // 往返 1 const traces await listTraces(projectId) // 往返 2 const scores await listScores(projectId) // 往返 3 return { projects, traces, scores } } // 改造后3 个请求同时发出 async function loadDashboard() { const [projects, traces, scores] await Promise.all([ listProjects(projectId), listTraces(projectId), listScores(projectId), ]) return { projects, traces, scores } }深度语义Promise.all() 的四个关键行为要让并行化改造不出 bug必须理解Promise.all()的精确语义并发启动汇总等待传入数组后所有 Promise 立即开始执行await只在最后一个 Promise resolve 后返回。保持顺序的解构赋值结果的顺序与传入数组一致const [a, b, c] await Promise.all([p1, p2, p3])中的a/b/c一一对应与完成先后无关。快速失败fail-fast只要其中一个 Promise rejectPromise.all立即 reject其余仍在执行的结果被丢弃。如果需要部分成功也返回应改用Promise.allSettled()。数组字面量立即求值Promise.all([fetchA(), fetchB()])中两个函数在Promise.all被调用前就已执行——这正是并行效果所在但也要注意参数不是惰性的无法做到先看条件再决定要不要发起。与Promise.allSettled()的取舍当独立请求中有一个失败不应拖垮整体例如并发拉取多个可选指标优先Promise.allSettled()当所有请求都是页面必需数据时Promise.all()的快速失败反而能让错误更早暴露。结合 Langfuse 仓库的落地参考在 Langfuse 仓库中Promise.all()并行化是广泛使用的既有模式。例如共享包 packages/shared/src/server/repositories/experiments.ts 中实验experiment相关的多项指标查询即通过并行化获取把本应串行的多次 ClickHouse 查询叠加为单轮并发类似的模式还出现在 packages/shared/src/server/auth/invalidateApiKeys.ts批量失效多个 API Key、packages/shared/src/server/repositories/environments.ts并发读取多环境数据等仓库文件中。可以推断Langfuse 的 web 前端Next.js 页面与 worker 后台服务中凡是出现同一函数体内连续多个互不依赖的await的位置都是本规则的候选改造点。改造时遵循三步通读函数体圈出无数据依赖的await调用移除这些await将调用结果放入Promise.all([...])用解构赋值按原顺序取回结果保持下游代码不变。// 以 Langfuse 风格的仓库代码为例 // 改造前串行先取项目再取评分配置两者其实互不依赖 const project await prisma.project.findUnique({ where: { id } }) const scoreConfigs await prisma.scoreConfig.findMany({ where: { projectId } }) // 改造后并行 const [project, scoreConfigs] await Promise.all([ prisma.project.findUnique({ where: { id } }), prisma.scoreConfig.findMany({ where: { projectId } }), ])进阶关联当操作存在部分依赖时Promise.all()只适用于完全独立的操作。一旦出现fetchProfile(user.id)依赖fetchUser()的结果直接把三个操作塞进Promise.all会破坏依赖关系。此时参考同类别规则 async-dependencies.md先创建所有 Promise最后统一await——这是不引入任何第三方依赖的替代方案。const userPromise fetchUser() const profilePromise userPromise.then(user fetchProfile(user.id)) const [user, config, profile] await Promise.all([ userPromise, fetchConfig(), // 与 profile 并行 profilePromise, ])同理async-api-routes.md 把这一思想应用到 API Route 与 Server Action认证和配置读取应立即启动、延后 awaitconst sessionPromise auth()从而让认证、配置、业务数据三段链路的最大并发度提升到理论最优。四条规则共同构成一套完整的水瀑布消除工具箱独立操作 →Promise.all部分依赖 → 先建 Promise 后统一 await分支内才需要的操作 → 延迟 await整个页面结构 → 组件组合 Suspense 流式渲染见 async-suspense-boundaries.md。使用边界与注意事项不要对真正串行的逻辑强行并行有依赖的操作B 需要 A 的结果必须保持先后关系强行Promise.all会引入竞态与错误数据。并发数失控对数量不定的列表如批量操作上千个 item用Promise.all一次性全量并发可能压垮下游数据库或 API应改用并发池如p-limit类工具限流。错误处理策略Promise.all快速失败的特性要求为每个子请求设计合理的错误边界关键请求失败时应能识别出是哪一个失败、其余请求如何处理。资源占用意识并行意味着同时建立多个连接对内存与连接池有瞬时压力对超大 payload 的请求建议串行或限流。优先在链路根部消除一个函数内的await串行只是局部问题更大的收益来自整个请求链路Server Components 树、API Route、hook 链的并行化重组——见同类别 server-parallel-fetching.md 的组件组合方案。一页速查维度结论适用场景无数据依赖的多个异步操作核心改动删掉中间await收拢为一次await Promise.all([...])效果N 次往返 → 1 次往返官方标注 2–10× 提升结果顺序与传入数组一致用解构赋值安全取回失败行为fail-fast需要部分成功时改用Promise.allSettled()有依赖怎么办先建 Promise、最后统一 await见 async-dependencies.md仓库佐证experiments.ts 等共享包仓储层已大量使用该模式把独立操作并行化写进代码审查清单与代码生成模板是 Langfuse 这类数据密集型平台压榨端到端延迟最直接、风险最低的一步。【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Langfuse 前端异步优化指南：用 Promise.all() 消除独立请求的水瀑布
Langfuse 前端异步优化指南用 Promise.all() 消除独立请求的水瀑布【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse本指南以仓库内 Vercel React 最佳实践技能规则 async-parallel.md 为核心系统讲解如何用Promise.all()并发执行相互独立的异步操作从而将 N 次串行网络往返压缩为 1 次。文章同时结合 Langfuse 仓库Next.js 前端 Node.js worker 共享 TypeScript 包的真实代码给出可直接落地、可复制的并行化改造方案。规则速览什么是 Promise.all() 并行化在 vercel-react-best-practices 技能集中async-parallel属于第 1 优先级「消除水瀑布Eliminating Waterfalls」类别影响等级为CRITICAL官方标注的性能提升区间为2–10 倍。规则原文只有一句话当异步操作之间没有任何相互依赖时用Promise.all()并发执行它们。底层原理是await会挂起当前async函数而创建 Promise 本身不会阻塞。当你写出fetchUser()、fetchPosts()、fetchComments()三个调用时只要不立刻await三个请求就会同时发出只有Promise.all()的await会等待全部完成。因此// 错误顺序执行3 次网络往返 const user await fetchUser() const posts await fetchPosts() const comments await fetchComments() // 正确并行执行1 次网络往返 const [user, posts, comments] await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ])每次多余的串行await都会叠加完整的网络延迟DNS、TLS、排队、服务器处理、响应传输。当调用链出现 3 个独立请求时串行总耗时约为并行方案的 3 倍这就是规则标注 2–10× 提升的来源。为什么这是最优先的优化水瀑布是头号性能杀手在技能集的完整汇编 AGENTS.md 中开篇即给出明确论断Waterfalls are the #1 performance killer. Each sequential await adds full network latency. Eliminating them yields the largest gains. 水瀑布是头号性能杀手每个顺序 await 都会累加完整的网络延迟消除它们能带来最大的收益。该类别下的五条规则async-defer-await、async-dependencies、async-api-routes、async-parallel、async-suspense-boundaries全部标为 CRITICAL覆盖了水瀑布的三种典型形态形态对应规则文件解决思路无依赖的独立操作串行执行async-parallel.mdPromise.all()一次并发全部发起部分依赖的操作被整体串行化async-dependencies.md先创建所有 Promise最后统一awaitawait 被提前到不需要它的分支/路径async-defer-await.md把await下沉到实际使用它的代码分支async-parallel解决的是最简单也最常见的第一种操作之间完全独立没有任何数据依赖。判定标准什么时候该用 Promise.all()判断一个操作组合是否适合Promise.all()只需问两个问题各操作之间是否有数据依赖比如fetchPosts()需要user.id作为参数那它就不属于本规则的适用场景应参考async-dependencies的部分依赖并行化方案。是否已经返回了 Promise只要函数是async或返回Promise调用时不写await就不会阻塞——这正是并行化的前提。一个实用的改造套路是先删掉中间所有await把结果收集成 Promise 数组最后只用一次await Promise.all([...])。// 改造前3 个 await 串行 async function loadDashboard() { const projects await listProjects(projectId) // 往返 1 const traces await listTraces(projectId) // 往返 2 const scores await listScores(projectId) // 往返 3 return { projects, traces, scores } } // 改造后3 个请求同时发出 async function loadDashboard() { const [projects, traces, scores] await Promise.all([ listProjects(projectId), listTraces(projectId), listScores(projectId), ]) return { projects, traces, scores } }深度语义Promise.all() 的四个关键行为要让并行化改造不出 bug必须理解Promise.all()的精确语义并发启动汇总等待传入数组后所有 Promise 立即开始执行await只在最后一个 Promise resolve 后返回。保持顺序的解构赋值结果的顺序与传入数组一致const [a, b, c] await Promise.all([p1, p2, p3])中的a/b/c一一对应与完成先后无关。快速失败fail-fast只要其中一个 Promise rejectPromise.all立即 reject其余仍在执行的结果被丢弃。如果需要部分成功也返回应改用Promise.allSettled()。数组字面量立即求值Promise.all([fetchA(), fetchB()])中两个函数在Promise.all被调用前就已执行——这正是并行效果所在但也要注意参数不是惰性的无法做到先看条件再决定要不要发起。与Promise.allSettled()的取舍当独立请求中有一个失败不应拖垮整体例如并发拉取多个可选指标优先Promise.allSettled()当所有请求都是页面必需数据时Promise.all()的快速失败反而能让错误更早暴露。结合 Langfuse 仓库的落地参考在 Langfuse 仓库中Promise.all()并行化是广泛使用的既有模式。例如共享包 packages/shared/src/server/repositories/experiments.ts 中实验experiment相关的多项指标查询即通过并行化获取把本应串行的多次 ClickHouse 查询叠加为单轮并发类似的模式还出现在 packages/shared/src/server/auth/invalidateApiKeys.ts批量失效多个 API Key、packages/shared/src/server/repositories/environments.ts并发读取多环境数据等仓库文件中。可以推断Langfuse 的 web 前端Next.js 页面与 worker 后台服务中凡是出现同一函数体内连续多个互不依赖的await的位置都是本规则的候选改造点。改造时遵循三步通读函数体圈出无数据依赖的await调用移除这些await将调用结果放入Promise.all([...])用解构赋值按原顺序取回结果保持下游代码不变。// 以 Langfuse 风格的仓库代码为例 // 改造前串行先取项目再取评分配置两者其实互不依赖 const project await prisma.project.findUnique({ where: { id } }) const scoreConfigs await prisma.scoreConfig.findMany({ where: { projectId } }) // 改造后并行 const [project, scoreConfigs] await Promise.all([ prisma.project.findUnique({ where: { id } }), prisma.scoreConfig.findMany({ where: { projectId } }), ])进阶关联当操作存在部分依赖时Promise.all()只适用于完全独立的操作。一旦出现fetchProfile(user.id)依赖fetchUser()的结果直接把三个操作塞进Promise.all会破坏依赖关系。此时参考同类别规则 async-dependencies.md先创建所有 Promise最后统一await——这是不引入任何第三方依赖的替代方案。const userPromise fetchUser() const profilePromise userPromise.then(user fetchProfile(user.id)) const [user, config, profile] await Promise.all([ userPromise, fetchConfig(), // 与 profile 并行 profilePromise, ])同理async-api-routes.md 把这一思想应用到 API Route 与 Server Action认证和配置读取应立即启动、延后 awaitconst sessionPromise auth()从而让认证、配置、业务数据三段链路的最大并发度提升到理论最优。四条规则共同构成一套完整的水瀑布消除工具箱独立操作 →Promise.all部分依赖 → 先建 Promise 后统一 await分支内才需要的操作 → 延迟 await整个页面结构 → 组件组合 Suspense 流式渲染见 async-suspense-boundaries.md。使用边界与注意事项不要对真正串行的逻辑强行并行有依赖的操作B 需要 A 的结果必须保持先后关系强行Promise.all会引入竞态与错误数据。并发数失控对数量不定的列表如批量操作上千个 item用Promise.all一次性全量并发可能压垮下游数据库或 API应改用并发池如p-limit类工具限流。错误处理策略Promise.all快速失败的特性要求为每个子请求设计合理的错误边界关键请求失败时应能识别出是哪一个失败、其余请求如何处理。资源占用意识并行意味着同时建立多个连接对内存与连接池有瞬时压力对超大 payload 的请求建议串行或限流。优先在链路根部消除一个函数内的await串行只是局部问题更大的收益来自整个请求链路Server Components 树、API Route、hook 链的并行化重组——见同类别 server-parallel-fetching.md 的组件组合方案。一页速查维度结论适用场景无数据依赖的多个异步操作核心改动删掉中间await收拢为一次await Promise.all([...])效果N 次往返 → 1 次往返官方标注 2–10× 提升结果顺序与传入数组一致用解构赋值安全取回失败行为fail-fast需要部分成功时改用Promise.allSettled()有依赖怎么办先建 Promise、最后统一 await见 async-dependencies.md仓库佐证experiments.ts 等共享包仓储层已大量使用该模式把独立操作并行化写进代码审查清单与代码生成模板是 Langfuse 这类数据密集型平台压榨端到端延迟最直接、风险最低的一步。【免费下载链接】langfuse Open source AI engineering platform: LLM evals, observability, metrics, prompt management, playground, datasets. Integrates with OpenTelemetry, LangChain, OpenAI SDK, LiteLLM, and more. YC W23项目地址: https://gitcode.com/GitHub_Trending/la/langfuse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考