解读Cocos Creator的调试信息面板

2.x调试信息面板解读

Framerate(FPS)帧率
也叫每秒传输帧数(FPS：Frames Per Second)，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数；每秒钟帧数越多，所显示的动作就会越流畅，但GPU处理的数据量也会激增，可能引起卡顿。游戏一般以60帧为目标满帧运行，当低于30帧时，则会感受到明显的卡顿。

Draw call
CPU和GPU是并行工作的，它们之间存在一个命令缓冲区。当CPU需要调用图形编程接口的时候就会往命令缓冲区里面增加命令，当GPU完成上一次渲染命令的时候就会继续从命令缓冲区中执行下一条命令，命令缓冲区里面的命令有很多种，而drawcall就是其中的一种。
CPU在提交drawcall的时候需要处理很多东西，如一些数据、状态、命令等，有些渲染卡顿问题就是因为GPU渲染速度比drawcall的提交速度快，可能上一次渲染完了，CPU还在计算drawcall，所以drawcall过高会造成CPU性能瓶颈。

Frame time(ms)
Frame time = 1/ FPS, 每一帧的时间。如果我们的游戏运行预期目标是满帧60帧，每帧的最大预算为16毫秒（1000毫秒/每秒60帧≈16毫秒）。

Game Logic(ms)
游戏逻辑耗时

Renderer(ms)
渲染耗时

3.x调试信息面板解读

与2.x相似部分不再赘述。

Instance Count
GPU INSTANCING的数量。INSTANCING指几何体实例化：图形API每秒能渲染的批次有限，想要渲染一片森林（有小差异的大量小物体）的话需要用到实例化。
实例化目标是使应用程序能最小化状态和纹理变化次数，并在一次图形接口调用中把同一批次的同一个三角形渲染多次，这样就能最小化花费在提交批次的CPU时间,即所谓的“一次提交，多次渲染”。在用于大批量重复物件渲染时效果显著。

Triangle
三角面数量
在2D游戏中纹理贴图都是矩形存在的，一个矩形由两个三角形组成，所以一张纹理贴图占用两个三角面数量。在3D游戏中，模型Mesh由N个小三角面形成。

Physics(ms)
物理引擎耗时

GFX Texture Mem(M)
纹理缓存

GFX Buffer Mem(M)
GFX(即Graphics是指图形的缩写)缓存

小知识补充

比如要自定义性能面板的颜色

    const profilerNode = cc.director.getScene().getChildByName('PROFILER-NODE');
        if (profilerNode) {
            // 找到了 PROFILER-NODE 节点
            console.log('找到 PROFILER-NODE 节点:', profilerNode);
            let children = profilerNode.children;
            for (let index = 0, len = children.length; index < len; index++) {
                const element = children[index] as cc.Node;
                element.color = cc.Color.RED;
            }
        } else {
            // 没有找到 PROFILER-NODE 节点
            console.log('没有找到 PROFILER-NODE 节点');
        }