zhuangang/topics/frontend/fe-testing-perf/index.md

id, title, type, domain, stack, tags, week

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

前端测试与性能

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

学习路线

顺序	课程	级别	预计
1	前端测试：Vitest 单元测试、Testing Library 组件测试、Playwright 端到端测试	进阶	2.5 小时
2	前端性能：Core Web Vitals（LCP / INP / CLS）、长任务和优化清单	进阶	2.5 小时

企业场景

• 性能治理：真实用户监控、定位慢页面、CI 性能预算和测试防回归

面试题

• 前端测试与性能面试题

示例代码

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

在 16 周计划中

• 第 7 周：前端工程化查漏

官方资料

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