44 lines
1.4 KiB
Markdown
44 lines
1.4 KiB
Markdown
---
|
||
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
|