skillhub-088-vercel-react-best-practices
wehub-skill-sync
47 行
1.4 KiB
Markdown
47 行
1.4 KiB
Markdown
# Sections
|
||
|
||
本文件定义了所有章节、它们的顺序、影响等级及描述。
|
||
章节 ID（括号内）是用作规则分组的文件名前缀。
|
||
|
||
---
|
||
|
||
## 1. 消除瀑布式调用（async）
|
||
|
||
**影响等级：** 致命
|
||
**描述：** 瀑布式调用是头号性能杀手。每个连续的 await 都会增加完整的网络延迟。消除它们能带来最大的性能提升。
|
||
|
||
## 2. 包体积优化（bundle）
|
||
|
||
**影响等级：** 致命
|
||
**描述：** 减小初始包体积可改善「可交互时间」和「最大内容绘制」。
|
||
|
||
## 3. 服务端性能（server）
|
||
|
||
**影响等级：** 高
|
||
**描述：** 优化服务端渲染和数据获取可以消除服务端瀑布式调用并减少响应时间。
|
||
|
||
## 4. 客户端数据获取（client）
|
||
|
||
**影响等级：** 中高
|
||
**描述：** 自动去重和高效的数据获取模式可以减少冗余的网络请求。
|
||
|
||
## 5. 重渲染优化（rerender）
|
||
|
||
**影响等级：** 中
|
||
**描述：** 减少不必要的重渲染可最小化计算浪费并提升 UI 响应性。
|
||
|
||
## 6. 渲染性能（rendering）
|
||
|
||
**影响等级：** 中
|
||
**描述：** 优化渲染过程可以减少浏览器所需执行的工作。
|
||
|
||
## 7. JavaScript 性能（js）
|
||
|
||
**影响等级：** 低中
|
||
**描述：** 针对热路径的微优化累积起来可以带来有意义的改进。
|
||
|
||
## 8. 高级模式（advanced）
|
||
|
||
**影响等级：** 低
|
||
**描述：** 针对特定场景的高级模式，需要谨慎实现。
|