性能优化

要解决的性能问题

前端应用常面临三类核心性能痛点：首屏加载时关键内容渲染延迟（LCP 指标超标），用户交互后反馈滞后（INP 超过 200ms），以及页面元素意外偏移导致体验割裂（CLS 高于 0.1）。这些问题往往源于资源加载策略不合理——比如全量加载 JavaScript 而非按路由拆分、直接输出未压缩的原始图片、静态资源缺乏长效缓存机制，或是用同步计算阻塞主线程、渲染数千个 DOM 节点引发渲染卡顿。

核心优化能力与实践步骤

该技能聚焦前端性能优化的关键链路，提供可落地的解决方案：

• Bundle 分析与代码拆分：通过工具分析打包结果，将第三方依赖拆分为独立 vendor chunks，按路由使用 import() 动态导入并配合 Suspense 实现懒加载，避免首屏加载冗余代码。
• 图片资源优化：优先输出 WebP/AVIF 格式图片，搭配 sizes 属性适配不同屏幕尺寸；为图片显式设置 width 和 height 防止布局偏移，对 LCP 图片添加 fetchpriority="high" 提前加载。
• 缓存策略配置：为带内容哈希的静态资源设置 Cache-Control: immutable 头，避免重复下载，同时规避对无哈希资源的 no-cache 误用。
• 长列表虚拟化：针对 100+ 项的数据列表，采用虚拟列表技术减少 DOM 节点渲染，降低内存占用和渲染压力。
• Core Web Vitals 监控与优化：生产环境持续监控 LCP、INP、CLS 三项核心指标，针对性优化——如通过 requestIdleCallback 拆分长任务提升 INP，避免渲染阻塞资源进入关键路径。

适用边界与注意点

该技能适用于现代前端 Web 应用（如 React、Vue 项目），尤其适合对首屏加载速度和交互流畅度要求较高的 C 端产品。需注意：代码拆分依赖构建工具（如 Webpack、Vite）的配置支持；虚拟列表需结合实际数据动态性场景使用，静态少量数据无需引入；Core Web Vitals 监控需接入生产环境指标收集工具，无法覆盖后端服务性能或非 Web 端场景。