前端架构师
能力全景指南

1.1 JavaScript 语言本质

前端架构师必须对 JS 语言有规范级的理解。以下从执行模型、内存管理、异步编程等多个维度展开。

执行模型与事件循环

// ===== 经典面试题：输出顺序 =====
console.log('1');
setTimeout(() => {
  console.log('2');
  Promise.resolve().then(() => console.log('3'));
}, 0);
Promise.resolve().then(() => {
  console.log('4');
  setTimeout(() => console.log('5'), 0);
});
console.log('6');
// 正确顺序：1 → 6 → 4 → 2 → 3 → 5

// ===== 架构师级应用：并发控制调度器 =====
class Scheduler {
  #queue = []; #running = 0; #concurrency;
  constructor(concurrency = 4) { this.#concurrency = concurrency; }
  add(task) {
    return new Promise((resolve, reject) => {
      this.#queue.push({ task, resolve, reject });
      this.#run();
    });
  }
  #run() {
    while (this.#running < this.#concurrency && this.#queue.length) {
      const { task, resolve, reject } = this.#queue.shift();
      this.#running++;
      task().then(resolve).catch(reject).finally(() => {
        this.#running--;
        this.#run();
      });
    }
  }
}
// 使用：控制并发请求数量
const scheduler = new Scheduler(3);
urls.forEach(url => scheduler.add(() => fetch(url)));

// ===== 异步模式全景 =====
// Promise.all — 全部并行，一个失败全部失败
const results = await Promise.all([fetchA(), fetchB(), fetchC()]);
// Promise.allSettled — 全部并行，等所有完成（无论成败）
const settled = await Promise.allSettled([fetchA(), fetchB()]);
// Promise.any — 竞速，取第一个成功的
const fastest = await Promise.any([fetchCDN1(), fetchCDN2()]);

// 带超时的请求
function withTimeout(promise, ms) {
  const timeout = new Promise((_, reject) =>
    setTimeout(() => reject(new Error(`Timeout ${ms}ms`)), ms));
  return Promise.race([promise, timeout]);
}

// AsyncIterator 流式分页
async function* fetchPaginated(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?page=${page}`).then(r => r.json());
    if (data.length === 0) return;
    yield* data;
    page++;
  }
}
for await (const item of fetchPaginated('/api/users')) {
  processItem(item);
}

// AbortController 取消机制
const ctrl = new AbortController();
useEffect(() => {
  fetch('/api/data', { signal: ctrl.signal })
    .then(r => r.json()).then(setData)
    .catch(e => { if (e.name !== 'AbortError') throw e; });
  return () => ctrl.abort();
}, []);

内存管理与 GC

// 1. 未清理的事件监听
class Chart {
  #handler;
  mount(el) { this.#handler = this.#onResize.bind(this); window.addEventListener('resize', this.#handler); }
  unmount() { window.removeEventListener('resize', this.#handler); /* 必须移除 */ }
}

// 2. 闭包意外持有大对象
function processData() {
  const hugeDataset = fetchHugeDataset(); // 100MB
  // 错误：闭包引用整个 hugeDataset
  // return () => hugeDataset.metadata.version;
  // 修复：只提取需要的值
  const version = hugeDataset.metadata.version;
  return () => version; // hugeDataset 可被 GC
}

// 3. 被遗忘的定时器
function startPolling(cb, interval) {
  const id = setInterval(cb, interval);
  return () => clearInterval(id); // 必须返回清理函数
}

// 4. 分离的 DOM 引用
const el = document.getElementById('chart');
el.parentNode.removeChild(el); // DOM 已移除
// 但 el 仍被引用 → 整个子树无法 GC → 修复：el = null

// 5. 实验性内存测量 API
if (performance.measureUserAgentSpecificMemory) {
  const result = await performance.measureUserAgentSpecificMemory();
  console.log(`Total: ${result.bytes / 1024 / 1024} MB`);
}

元编程能力

// ===== 实现响应式系统核心（Vue 3 简化版） =====
const targetMap = new WeakMap();
let activeEffect = null;

function reactive(target) {
  return new Proxy(target, {
    get(obj, key, receiver) {
      track(obj, key);
      const result = Reflect.get(obj, key, receiver);
      if (typeof result === 'object' && result !== null) return reactive(result);
      return result;
    },
    set(obj, key, value, receiver) {
      const oldValue = obj[key];
      const result = Reflect.set(obj, key, value, receiver);
      if (oldValue !== value) trigger(obj, key);
      return result;
    },
    deleteProperty(obj, key) {
      const hadKey = key in obj;
      const result = Reflect.deleteProperty(obj, key);
      if (hadKey) trigger(obj, key);
      return result;
    },
  });
}

function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) targetMap.set(target, (depsMap = new Map()));
  let deps = depsMap.get(key);
  if (!deps) depsMap.set(key, (deps = new Set()));
  deps.add(activeEffect);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  depsMap.get(key)?.forEach(effect => effect());
}

// ===== 不可变数据代理 =====
function deepFreeze(obj) {
  return new Proxy(obj, {
    get(target, key) {
      const val = target[key];
      return typeof val === 'object' && val !== null ? deepFreeze(val) : val;
    },
    set() { throw new Error('Immutable'); },
    deleteProperty() { throw new Error('Immutable'); },
  });
}

// ===== Proxy 实现 API 自动重试 + 缓存 =====
function createSmartClient(baseURL, { retries = 3, cacheTTL = 60000 } = {}) {
  const cache = new Map();
  return new Proxy({}, {
    get(_, apiName) {
      return async (...args) => {
        const key = `${apiName}:${JSON.stringify(args)}`;
        const cached = cache.get(key);
        if (cached && Date.now() - cached.time < cacheTTL) return cached.data;
        for (let i = 0; i <= retries; i++) {
          try {
            const res = await fetch(`${baseURL}/${apiName}`, {
              method: 'POST', body: JSON.stringify(args),
            });
            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const data = await res.json();
            cache.set(key, { data, time: Date.now() });
            return data;
          } catch (e) {
            if (i === retries) throw e;
            await new Promise(r => setTimeout(r, 1000 * 2 ** i));
          }
        }
      };
    },
  });
}
const api = createSmartClient('/api');
const users = await api.getUsers({ page: 1 }); // 自动缓存 + 重试

核心知识点全景表

1.2 TypeScript 类型工程

TypeScript 已是前端标配。架构师需掌握从基础泛型到高级类型体操的全链路能力。

类型能力分级

// 1. 深层 Partial
type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object
    ? T[K] extends Function ? T[K] : DeepPartial<T[K]>
    : T[K];
};

// 2. 路径类型（嵌套对象点访问）
type Path<T, K extends keyof T = keyof T> = K extends string
  ? T[K] extends Record<string, any>
    ? `${K}` | `${K}.${Path<T[K]>}`
    : `${K}`
  : never;
type UserPath = Path<{ name: string; address: { city: string; zip: string } }>;
// "name" | "address" | "address.city" | "address.zip"

// 3. 类型安全事件系统
type EventMap = {
  'user:login': { userId: string; timestamp: number };
  'order:create': { orderId: string; amount: number };
};
interface TypedEventBus<T extends Record<string, any>> {
  on<K extends keyof T>(event: K, handler: (payload: T[K]) => void): () => void;
  emit<K extends keyof T>(event: K, payload: T[K]): void;
}

// 4. 模板字面量类型：CSS 类型安全
type CSSUnit = 'px' | 'rem' | 'em' | '%' | 'vh' | 'vw';
type CSSValue = `${number}${CSSUnit}` | 'auto' | '0';
function setPadding(value: CSSValue) { /* ... */ }
setPadding('16px');   // OK
setPadding('1.5rem'); // OK
setPadding('large');  // Error!

// 5. 路由参数提取
type ExtractRouteParams<T extends string> =
  T extends `${string}:${infer Param}/${infer Rest}`
    ? Param | ExtractRouteParams<Rest>
    : T extends `${string}:${infer Param}` ? Param : never;
type P = ExtractRouteParams<'/users/:userId/posts/:postId'>;
// "userId" | "postId"

// 6. 类型测试
import { expectTypeOf } from 'vitest';
test('DeepPartial', () => {
  type Result = DeepPartial<{ a: { b: { c: string } } }>;
  expectTypeOf<Result>().toEqualTypeOf<{ a?: { b?: { c?: string } } }>();
});

1.3 Node.js 与服务端能力

import { Hono } from 'hono';
import { cors } from 'hono/cors';
import { jwt } from 'hono/jwt';
import { z } from 'zod';
import { zValidator } from '@hono/zod-validator';

const app = new Hono();
app.use('*', cors({ origin: ['https://myapp.com'] }));
app.use('/api/*', jwt({ secret: process.env.JWT_SECRET! }));

// BFF 聚合：一次请求聚合多个微服务
app.get('/api/dashboard', async (c) => {
  const userId = c.get('userId');
  const [user, orders, notifications] = await Promise.all([
    fetch(`${SERVICES.user}/users/${userId}`).then(r => r.json()),
    fetch(`${SERVICES.order}/orders?userId=${userId}&limit=5`).then(r => r.json()),
    fetch(`${SERVICES.notify}/notifications?unread=true`).then(r => r.json()),
  ]);
  // 数据裁剪：只返回前端需要的字段
  return c.json({
    user: { id: user.id, name: user.name, avatar: user.avatarUrl },
    recentOrders: orders.data.map(o => ({ id: o.id, total: o.totalAmount, status: o.status })),
    unreadCount: notifications.total,
  });
});

// 带校验的 POST
const CreateUserSchema = z.object({
  name: z.string().min(2).max(50),
  email: z.string().email(),
  role: z.enum(['admin', 'user', 'viewer']),
});
app.post('/api/users', zValidator('json', CreateUserSchema), async (c) => {
  const data = c.req.valid('json');
  const res = await fetch(`${SERVICES.user}/users`, {
    method: 'POST', headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return c.json(await res.json(), res.status as any);
});

export default app;

1.4 WebAssembly 与 Rust

// Rust 端：图片灰度处理
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn grayscale(pixels: &mut [u8]) {
    for i in (0..pixels.len()).step_by(4) {
        let gray = (0.299 * pixels[i] as f32
                  + 0.587 * pixels[i+1] as f32
                  + 0.114 * pixels[i+2] as f32) as u8;
        pixels[i] = gray;
        pixels[i+1] = gray;
        pixels[i+2] = gray;
    }
}

// JS 端调用：
// import init, { grayscale } from './pkg/image_processor';
// await init();
// const imageData = ctx.getImageData(0, 0, w, h);
// grayscale(imageData.data);
// ctx.putImageData(imageData, 0, 0);

2.1 浏览器渲染管线

各阶段优化策略

// 反面：布局抖动（交替读写 DOM 几何属性）
function badResize() {
  for (const box of document.querySelectorAll('.box')) {
    box.style.width = '200px';     // 写：布局失效
    console.log(box.offsetHeight); // 读：强制同步布局！
  }
}

// 正确：批量读写分离
function goodResize() {
  const boxes = document.querySelectorAll('.box');
  const heights = Array.from(boxes, b => b.offsetHeight); // 批量读
  requestAnimationFrame(() => {                             // 批量写
    boxes.forEach(b => { b.style.width = '200px'; });
  });
}

// ResizeObserver 替代轮询
const observer = new ResizeObserver(entries => {
  for (const entry of entries) {
    updateLayout(entry.target, entry.contentRect.width);
  }
});
observer.observe(document.querySelector('.container'));

2.2 V8 引擎原理

// 1. Hidden Class：保持属性初始化顺序一致
function createUser(name, age, email) {
  return { name, age, email }; // 所有用户共享同一个 Hidden Class
}

// 2. Inline Cache：单态（Monomorphic）最快
function getX(obj) { return obj.x; }
getX({ x: 1 });      // 一种形状 → 单态缓存 → 最快
getX({ x: 1, y: 2 }); // 两种形状 → 多态 → 较慢
// 避免：函数接收过多不同形状的对象 → 超态 → 最慢

// 3. 数组优化
const fast = [1, 2, 3];        // PACKED_SMI → 最快
const slow1 = [1, , 3];        // HOLEY → 有空洞 → 最慢
const slow2 = [1, 'two', 3];   // 混合类型 → 无法数值优化

// 4. 避免 Deoptimization
function add(a, b) { return a + b; }
add(1, 2);     // TurboFan 优化为整数加法
add('a', 'b'); // Deopt! 类型变了，回退到字节码

2.3 网络协议栈

HTTP 版本演进

HTTP 缓存全景

2.4 浏览器安全模型

3.1 React 核心原理

// useState 简化实现
function mountState(initial) {
  const hook = { memoizedState: initial, queue: { pending: null } };
  if (!fiber.memoizedState) fiber.memoizedState = hook;
  else currentHook.next = hook;
  currentHook = hook;
  const dispatch = (action) => {
    hook.queue.pending = { action, next: null };
    scheduleUpdateOnFiber(fiber);
  };
  return [hook.memoizedState, dispatch];
}

// useEffect 执行时机：
//   Render 阶段：收集 effect（不执行）
//   Commit 阶段：
//     BeforeMutation → useLayoutEffect destroy
//     Mutation → DOM 更新
//     Layout → useLayoutEffect create
//     Passive（异步）→ useEffect create
// ★ useEffect 在浏览器绘制后异步执行
// ★ useLayoutEffect 在 DOM 更新后、绘制前同步执行

// 闭包陷阱与修复
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      // 错误：count 永远是 0（闭包捕获首次渲染值）
      // setCount(count + 1);
      // 修复 1：函数式更新
      setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖 → effect 只执行一次 → 闭包永远 count=0
}

React 生态标配（2025-2026）

3.2 Vue 核心原理

3.3 框架选型方法论

4.1 构建工具链

构建优化清单

• Tree-shaking：sideEffects: false，ESM 导出
• Code Splitting：路由级 + 供应商分包 + 大组件动态导入
• 依赖预构建：Vite deps optimizer / Webpack 持久化缓存
• 压缩：esbuild minify（默认）/ terser（高级）/ SWC
• 图片优化：AVIF/WebP 自动转换
• 资源内联：小图片 base64（assetsInlineLimit）
• Source Map：开发 eval-source-map，生产 hidden-source-map

4.2 Monorepo 管理

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**", ".next/**", "!.next/cache/**"],
      "inputs": ["src/**", "package.json", "tsconfig.json"]
    },
    "test": { "dependsOn": ["^build"], "outputs": ["coverage/**"] },
    "lint": { "outputs": [] },
    "type-check": { "outputs": [] },
    "dev": { "cache": false, "persistent": true, "dependsOn": ["^build"] },
    "deploy": { "dependsOn": ["build", "test", "lint"] }
  }
}

4.3 代码质量与规范

// eslint.config.js
import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import reactCompiler from 'eslint-plugin-react-compiler';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.strictTypeChecked,
  {
    files: ['**/*.{ts,tsx}'],
    plugins: { react, 'react-hooks': reactHooks, 'react-compiler': reactCompiler },
    languageOptions: {
      parserOptions: { projectService: true, tsconfigRootDir: import.meta.dirname },
    },
    rules: {
      'react-hooks/exhaustive-deps': 'warn',
      'react-compiler/react-compiler': 'warn',
      '@typescript-eslint/no-floating-promises': 'error',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
    },
  },
  { ignores: ['dist/', '.next/', 'node_modules/'] }
);

4.4 CI/CD 流水线

4.5 包管理与版本发布

{
  "name": "@my-org/ui",
  "version": "1.2.0",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    },
    "./styles": "./dist/styles.css"
  },
  "sideEffects": ["*.css"],
  "files": ["dist", "README.md"],
  "publishConfig": { "access": "public", "provenance": true },
  "peerDependencies": { "react": "^18.0.0 || ^19.0.0" }
}

5.1 应用架构模式

Feature-Sliced Design 目录结构

src/
├── app/          # 应用初始化：providers, router, styles
├── pages/        # 页面层（路由一一对应）
├── widgets/      # 业务模块层（独立功能块：sidebar, header）
├── features/     # 功能特性层（跨模块复用：auth, add-to-cart）
├── entities/     # 业务实体层（user, product, order）
└── shared/       # 共享基础层（ui, api, lib, config, types）

依赖方向：pages → widgets → features → entities → shared
同层之间不能互相引用

5.2 微前端架构

// 宿主应用 (host) — Vite 配置
import { federation } from '@module-federation/vite';

export default defineConfig({
  plugins: [
    federation({
      name: 'host',
      remotes: {
        remoteApp: {
          type: 'module',
          name: 'remoteApp',
          entry: 'https://cdn.example.com/remoteEntry.js',
        },
      },
      shared: {
        react: { singleton: true, requiredVersion: '^19.0.0' },
        'react-dom': { singleton: true },
      },
    }),
  ],
});

// 远程应用 (remote)
export default defineConfig({
  plugins: [
    federation({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Dashboard': './src/Dashboard.tsx',
        './utils': './src/utils/index.ts',
      },
    }),
  ],
});

5.3 状态管理架构

import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';

interface AuthState {
  user: User | null;
  token: string | null;
  isAuthenticated: boolean;
  login: (credentials: Credentials) => Promise<void>;
  logout: () => void;
}

export const useAuthStore = create<AuthState>()(
  devtools(
    persist(
      immer((set) => ({
        user: null, token: null, isAuthenticated: false,
        login: async (credentials) => {
          const { user, token } = await authApi.login(credentials);
          set((state) => {
            state.user = user;
            state.token = token;
            state.isAuthenticated = true;
          });
        },
        logout: () => set((state) => {
          state.user = null;
          state.token = null;
          state.isAuthenticated = false;
        }),
      })),
      { name: 'auth-storage' }
    )
  )
);

5.4 路由架构设计

import { createFileRoute } from '@tanstack/react-router';
import { z } from 'zod';

const searchSchema = z.object({
  tab: z.enum(['content', 'comments']).default('content'),
  page: z.number().int().positive().default(1),
});

export const Route = createFileRoute('/posts/$postId')({
  validateSearch: searchSchema.parse,
  loader: async ({ params: { postId }, search }) => {
    const post = await fetchPost(postId);
    const comments = search.tab === 'comments'
      ? await fetchComments(postId, search.page) : [];
    return { post, comments };
  },
  component: PostPage,
});

function PostPage() {
  const { post, comments } = Route.useLoaderData();
  const { tab } = Route.useSearch();   // 完全类型安全
  const { postId } = Route.useParams(); // string 类型
}

5.5 Design System 与组件体系

5.6 数据层架构

// 统一 API 客户端
class ApiClient {
  private baseURL: string;
  async request<T>(config: RequestConfig): Promise<T> {
    const response = await fetch(this.baseURL + config.url, this.buildOptions(config));
    if (!response.ok) throw await this.handleError(response);
    return response.json();
  }
}

const api = {
  users: {
    list: (params: UserListParams) => client.get<User[]>('/users', { params }),
    getById: (id: string) => client.get<User>(`/users/${id}`),
    create: (data: CreateUserInput) => client.post<User>('/users', { body: JSON.stringify(data) }),
    update: (id: string, data: UpdateUserInput) => client.patch<User>(`/users/${id}`, { body: JSON.stringify(data) }),
    delete: (id: string) => client.delete(`/users/${id}`),
  },
};

// 配合 TanStack Query
function useUsers(params: UserListParams) {
  return useQuery({
    queryKey: ['users', params],
    queryFn: () => api.users.list(params),
    staleTime: 30_000,
  });
}

6.1 性能指标体系

6.2 加载性能优化

<!-- 预连接关键域名 -->
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://analytics.example.com" />

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero.avif" as="image" type="image/avif" />

<!-- 预获取下一页 -->
<link rel="prefetch" href="/next-page.js" as="script" />

<!-- 预渲染（Chrome 121+） -->
<link rel="prerender" href="/next-page" />

图片优化决策

代码分割策略

// 路由级分割
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

// 组件级分割（条件加载的大组件）
const HeavyChart = lazy(() => import('./components/HeavyChart'));

// Vite 供应商分包
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-react': ['react', 'react-dom'],
          'vendor-query': ['@tanstack/react-query'],
          'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-popover'],
        },
      },
    },
  },
});

6.3 运行时性能优化

// 1. 虚拟列表（长列表必备）
import { useVirtualizer } from '@tanstack/react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);
  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,
    overscan: 5,
  });
  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <div style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
        {virtualizer.getVirtualItems().map(row => (
          <div key={row.index}
            style={{ position: 'absolute', top: 0, transform: `translateY(${row.start}px)` }}>
            {items[row.index].name}
          </div>
        ))}
      </div>
    </div>
  );
}

// 2. Web Worker 处理计算密集任务
const worker = new Worker('./worker.ts', { type: 'module' });
worker.postMessage(largeDataset);
worker.onmessage = (e) => setResult(e.data);

// 3. 避免不必要的重渲染
// 错误：每次渲染创建新对象
function Parent({ items }) {
  return <Child style={{ color: 'red' }} items={items} />;
  // style={{ color: 'red' }} 每次都是新引用
}
// 正确：提取常量
const defaultStyle = { color: 'red' };
function Parent({ items }) {
  return <Child style={defaultStyle} items={items} />;
}

6.4 性能监控与回归防护

import { onLCP, onINP, onCLS, onTTFB } from 'web-vitals';

function sendToAnalytics(metric: Metric) {
  navigator.sendBeacon('/analytics', JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,
    id: metric.id,
    url: location.href,
    timestamp: Date.now(),
  }));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onTTFB(sendToAnalytics);

性能预算

{
  "maxBundleSize": "250KB",
  "maxInitialJS": "150KB",
  "maxImageSize": "100KB",
  "maxLCP": 2500,
  "maxINP": 200,
  "maxCLS": 0.1,
  "maxThirdPartyBytes": "50KB"
}

7.1 前端监控体系

// 1. JS 运行时错误
window.addEventListener('error', (event) => {
  reportError({ type: 'js_error', message: event.message,
    filename: event.filename, lineno: event.lineno, stack: event.error?.stack });
});

// 2. Promise 未捕获异常
window.addEventListener('unhandledrejection', (event) => {
  reportError({ type: 'promise_rejection', message: String(event.reason) });
});

// 3. 资源加载错误（捕获阶段，资源错误不冒泡）
window.addEventListener('error', (event) => {
  const target = event.target;
  if (target.tagName) {
    reportError({ type: 'resource_error', tagName: target.tagName, src: target.src });
  }
}, true);

// 4. API 请求错误（fetch 拦截）
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const start = performance.now();
  try {
    const response = await originalFetch(...args);
    const duration = performance.now() - start;
    if (!response.ok) reportError({ type: 'api_error', url: args[0], status: response.status, duration });
    return response;
  } catch (error) {
    reportError({ type: 'api_error', url: args[0], message: String(error) });
    throw error;
  }
};

// 5. React Error Boundary
class ErrorBoundary extends React.Component {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error, info) {
    reportError({ type: 'react_error', message: error.message,
      stack: error.stack, componentStack: info.componentStack });
  }
  render() { return this.state.hasError ? this.props.fallback : this.props.children; }
}

7.2 测试策略

// 单元测试：Hook
import { renderHook, act } from '@testing-library/react';
import { useCounter } from './useCounter';

test('increments correctly', () => {
  const { result } = renderHook(() => useCounter(0));
  act(() => { result.current.increment(); });
  expect(result.current.count).toBe(1);
});

// 集成测试：组件
import { render, screen, userEvent } from '@testing-library/react';

test('submits form with valid credentials', async () => {
  const onSubmit = vi.fn();
  render(<LoginForm onSubmit={onSubmit} />);
  await userEvent.type(screen.getByLabelText('Email'), 'user@example.com');
  await userEvent.type(screen.getByLabelText('Password'), 'password123');
  await userEvent.click(screen.getByRole('button', { name: 'Login' }));
  expect(onSubmit).toHaveBeenCalledWith({ email: 'user@example.com', password: 'password123' });
});

// E2E 测试：Playwright
import { test, expect } from '@playwright/test';

test('checkout flow', async ({ page }) => {
  await page.goto('/products');
  await page.getByRole('link', { name: 'Widget Pro' }).click();
  await page.getByRole('button', { name: 'Add to Cart' }).click();
  await page.getByRole('link', { name: 'Checkout' }).click();
  await page.getByLabel('Email').fill('test@example.com');
  await page.getByRole('button', { name: 'Pay Now' }).click();
  await expect(page.getByText('Order Confirmed')).toBeVisible();
});

7.3 错误治理

// 构建时生成 hidden source map
// vite.config.ts
export default defineConfig({
  build: { sourcemap: 'hidden' }, // 生成 .map 但不引用
});

// 发布后上传到 Sentry
// npx sentry-cli sourcemaps inject ./dist
// npx sentry-cli sourcemaps upload --release v1.2.0 ./dist

错误分级与告警

8.1 XSS 防御

// React 默认转义 JSX，但 dangerouslySetInnerHTML 是陷阱
// 危险：
<div dangerouslySetInnerHTML={{ __html: userInput }} />
// 安全：使用 DOMPurify 清洗
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userInput) }} />
// 最安全：避免 HTML 注入
<div>{userInput}</div> // React 自动转义

8.2 CSRF 防御

8.3 CSP 配置

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-{random}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'none';
  base-uri 'self';
  form-action 'self';
  upgrade-insecure-requests;

8.4 依赖安全

# 定期扫描
pnpm audit                    # 内置审计
npx snyk test                 # Snyk 扫描
npx trivy fs .                # Trivy 全面扫描

# CI 集成
pnpm audit --audit-level=high

9.1 移动端方案

9.2 桌面端方案

9.3 跨端代码共享

10.1 技术判断与决策

# ADR-001: 选择 Zustand 作为全局状态管理

## 状态：已接受

## 背景
应用需要管理全局 UI 状态，当前使用 Context + useReducer，
在频繁更新时出现性能问题。

## 决策
采用 Zustand 替代 Context + useReducer。

## 理由
1. 性能：基于发布-订阅，只有订阅 slice 的组件会重渲染
2. 简洁：API 极简，无需 Provider 包裹
3. 体积：~1KB gzipped
4. 生态：支持 devtools、persist、immer 中间件

## 被否决的方案
- Redux Toolkit：过于重量
- Jotai：原子化模型对本项目收益不大
- MobX：隐式依赖追踪，调试困难

## 后果
- 正面：减少 30% 不必要重渲染，代码量减少 40%
- 负面：团队需要学习新模式

10.2 团队赋能

10.3 业务翻译能力

必会（日常使用）

应会（架构能力）

了解（技术视野）

成长路径

推荐学习资源

开源项目学习路线

基础能力（必须全部达标）

• 能手写 Promise、debounce、throttle、deepClone
• 理解事件循环，能解释微任务/宏任务执行顺序
• 精通 TypeScript，能写复杂泛型和条件类型
• 理解浏览器渲染管线，能定位性能瓶颈
• 精通至少一个框架的原理（非仅 API）
• 能独立搭建完整工程化体系（构建+规范+CI/CD）
• 理解 HTTP 协议、缓存策略、安全机制

架构能力（至少达标 80%）

• 能设计大型应用的目录结构和模块边界
• 有微前端落地经验或深入理解至少一种方案
• 能设计 Design System 并推动落地
• 能制定性能预算并建立监控体系
• 能编写 ADR 文档，有理有据地做技术决策
• 有 Monorepo 管理经验
• 能设计前端监控体系（错误+性能+行为）
• 理解跨端方案的取舍

软实力（至少达标 70%）

• 能向非技术人员解释技术方案
• 能带 3+ 人团队交付项目
• 定期输出技术文档/分享
• 能评估新技术的价值并做引入决策
• 能将业务需求翻译为技术方案