吖昭的技术笔记《前端性能优化 Checklist》
前端性能直接影响用户体验与业务转化 —— 研究显示，页面加载超过 3 秒会导致 53% 的用户流失。以下从 10 个核心方向梳理优化清单，并附 Google Lighthouse 的检测与验证方法，帮你系统性提升前端性能。
一、资源加载优化：减少请求体积与数量
- 启用 Gzip/Brotli 压缩
- 检查服务器配置：Nginx 需开启gzip on，或优先启用压缩率更高的 Brotli（压缩率比 Gzip 高 15%-20%）。
- 压缩范围：JS、CSS、HTML 等文本资源必须压缩，避免压缩图片（可能反增体积）。
- 实施 HTTP/2 多路复用
- 升级服务器支持 HTTP/2，减少因 TCP 连接建立带来的延迟（尤其针对多资源并行加载场景）。
二、懒加载：按需加载非关键资源
- 图片懒加载
- 实现方式：为<img>添加loading="lazy"属性（原生支持），或通过 IntersectionObserver 监听元素可见性。
- 注意：首屏图片禁用懒加载，避免延迟显示。
- 组件懒加载
- 框架实现：React 用React.lazy+Suspense，Vue 用defineAsyncComponent，将非首屏组件拆分为异步 chunk。
三、代码分割：拆分代码包减小初始加载体积
- 路由级分割
- 按路由拆分代码，如 Vue Router 的() => import('./pages/Home.vue')，确保每个路由 chunk 体积≤300KB。
- 共享库抽取
- 用 Webpack 的splitChunks将 React、Vue 等第三方库抽为vendor.js，利用浏览器缓存减少重复加载。
四、图片优化：平衡视觉质量与加载速度
- 选择现代图片格式
- 优先使用 WebP/AVIF（比 JPEG 小 30%-50%），降级方案：<picture>标签嵌套<source type="image/avif">与<img>。
- 响应式图片
- 用srcset+sizes属性适配不同设备：
<img srcset="pic-400.jpg 400w, pic-800.jpg 800w" sizes="(max-width: 600px) 400px, 800px" src="pic-800.jpg">
- 图片压缩与裁剪
- 工具链：用 Sharp.js 自动化压缩，或通过 CDN 动态裁剪（如阿里云 OSS 的?x-oss-process=image/resize,w_400）。
五、CSS 优化：避免阻塞渲染
- 提取关键 CSS
- 将首屏渲染必需的 CSS 内联到<head>，非关键 CSS 异步加载（如<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">）。
- 减少 CSS 层级与冗余
- 用 PurgeCSS 移除未使用的样式（尤其针对 Tailwind 等工具类 CSS），避免嵌套层级超过 3 层。
六、JavaScript 优化：降低执行成本
- 减少长任务
- 将超过 50ms 的同步任务拆分为微任务（Promise）或宏任务（setTimeout），避免阻塞主线程。
- 优化 DOM 操作
- 用 DocumentFragment 批量处理 DOM，避免频繁触发重排重绘；使用will-change: transform将动画交给 GPU 处理。
七、缓存策略：利用浏览器与 CDN 缓存
- 强缓存与协商缓存
- 静态资源（图片、JS、CSS）设置长期强缓存（Cache-Control: max-age=31536000），并通过文件名哈希（如app.8f2b.js）处理更新。
- 接口数据用协商缓存（ETag或Last-Modified），减少重复请求。
- CDN 缓存
- 将静态资源部署到 CDN，确保资源缓存命中率≥90%（可通过 CDN 控制台监控）。
八、字体优化：减少加载阻塞
- 使用font-display: swap
- 避免因字体加载导致的 “隐形文本闪烁（FOIT）”：
- 子集化字体
- 用 Fonttools 提取常用字符（如仅保留中文常用 3000 字），减小字体文件体积。
九、预加载与预连接：提前加载关键资源
- preload关键资源
- 对首屏必需的字体、JS 文件进行预加载：
<link rel="preload" href="critical.js" as="script">
- preconnect第三方域名
- 提前建立与 API 服务器、CDN 的连接：
<link rel="preconnect" href="https://api.example.com">
十、服务端优化：减少响应延迟
- 启用 SSR/SSG
- 首屏采用服务端渲染（SSR）或静态生成（SSG），降低客户端渲染压力（如 Next.js、Nuxt.js）。
- API 响应优化
- 接口数据压缩（如 Gzip）、字段裁剪（只返回必要数据），将响应时间控制在 300ms 内。
附：用 Lighthouse 验证优化效果
- 检测步骤
- 打开 Chrome 开发者工具→Lighthouse 标签，勾选 “Performance”“Best Practices”，点击 “Generate report”。
- 核心指标解读
- LCP（最大内容绘制）：目标≤2.5s（衡量加载速度）。
- FID（首次输入延迟）：目标≤100ms（衡量交互响应性）。
- CLS（累积布局偏移）：目标≤0.1（衡量视觉稳定性）。
- 优化迭代
- 根据报告中的 “Opportunities” 板块（如 “Enable text compression”“Defer unused JavaScript”）针对性优化，每次修改后重新检测，直至核心指标达标。
总结：性能优化是持续迭代的过程
前端性能没有 “银弹”，需结合业务场景优先级实施：电商首页优先优化图片与首屏加载，后台系统侧重 JS 执行效率。通过 Lighthouse 定期检测（建议每周一次），并建立性能预算（如单页 JS 体积≤500KB），才能长期维持优质的用户体验。
你必须 登录 才能发表评论.