性能预算篇
定义关键操作的性能指标和优化目标
核心性能指标
加载性能
| 指标 | 目标值 | 测量方式 |
|---|---|---|
| 首次内容绘制 (FCP) | < 1.5s | Lighthouse |
| 最大内容绘制 (LCP) | < 2.5s | Lighthouse |
| 可交互时间 (TTI) | < 3.5s | Lighthouse |
| 首字节时间 (TTFB) | < 600ms | Lighthouse |
| 累积布局偏移 (CLS) | < 0.1 | Lighthouse |
运行时性能
| 指标 | 目标值 | 说明 |
|---|---|---|
| 帧率 (FPS) | 60fps | 滚动/动画时 |
| 输入延迟 | < 100ms | 点击响应 |
| 长任务 | < 50ms | 单个 JS 任务 |
| 内存占用 | < 150MB | 正常使用时 |
操作性能预算
导航操作
| 操作 | 目标时间 | 说明 |
|---|---|---|
| 页面切换动画 | 250-300ms | Stackflow 过渡 |
| Tab 切换 | < 100ms | 无动画情况 |
| 返回上一页 | < 150ms | 含动画 |
| 深度链接打开 | < 1s | 从外部唤起 |
钱包操作
| 操作 | 目标时间 | 说明 |
|---|---|---|
| 钱包列表加载 | < 100ms | 本地数据 |
| 单钱包余额显示 | < 200ms | 缓存命中 |
| 单钱包余额刷新 | < 2s | 网络请求 |
| 多链余额并行查询 | < 3s | 5 条链 |
| 交易历史加载 | < 1s | 首页（20条） |
加密操作
| 操作 | 目标时间 | 说明 |
|---|---|---|
| 助记词生成 | < 100ms | BIP39 |
| 地址派生（单链） | < 50ms | BIP44/Ed25519 |
| 地址派生（全链） | < 500ms | 10 条链 |
| 图案验证 | < 500ms | PBKDF2 |
| 交易签名 | < 200ms | 单笔交易 |
| 助记词解密 | < 300ms | AES-GCM |
表单操作
| 操作 | 目标时间 | 说明 |
|---|---|---|
| 输入响应 | < 16ms | 每次按键 |
| 验证反馈 | < 100ms | 字段级验证 |
| 表单提交 | < 50ms | 本地验证 |
| 地址解析 | < 200ms | ENS/域名解析 |
扫码操作
| 操作 | 目标时间 | 说明 |
|---|---|---|
| 相机启动 | < 500ms | 首次打开 |
| 二维码识别 | < 100ms | 识别延迟 |
| 结果解析 | < 50ms | URL/地址解析 |
包体积预算
总体预算
| 资源类型 | 预算 (gzip) | 说明 |
|---|---|---|
| 首屏 JS | < 150KB | 关键路径 |
| 首屏 CSS | < 30KB | 关键样式 |
| 总 JS | < 400KB | 所有路由 |
| 总 CSS | < 50KB | 所有样式 |
| 图片/图标 | < 100KB | 首屏资源 |
分包预算
| 包 | 预算 (gzip) | 触发条件 |
|---|---|---|
| vendor (核心依赖) | < 100KB | 首屏 |
| framework | < 50KB | 首屏 |
| 单路由 chunk | < 30KB | 导航时 |
| 加密库 | < 80KB | 延迟加载 |
| i18n 资源 | < 20KB/语言 | 切换语言 |
依赖预算
| 依赖类别 | 预算 | 说明 |
|---|---|---|
| UI 框架 | < 50KB | React 等 |
| 状态管理 | < 15KB | TanStack 等 |
| 导航 | < 20KB | Stackflow 等 |
| 加密 | < 80KB | noble/scure |
| 工具库 | < 30KB | 总计 |
内存预算
常驻内存
| 数据 | 预算 | 说明 |
|---|---|---|
| 应用基础 | < 30MB | 框架+组件 |
| 钱包数据 | < 5MB | 10 个钱包 |
| 缓存数据 | < 20MB | 余额+历史 |
| UI 状态 | < 10MB | 组件状态 |
| 总计 | < 100MB | 正常使用 |
峰值内存
| 场景 | 预算 | 说明 |
|---|---|---|
| 交易签名 | < 150MB | 临时增加 |
| 大列表渲染 | < 130MB | 虚拟滚动 |
| 相机扫码 | < 180MB | 视频流 |
内存泄漏
- MUST 页面卸载后释放所有订阅
- MUST 组件卸载后清理定时器
- MUST 大对象使用后置 null
- SHOULD 定期检查内存增长
网络预算
请求数量
| 场景 | 预算 | 说明 |
|---|---|---|
| 首屏加载 | < 15 | 资源请求 |
| 首页展示 | < 5 | API 请求 |
| 页面切换 | < 3 | 数据请求 |
请求大小
| 请求类型 | 预算 | 说明 |
|---|---|---|
| 余额查询 | < 2KB | 单次响应 |
| 交易历史 | < 10KB | 20 条记录 |
| 链配置 | < 5KB | 全量配置 |
并发请求
| 场景 | 最大并发 | 说明 |
|---|---|---|
| 多链余额 | 5 | 限流保护 |
| 图片加载 | 3 | 资源加载 |
| API 请求 | 4 | 总并发 |
动画性能
动画帧预算
| 时间 | 用途 |
|---|---|
| 16ms | 一帧（60fps） |
| < 10ms | JS 执行 |
| < 4ms | 渲染+合成 |
| < 2ms | 余量 |
动画规范
| 动画类型 | 实现方式 | 说明 |
|---|---|---|
| 页面切换 | CSS transform | GPU 加速 |
| 列表滚动 | 原生滚动 | 避免 JS 干预 |
| 按钮反馈 | CSS transition | < 100ms |
| 加载动画 | CSS animation | 避免 JS |
禁止的动画模式
- MUST NOT 动画中修改布局属性（width/height）
- MUST NOT 动画中触发重排（offsetTop 等）
- MUST NOT 使用 setInterval 做动画
- SHOULD NOT 同时运行超过 3 个动画
性能监控
关键指标采集
| 指标 | 采集频率 | 上报 |
|---|---|---|
| 页面加载时间 | 每次 | 聚合上报 |
| 接口响应时间 | 每次 | P95/P99 |
| 长任务 | 检测到时 | 即时上报 |
| 内存峰值 | 每分钟 | 超阈值上报 |
性能预警
| 指标 | 预警阈值 | 严重阈值 |
|---|---|---|
| FCP | > 2s | > 3s |
| LCP | > 3s | > 5s |
| 接口 P95 | > 3s | > 5s |
| 内存 | > 200MB | > 300MB |
优化策略
加载优化
| 策略 | 说明 |
|---|---|
| 代码分割 | 路由级别懒加载 |
| 资源预加载 | prefetch 下一页 |
| 图片优化 | WebP + 响应式 |
| 字体优化 | font-display: swap |
运行时优化
| 策略 | 说明 |
|---|---|
| 虚拟滚动 | 长列表 |
| 防抖节流 | 频繁操作 |
| Web Worker | 密集计算 |
| 请求合并 | 相似请求 |
缓存优化
| 策略 | 说明 |
|---|---|
| 强缓存 | 带 hash 的资源 |
| 协商缓存 | HTML 入口 |
| 本地缓存 | 业务数据 |
| 内存缓存 | 热点数据 |
性能测试
测试环境
| 设备类型 | 配置 | 说明 |
|---|---|---|
| 低端设备 | 2GB RAM, 慢 4G | 最低基准 |
| 中端设备 | 4GB RAM, 4G | 主要目标 |
| 高端设备 | 8GB RAM, WiFi | 理想体验 |
测试场景
| 场景 | 验证点 |
|---|---|
| 冷启动 | FCP < 1.5s |
| 热启动 | TTI < 1s |
| 10 个钱包 | 列表流畅 |
| 100 条交易 | 滚动 60fps |
| 弱网环境 | 超时处理正确 |
本章小结
- 所有关键操作都有明确的性能预算
- 包体积、内存、网络分别设定预算
- 动画必须保持 60fps
- 建立性能监控和预警机制
- 针对低端设备优化