framework
framework/react/performance/index.md
medium
framework-react-performance-index
React 前端性能优化索引：长列表虚拟化、路由/组件代码分割懒加载、Core Web Vitals 之 CLS 布局抖动治理。Use when 列表滚动卡顿 / 首屏加载慢 / 页面布局抖动 / Lighthouse 性能评分优化
子项索引
| 子项 | 一句话 |
|---|---|
| list-virtualization skill | 长列表虚拟化只渲染可视区(windowing)，用 react-window FixedSizeList(等高最快) |
| code-splitting skill | 用 React.lazy + Suspense 动态 import 做路由级/重组件分包，配合 tree-shaking 把首屏 bundle 压到压缩后 <150KB |
| web-vitals-cls skill | Core Web Vitals 三指标(LCP<2.5s/INP<200ms/CLS<0.1)与 CLS 布局抖动治理:媒体定尺寸、LCP 图禁懒加载、字体 swap |
React Performance · 子项索引
本层包含
| 名称 | 类型 | 一句话 |
|---|---|---|
| list-virtualization | skill | 长列表/表格虚拟滚动，只渲染可视区 DOM |
| code-splitting | skill | 路由/组件 lazy + Suspense 按需加载拆包 |
| web-vitals-cls | skill | CLS 布局抖动治理：占位骨架与尺寸预留 |
何时下钻
- 列表/表格滚动卡顿、DOM 节点数千级 →
list-virtualization.md - 首屏 bundle 体积大、加载白屏久 →
code-splitting.md - 页面元素加载时跳动、Lighthouse CLS 偏高 →
web-vitals-cls.md
链接
- 上层：
../index.md - 正交：
../component/index.md（re-render-minimization 管渲染次数 memo，本层管渲染量/加载/布局）