reactive-dashboard-performance

响应式仪表板性能

擅长构建生产级响应式仪表板，加载时间低于 100ms，并具备全面的测试覆盖。

核心专长

性能模式（达到 Linear、Vercel、Notion 级别）

1. 骨架屏优先加载

   • 立即渲染骨架屏（感知加载时间为 0ms）
   • 渐进式流式加载数据
   • 加载时间低于 200ms 时绝不显示旋转加载图标

2. 积极缓存

   • 使用 React Query，设置 staleTime: 5min、cacheTime: 30min
   • 对变更操作进行乐观更新
   • 鼠标悬停或挂载时预取

3. 代码拆分

   • 基于路由拆分（Next.js 自动处理）
   • 对大型组件使用组件级 lazy()
   • 预加载关键路径

4. 记忆化策略

   • 对开销较大的计算使用 useMemo
   • 对纯组件使用 React.memo
   • 使用 useCallback 保持引用稳定

测试响应式仪表板

1. 模拟策略

   • 在服务边界进行模拟（React Query、分析）
   • 绝不模拟 UI 组件（测试真实 DOM）
   • 尽可能使用 MSW 模拟 API

2. 异步处理

   // WRONG - races with React
   render(<Dashboard />);
   const element = screen.getByText('Welcome');
   
   // RIGHT - waits for async resolution
   render(<Dashboard />);
   const element = await screen.findByText('Welcome');
   

3. 超时调试

   • 超时意味着：缺少模拟、查询错误，或组件未渲染
   • 使用 screen.debug() 查看实际 DOM
   • 检查控制台中是否有未模拟的错误

4. 测试包装器模式

   const TestProviders = ({ children }) => (
     <QueryClientProvider client={testQueryClient}>
       <AuthProvider>
         {children}
       </AuthProvider>
     </QueryClientProvider>
   );
   

真实案例

• Linear 仪表板：骨架屏 → 过期数据 → 最新数据（感知加载时间低于 50ms）
• Vercel 仪表板：导航悬停时预取，部署时进行乐观更新
• Notion 页面：无限缓存、本地优先、在后台同步

诊断流程

集成测试超时

1. 检查实际渲染的内容

   render(<Component />);
   screen.debug(); // See actual DOM
   

2. 查找未模拟的依赖项

   • 检查控制台中是否有“not a function”错误
   • 查看测试输出中的网络请求
   • 确认已提供所有上下文

3. 修复异步查询

   • 使用 findBy* 替代 getBy*
   • 如有需要，增加超时时间：waitFor(() => {...}, { timeout: 3000 })
   • 正确模拟 React Query

4. 简化组件树

   • 先单独测试各个组件
   • 最后再添加完整的集成测试
   • 对复杂查询使用 data-testid

性能优化

仪表板加载预算

阶段	目标
骨架屏渲染	0-16ms（1 帧）
首次数据绘制	<100ms
完全交互就绪	<200ms
延迟加载组件	<500ms

React Query 配置

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5min
      cacheTime: 30 * 60 * 1000, // 30min
      refetchOnWindowFocus: false,
      refetchOnMount: false,
      retry: 1,
    },
  },
});

骨架屏模式

function Dashboard() {
  const { data, isLoading } = useQuery('dashboard', fetchDashboard);

  // Show skeleton immediately, no loading check
  return (
    <div>
      {data ? <RealWidget data={data} /> : <SkeletonWidget />}
    </div>
  );
}

常见问题

1. 快速加载时显示旋转加载图标——改用骨架屏
2. 开销较大的计算未记忆化——使用 useMemo 包装
3. 测试实现细节——测试用户行为
4. 模拟过多——只在边界进行模拟
5. 使用同步测试断言——所有操作都是异步的

调试测试超时时，务必先使用 screen.debug() 查看实际渲染的内容。