性能优化

要解决的具体问题

现代前端应用随着功能迭代，很容易出现三类性能问题：一是首屏加载慢，所有 JavaScript 一次性下载导致白屏时间过长；二是大列表或大表格渲染时 DOM 节点过多，页面滚动掉帧、交互卡顿；三是图像未优化或缺少尺寸属性，引发布局跳动，同时静态资源未设置合理缓存策略，每次请求都重复下载。这些问题直接影响用户体验，却常常因为开发阶段功能优先而被忽略。

技能的核心能力与落地步骤

该技能围绕前端性能优化的核心场景，提供可直接落地的优化路径：

• Bundle 分析与代码分割：通过分析构建产物，按路由拆分代码，用动态 import() 配合 Suspense 实现懒加载，避免一次性加载全部 JavaScript
• 图像与缓存优化：将图像转为 WebP/AVIF 格式并添加响应式尺寸属性，对带内容哈希的静态资源设置 immutable 缓存头，减少重复请求
• 大列表性能优化：针对 100 条以上的列表数据，采用虚拟列表技术，只渲染可视区域内的 DOM 节点
• Core Web Vitals 监控：在生产环境监控三大核心指标：LCP（最大内容绘制）控制在 2.5s 以内，通过预加载首屏图像、优化服务器响应时间实现；INP（交互到下一次绘制）控制在 200ms 以内，避免长任务阻塞主线程；CLS（累积布局偏移）控制在 0.1 以内，为图像和嵌入元素设置明确尺寸

同时技能会提示常见反模式，比如不使用代码分割直接加载全部 JS、提供未优化的图像、静态资源使用 no-cache 等，避免开发中踩坑。

适用边界与注意点

该技能聚焦前端运行时性能优化，不涉及后端服务性能调优、数据库查询优化等后端层面。虚拟列表方案适用于同质列表项场景，对于复杂布局的列表需要额外适配。Core Web Vitals 监控需配合前端监控工具使用，技能提供优化方向而非完整的监控上报链路。