一、性能优化的重要性
- 用户体验的核心:流畅度与响应速度
- 性能对业务指标的影响(转化率、留存率)
- 现代 Web 应用的性能挑战
- 本文目标:提供可落地的优化方案
二、性能瓶颈分析与度量
- 关键性能指标 (Web Vitals)
- LCP (Largest Contentful Paint):最大内容渲染时间
- FID (First Input Delay):首次输入延迟
- CLS (Cumulative Layout Shift):累积布局偏移
- 如何测量这些指标(Chrome DevTools, Lighthouse, Web Vitals API)
- 浏览器开发者工具剖析
- Performance 面板:记录和分析运行时性能
- Network 面板:分析加载性能
- Memory 面板:诊断内存泄漏
- 识别瓶颈类型
- 加载性能问题
- 运行时性能问题(脚本执行、渲染)
- 内存相关问题
三、加载性能优化实战
- 减少资源体积
- 代码压缩与混淆(UglifyJS, Terser)
- Tree Shaking (Webpack, Rollup):移除未使用代码
- 代码分割 (Code Splitting):按需加载
- 基于路由的分割
- 动态导入 (
import())
- Gzip/Brotli 压缩
- 优化资源加载
- 关键渲染路径优化
- 异步加载非关键脚本 (
async,defer) - 预加载关键资源 (
<link rel="preload">) - 懒加载非视口内资源(图片、组件)
- 缓存策略
- HTTP 缓存头 (
Cache-Control,ETag) - Service Worker 缓存策略
- 合理利用 localStorage/sessionStorage 缓存数据
- HTTP 缓存头 (
四、运行时性能优化实战
- 高效 DOM 操作
- 最小化重排 (Reflow) 和重绘 (Repaint)
- 批量修改 DOM(使用
DocumentFragment) - 避免在循环中频繁读写样式(读写分离)
- 使用
transform和opacity触发合成层动画
- 批量修改 DOM(使用
- 事件委托 (Event Delegation)
- 虚拟 DOM 库(React, Vue)的优化点
- 最小化重排 (Reflow) 和重绘 (Repaint)
- JavaScript 执行效率
- 算法复杂度优化
- 选择合适的数据结构(
MapvsObject,SetvsArray) - 避免不必要的循环嵌套
- 选择合适的数据结构(
- 函数优化
- 算法复杂度优化

