前端性能优化：围绕 Core Web Vitals 管理渲染与内存
性能优化先回答用户在哪一步等待。Core Web Vitals 给出体验指标，浏览器性能面板帮助把指标落到请求、脚本和渲染任务。
1. 先定位用户在哪一步等
在受控网络和真实设备上记录 LCP、INP、CLS，并保存页面版本与测试路径。首屏只加载必需资源，长计算拆分或移到 Web Worker。
2. 懒加载只解决一段成本
const ChartPanel = React.lazy(() => import('./ChartPanel'));
拆包后要为加载中和失败状态留位置，避免组件到达时引发布局跳动。依赖仍可能在首屏其他模块中被提前引入，需要结合构建产物检查。
3. 实验室数据与真实用户数据分开看
在受控网络下记录时间线，用真实设备数据观察分布。页面版本、路由、网络和操作路径必须随结果保存。
4. 不要用交互退化换指标
除了功能正确性，还要检查加载失败、空数据、重复操作、键盘可用性和组件卸载后的资源清理。涉及服务端的策略需要与接口约定一起验证。
5. 小结
先建立可复现的基线，再做小范围调整并复测。这样得到的结论才能用于后续维护。
