前端性能与渲染内存管理实践

前端性能与渲染内存管理实践

性能问题需要通过现场测量定位。不要用单次本地结果替代真实用户指标。

区分加载、交互和视觉稳定性

Core Web Vitals 分别关注加载体验、交互响应和布局稳定性。先通过 RUM 或浏览器性能录制定位具体页面与操作，再选择优化点。

避免不必要的重复计算

const filteredItems = useMemo( () => items.filter((item) => item.name.includes(keyword)), [items, keyword], );

useMemo只用于确有成本的计算；更常见的收益来自减少资源体积、拆分路由和避免无效渲染。

验证建议

分别在冷缓存和弱网条件下录制页面，保留 LCP、INP、CLS 与 JS 堆快照，比较改动前后的同一测试条件。