frontend-async-best-practices

用途

本技能是一套针对异步 JavaScript 代码的性能优化模式集合，核心目标是消除请求瀑布（request waterfall）并最大化并行执行。资料将其影响级别标注为 CRITICAL，并指出瀑布是首要性能杀手——每一次顺序 await 都会叠加完整的网络延迟。

主要能力（5 条规则）

parallel（CRITICAL）：对相互独立的操作使用 Promise.all()。

// Bad: 3 sequential round trips
const user = await fetchUser();
const posts = await fetchPosts();
const comments = await fetchComments();

// Good: 1 parallel round trip
const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments(),
]);

defer-await（HIGH）：把 await 移入真正使用它的分支中。

// Bad: always waits even when skipping
async function handle(skip: boolean) {
  let data = await fetchData();
  if (skip) return { skipped: true };
  return process(data);
}

// Good: only waits when needed
async function handle(skip: boolean) {
  if (skip) return { skipped: true };
  let data = await fetchData();
  return process(data);
}

dependencies（CRITICAL）：串联有依赖关系的操作，并行化相互独立的操作。

// Bad: profile waits for config unnecessarily
const [user, config] = await Promise.all([fetchUser(), fetchConfig()]);
const profile = await fetchProfile(user.id);

// Good: profile starts as soon as user resolves
const userPromise = fetchUser();
const profilePromise = userPromise.then((user) => fetchProfile(user.id));

const [user, config, profile] = await Promise.all([
  userPromise,
  fetchConfig(),
  profilePromise,
]);

api-routes（CRITICAL）：在 loader 中尽早启动 Promise、延迟 await。

// Bad: sequential execution
export async function loader() {
  let session = await auth();
  let config = await fetchConfig();
  return { session, config };
}

// Good: parallel execution
export async function loader() {
  let sessionPromise = auth();
  let configPromise = fetchConfig();
  const [session, config] = await Promise.all([sessionPromise, configPromise]);
  return { session, config };
}

suspense-boundaries（HIGH）：使用 Suspense 在数据加载时立即展示 UI。

// Bad: entire page blocked by data
async function Page() {
  let data = await fetchData();
  return (
    <Layout>
      <Content data={data} />
    </Layout>
  );
}

// Good: layout shows immediately, content streams in
function Page() {
  return (
    <Layout>
      <Suspense fallback={<Skeleton />}>
        <Content />
      </Suspense>
    </Layout>
  );
}

使用方式

资料说明在以下场景参考这些指南：编写 Remix loader 或 action、实现数据获取逻辑、处理多个异步操作、审查代码中的瀑布模式、优化响应时间。每条规则对应一个规则文件（如 @rules/parallel.md、@rules/defer-await.md、@rules/dependencies.md、@rules/api-routes.md、@rules/suspense-boundaries.md）。

适用场景

适用于异步 JavaScript 代码的编写、审查与重构，尤其是涉及多个异步操作、数据获取以及 Remix 路由 loader/action 的前端场景。

限制

资料未提供具体的安装命令、依赖要求、支持的框架版本或运行环境限制，这些信息暂未提供。

技能介绍

用途

主要能力（5 条规则）

使用方式

适用场景

限制