性能优化 (optimize)

性能优化（optimize）

概述

optimize 是识别和修复界面性能问题的技能。它的核心是：让界面加载更快、运行更流畅、体验更顺滑。

作为设计师/开发者，你可能遇到过：

• “页面加载太慢”
• “滚动的时候卡顿”
• “动画不流畅”
• “手机端特别慢”

optimize 就是解决这些的。

为什么性能重要

1. 性能影响留存

页面加载时间 vs 跳出率：

- 1 秒：32% 跳出率
- 3 秒：53% 跳出率
- 5 秒：90% 跳出率

每慢 1 秒，转化率下降 7%

2. 性能影响体验

用户感知：

快：流畅 → 愉悦 → 信任
慢：卡顿 → 烦躁 → 离开

性能 = 用户体验

3. 性能影响 SEO

搜索引擎排名因素：

- Core Web Vitals 是排名因素
- 移动端速度影响排名
- 性能直接影响收录

性能指标

Core Web Vitals

指标	定义	目标	影响
LCP	最大内容绘制	< 2.5s	加载体验
INP	交互响应	< 200ms	交互体验
CLS	累积布局偏移	< 0.1	视觉稳定性

其他指标

指标	说明	目标
FCP	首次内容绘制	< 1.8s
TTI	可交互时间	< 3.8s
TTFB	首字节时间	< 0.8s

优化策略

1. 加载性能

图片优化：

✅ 正确：
- 使用 WebP/AVIF 格式
- 响应式图片（srcset）
- 懒加载（loading="lazy"）
- 正确尺寸

❌ 错误：
- 使用过大的图片
- 使用 PNG/JPG 当图标
- 一次性加载所有图片

代码优化：

✅ 正确：
- Code Splitting
- Tree Shaking
- 压缩代码
- 异步加载非关键代码

❌ 错误：
- 全部代码打包到一个文件
- 加载不需要的库
- 未压缩的代码

CDN：

✅ 正确：
- 静态资源放 CDN
- 就近访问
- 缓存优化

2. 渲染性能

避免 Layout Thrashing：

❌ 错误（强制同步布局）：
const width = el.offsetWidth;
el.style.width = width + 'px';

✅ 正确（批量读取）：
const width = el.offsetWidth;
// 读取多个属性
el.style.width = width + 'px';

优化动画：

✅ 正确（GPU 加速）：
transform: translateX(100px)
opacity: 0.5
filter: blur(5px)

❌ 错误（触发布局）：
margin-left: 100px
width: 50%
padding: 10px

减少重绘：

✅ 正确：
- 使用 CSS 变量
- 使用 transform
- 使用 will-change 提示

❌ 错误：
- 频繁修改 DOM
- 复杂的 CSS 选择器
- 未缓存的选择器查询

3. 网络优化

减少请求：

- 合并小文件
- 使用 CSS Sprites
- 内联关键 CSS
- HTTP/2 多路复用

缓存策略：

- 静态资源长期缓存
- API 响应缓存
- Service Worker 离线缓存

实践案例

案例 1：图片加载优化

问题：

• 首页 20 张图片，全部加载
• 平均大小 500KB
• 总加载 10MB

优化后：

1. 使用 WebP 格式（减少 30%）
2. 响应式图片（只加载需要的尺寸）
3. 懒加载（非视口图片不加载）
4. 渐进式加载（先模糊后清晰）

结果：
- 首屏加载：10MB → 1.5MB
- LCP：4s → 1.2s

案例 2：Bundle 优化

问题：

• 所有代码打包成一个文件
• 大小 2MB
• 首屏加载慢

优化后：

1. Code Splitting（按路由分割）
2. 动态 import（异步加载）
3. Tree Shaking（移除未使用代码）
4. 压缩代码（Terser）

结果：
- 首屏包：2MB → 200KB
- TTI：5s → 1.5s

案例 3：动画优化

问题：

• 页面滚动卡顿
• 动画掉帧
• 移动端特别明显

优化后：

1. 使用 transform/opacity
2. 使用 will-change 提示
3. 禁用 hover 效果（移动端）
4. 降级复杂动画

结果：
- 60fps 稳定
- 移动端流畅

性能检测工具

Chrome DevTools

Lighthouse：
- Performance Score
- 详细优化建议
- 历史对比

Performance：
- 帧率分析
- 性能瓶颈
- 重绘/重排

Network：
- 请求分析
- 瀑布图
- 缓存分析

在线工具

- PageSpeed Insights
- WebPageTest
- GTmetrix
- SpeedCurve

性能检查清单

加载

• 图片使用现代格式（WebP/AVIF）？
• 图片使用懒加载？
• 代码有分割和压缩？
• 静态资源放 CDN？

渲染

• 动画使用 transform/opacity？
• 避免强制同步布局？
• 使用 CSS 变量？

网络

• 请求数合理？
• 启用缓存？
• 启用压缩？

监控

• Core Web Vitals 达标？
• 移动端性能良好？
• 有性能监控？

速查卡片

核心指标

LCP < 2.5s INP < 200ms CLS < 0.1

图片优化

• WebP/AVIF
• 响应式
• 懒加载

代码优化

• Code Splitting
• Tree Shaking
• 压缩

动画优化

transform/opacity 避免 layout

与其他技能

• audit - 性能审计
• polish - 打磨
• harden - 边界情况

---

查看源文件: GitHub原始文件