引擎和小游戏都有提供一个性能面板，给开发者们暴露了下面几个性能指标： Frame time(ms)每一帧的时间。《RAIL模型》建议在10毫秒或更短的时间内制作动画中的每一帧。从技术上讲，每帧的最大预算为16毫秒（1000毫秒/每秒60帧≈16毫秒），但是浏览器需要大约6毫秒才能渲染每帧，因此建议每帧10毫秒或者更短。
Framerate(FPS)帧率，也叫每秒传输帧数(FPS：Frames Per Second)，是指画面每秒传输帧数，通俗来讲就是指动画或视频的画面数；每秒钟帧数越多，所显示的动作就会越流畅，举个例子电影的帧频是24，也就是说1s需要播放24张图片，但是实际上在游戏过程中一般人能接受的最低FPS约为30Hz。帧率也非越高越好，因为显卡处理能力=分辨率×刷新率，分辨率不变的情况下，帧频越高，GPU处理的数据量也会激增，引起卡顿。同理，分辨率也不是越高越好。在某些终端的性能面板下也会展示这三个相关的参数：rt-fps：实时帧率；ex-fps：极限帧率；min-fps：最小帧率；
Draw call 。CPU和GPU是并行工作的，它们之间存在一个命令缓冲区。当CPU需要调用图形编程接口的时候就会往命令缓冲区里面增加命令，当GPU完成上一次渲染命令的时候就会继续从命令缓冲区中执行下一条命令，命令缓冲区里面的命令有很多种，而drawcall就是其中的一种。CPU在提交drawcall的时候需要处理很多东西，比如一些数据、状态、命令等等，有些渲染卡顿问题就是因为GPU渲染速度比drawcall的提交速度快，可能上一次渲染完了，CPU还在计算drawcall，所以drawcall的性能瓶颈在于CPU。优化drawcall最有效的方法合批渲染，就是把大量小的drawcall合并成大的drawcall，减少drawcall的数量。
Tris 和 Verts是渲染的三角面数以及顶点数，在webgl中只有三种基本图元，分别是点、线段和三角形，无论多么复杂的模型本质上都是由这三个基本图元绘制而来的，无论形状多么怪异，它们的本质都是由一个个顶点组成，GPU 将这些点用三角图元绘制成一个个的微小平面，再把这些三角网格互相连接，就能绘制出各种复杂的物体了；
一般来说模型的顶点和三角形数越低，模型的复杂度就会越低，所以这两个参数在3D模型中比较有参考意义，设计师在输出3D模型的时候一般都会帮忙去合并一下网格。但是在大部分情况下，我们都会认为性能瓶颈在drawcall上，比如有两种情形，情景一是有1000个物体，每个物体的顶点数是10，情景二是有10个物体，每个物体的顶点数是1000，哪个情景的性能更好？首先我们要明白GPU的渲染速度是非常快的，渲染10个顶点组成的三角图元和1000个顶点组成的三角图元通常没啥区别，所以这两种情形中产生drawcall更少的情景二性能更好。当然如果你在shader里面对顶点做了一些特殊的处理，比如复杂的计算啥的，那就得权衡一下这两个指标的大小影响了
节选自微信公众号Creator星球游戏开发社区
