---
id: frontend.fe-testing-perf.index
title: 前端测试与性能
type: index
domain: frontend
stack: [fe-testing-perf]
tags: [Vitest, Testing Library, Playwright, Web Vitals, 性能优化]
week: [7]
---

# 前端测试与性能

测试（证明代码正确，也是验证 AI 生成代码的手段）和性能（Core Web Vitals、长任务）。七年前端经验最能体现深度的部分之一。

## 学习路线

| 顺序 | 课程 | 级别 | 预计 |
| --- | --- | --- | --- |
| 1 | [前端测试：Vitest 单元测试、Testing Library 组件测试、Playwright 端到端测试](01-testing-pyramid.md) | 进阶 | 2.5 小时 |
| 2 | [前端性能：Core Web Vitals（LCP / INP / CLS）、长任务和优化清单](02-web-vitals.md) | 进阶 | 2.5 小时 |

## 企业场景

- [性能治理：真实用户监控、定位慢页面、CI 性能预算和测试防回归](scenarios/perf-regression.md)

## 面试题

- [前端测试与性能面试题](interview.md)

## 示例代码

- [examples/search-box](examples/search-box/)：防抖 + 中止旧请求的搜索组件及 3 个组件测试（vitest 通过）、长任务切块 `chunked.ts`（可直接运行）、Playwright 端到端测试示意

## 在 16 周计划中

- [第 7 周：前端工程化查漏](../../../plan/week07-frontend.md)

## 官方资料

- https://vitest.dev/
- https://testing-library.com/
- https://playwright.dev/
- https://web.dev/articles/vitals