动画性能直接影响演示体验：卡顿、掉帧、低端设备崩溃都让人尴尬。本节给一份明确的性能预算与排查清单。

性能目标

终端	目标
现代 PC（i5+ / Ryzen 5+）	60fps 稳定
教室一般 PC（i3 / 老 i5）	30fps 不卡顿
iPad / 平板	60fps
手机	30fps
大屏 / 电视	60fps

单页元素预算

元素数	性能影响
< 20	任意动画无压力
20–50	普通设备无压力，避免大范围 zoom
50–100	编辑器警告，建议简化
100–200	强警告，性能不达标
> 200	强制阻断

高开销动画

按"昂贵程度"排序：

动画	CPU / GPU 开销	建议
transform (translate / scale / rotate)	极低	优先用
opacity	极低	优先用
box-shadow 动画	高	慎用
filter (blur / brightness)	中	避免大面积
clip-path	中	复杂路径慎用
width / height 动画	高（触发 layout）	改用 scale
top / left 动画	高	改用 transform

GGB / HTML 嵌入开销

嵌入类型	启动开销	稳定开销
GGB iframe	高（300–800ms 首次加载）	中（持续 JS 计算）
HTML 简单组件	低（< 100ms）	低
HTML 复杂（Three.js）	中	高（GPU 持续）
视频	低（自动懒加载）	低（解码硬件加速）

建议：单页 GGB ≤ 2、复杂 HTML ≤ 2、视频 ≤ 1。

动画时长性能影响

时长	影响
< 200ms	几乎无
200–500ms	标准
500–1000ms	注意复杂度
> 1000ms	慢动画期间整页负载持续

课堂模式特殊考虑

Layer 3 课堂系统下，50 个学生同时打开同一页面：

• 服务端：只用同步消息（轻量）
• 学生端：每人本地独立运行 GGB / HTML（不共享）
• 总集群成本：50 × 单端开销

如果单端能撑，50 人课堂就能撑。详见「38. 课堂互动系统」。

性能调试

F12 浏览器 DevTools

F12 → Performance 标签 → 录制 5s →
  ├ Frames：每帧渲染时间，黄色 = 超时
  ├ JS：JavaScript 占用 CPU 时间
  └ Layers：合成层数量

玄武屏内置性能监视

「视图 → 性能监视」打开：

• 实时 fps
• 元素渲染耗时分布
• 高开销元素红色高亮
• 内存占用

优化清单

按效果从高到低：

1. 元素数减半：拆页是最有效的优化
2. 关闭 box-shadow / filter 动画：改为静态 / 入场后冻结
3. 大图压缩：> 1MB 的图片会卡入场动画
4. GGB / HTML 减量：保留 1-2 个核心
5. 简化缓动：spring → ease-out
6. 缩短时长：800ms → 400ms
7. 预加载：长视频先 preload="metadata"

离线包性能

离线 HTML 包性能比在线版本好（无网络延迟）：

• 资源全本地，加载快
• 适合教室固定使用

详见「58. 离线 HTML 包」。

大屏 / 展厅性能

详见「45. 21:9 / 32:9 超宽适配」与「84. 性能配置与调优」。

下一节讲动画调试与回放。