1、简介
一个DrawCall就是CPU向GPU发送一次绘制命令，例如：某个场景的DrawCall是80，代表该场景每个渲染帧内GPU需要绘制80次。每一次DrawCall都需要传输纹理、顶点数据以及渲染上下文切换，是非常消耗性能的操作，DarwCall过高会直接影响游戏的整体性能，带来卡顿、CPU占用率高、设备发烫等问题。所以游戏的DrawCall越低越好，应该尽可能多的将节点数据合并，减少提交和绘制次数。
如果发现DrawCall已经过高，如何判断哪些DrawCall是可以合并的呢？Web端有个强大的工具SpectorJS，可以很方便的查看当前渲染状态、DrawCall等信息，以可视化的方式来帮助分析。（SpectorJS的作者也是微软开发的WebGL引擎BabylonJS的开发者）
2、安装SpectorJS
SpectorJS工具提供了npm模块、Chrome扩展程序等多种安装方式。本文以Chrome扩展程序为例。
通过Chrome浏览器的菜单，进入“扩展程序”界面，输入“Spector”，然后安装即可，如下所示。
提示：如果你未搜索到Spector，请科学上网:)
3、使用SpectorJS
3.1
SpectorJS安装完成后，Chrome浏览器的地址栏右侧将会出现一个红色小图标，如下所示。
默认情况下，SpectorJS处于非工作状态。
3.2
点击这个红色图标，图标变成绿色，SpectorJS开始工作，将重新加载当前页面，并注入调试代码用来收集当前Web页面的渲染信息，如下所示。
3.3
点击这个绿色图标，将会弹出一个提示窗口，如下所示。
3.4
点击这个窗口上方的红色圆圈，稍等片刻，SpectorJS收集完信息后，会自动新打开一个Chrome页面，并展示收集到的渲染信息，如下所示。
例如，本Web页面有4个DrawCall，则SpectorJS大约生成4-6张截图，从图中左侧图列可以看出，每一张截图对应一个DrawCall，通过比较不同图片的差异，就能看出本次DrawCall究竟绘制了什么，从而帮助判断DrawCall是否可以合并。
我在自己项目中用这个工具分析，DrawCall减少了20%，优化过程有点纠结，需要把一些正常模块和逻辑重组，以符合DrawCall批次合并需求。
