5.4 帧的仪表盘：性能分析与调试

5.4 帧的仪表盘：性能分析与调试

本节摘要：优化前先读表——引擎自带帧率与调用计数器、场景检查器 Inspector 与可视化调试图层三套仪表。本节讲各仪表的读数方法、二分排查的固定流程，并把性能预算表落成项目制度。承接并收束第5章全部手法，是动手优化前的必读节。

一、引擎自带的仪表

第一套仪表的性能统计面板一行开启，覆盖 1.2 节三本账的关键读数（帧率、调用数、网格数、帧耗时）；检查器作为第二套仪表下面单独讲。读数的编程接口用于自定义面板或周期上报：

// 计数器读数：周期采样，攒起来上报
const frameLog = [];
setInterval(() => {
  frameLog.push({
    fps: engine.getFps(),                          // 帧率：用户体感
    activeMeshes: scene.getActiveMeshes().length,  // 本帧可见网格数
    activeParticles: scene.getActiveParticleSystems().length,
  });
  // 绘制调用数在检查器的统计面板直接读，也可在渲染后回调里打点记录
}, 1000);
// 把 frameLog 上报内部监控：线上性能问题的第一手数据
​

读数要盯的四个指针：帧率、可见网格数、绘制调用数、每帧耗时。前三个定位"哪一段超支"，第四个定位"哪一帧超支"。线上环境把这些读数周期性上报，用户设备的真实分布比办公室测试机可信十倍——移动端性能方差极大，"我这里流畅"从来不是验收标准。

第二套仪表是检查器 Inspector，引擎自带的场景体检面板，独立于代码存在：

// 打开检查器：浏览器里出现一棵可交互的场景树
scene.debugLayer.show();
// 常用三板斧都在面板上：
// 一 场景树逐层展开：每个网格的顶点数、包围盒、可见性一目了然
// 二 材质实时调参：选中网格直接改通道参数，效果即时可见，3.1 的实验用它做更快
// 三 纹理清单：全部贴图的尺寸与占用，5.2 的显存排查从这里开始
​

检查器最强的能力是"定位异常个体"：帧率掉、调用数高，但不知道是哪些网格的锅——展开场景树按顶点数排序，那个 40 万顶点的"小石子"立刻现形。它还是材质调试的加速器：不写代码直接调参数，调满意了把数值抄回代码，比改一版跑一版快一个量级。

第三套是可视化调试图层，把抽象状态画到画面上：骨骼线、包围盒、拾取射线，排查 4.2 拾取问题时把射线画出来，比盯着坐标猜直观一百倍。三套仪表不必同时常开，按项目阶段各司其职：

二、二分排查：不靠猜的流程

仪表会读只是入门，关键是流程。卡顿排查的固定动线是二分：每一步只改一个变量，让证据指向下一段。第一步，降分辨率：帧率明显回升，指向 GPU 侧（着色与像素超支），进 5.1 的第三段处理；纹丝不动，进第二步。第二步，藏一半网格：把场景子树整棵 setEnabled 关掉（5.3 的零号手段），帧率回升说明被藏的部分有问题，继续对半分；全部藏光还不行，进第三步。第三步，查脚本层：帧回调里的每帧分配（5.2 的垃圾回收尖刺）、同步网络请求、无节流的拾取（4.2 的红线）。

这个流程的每一分叉都有"证据"才走：回升幅度超过两成才算"明显"，否则继续当前分支。二分排查的次数上限是场景规模的常用对数——上千网格的场景四五步就能把元凶锁到个位数，比逐个怀疑快得多。

案例：线上反馈某展厅手机端卡顿。操作：第一步降分辨率，帧率从 24 到 25，基本没动，排除 GPU 侧；第二步按房间关子树，关到第三个房间帧率跳到 55——元凶在内。结果：该房间有面"展项墙"，150 个独立小网格各自带材质。解读：典型的调用数爆炸（5.1 的病理），三板斧中"合并加材质共享"正好对症：150 件按材质合成 3 个网格。变式：若第二步全部关完仍卡，就查该房间的动态纹理（每帧全屏重绘的血条其实没人看）与音频解码（进入房间才解码的环绕声）——按 4.4 的纪律处理。

三、预算表：把优化变成制度

排查解决"现在慢"，预算表防止"将来慢"。项目立项时定红线，联调时定期跑一遍仪表抄表对比，超线的不是"以后再说"而是当下退回。一张够用的预算表长这样：

红线数值按项目类型调整，重要的是"有红线、能抄表、超线必处置"这三个动作形成闭环。性能是设计出来的，不是最后补出来的——预算表就是让设计阶段就看见成本的那张表。

💡 关键直觉：所有仪表读数都看"最坏朝向"与"最差设备"（5.1 的教训在仪表层的重申）。办公室的高配机与默认视角是两个糖衣，上线前的性能验收必须换最差档设备、把镜头怼到最密处。

三个常见读数误读

帧率 60 就万事大吉？ 平均值掩盖尖刺。每秒 60 帧的均值里完全可以藏一次两百毫秒的停顿，玩家记得的就是那一下。读数要看帧耗时的尾部分布，1.3 节的尖刺面孔（纹理上传、着色器编译、垃圾回收）只在最差值里现形。

调用数低就一定流畅？ 调用数只是 CPU 账的一个指针。一次全屏后期、一枚高分辨率阴影贴图，调用数不高照样卡，它们贵在别处。四个指针交叉印证，单一指针都会骗人。

桌面测过手机就稳？ 移动端方差极大：同标"中端"的机器显存配额能差三倍，散热策略天差地别——有的机型跑三分钟就降频，帧率曲线随时间下滑。真机抽检加线上上报，比任何经验法则都可靠。

本节要点回顾

• 三套仪表：计数器看四个指针、检查器定位异常个体、调试图层可视化抽象状态
• 读数上报线上：真实设备分布是优化的第一手依据
• 二分排查：降分辨率、藏子树、查脚本，每步只改一个变量且要证据
• 检查器是加速器：材质无代码调参、场景树按顶点排序揪异常网格
• 预算表三动作：有红线、能抄表、超线必处置

第5章完成，优化从手艺变成了流程。下一章升级帧的出口：后期处理、WebXR，以及把六章知识装配成完整游戏与前沿方向的收官。