【性能教室】使用Devtool进行调试 -- JavaScript Profiler

使用DevTool进行调试

所使用编辑器版本：Online_v0.24.0.0

①Memory Profiler（内存分析工具--分析内存）

②JavaScript Profiler（JS分析工具--分析CPU）

JavaScript Profiler（看CPU）

一、使用JavaScript Profiler的目的

定位分析逻辑代码或者JS语法导致的帧率过低、卡顿等CPU瓶颈问题

二、使用方法

1.在 devtool -> 右边三点->More Tools->JavaScript Profiler  打开JS Profiler

2.采样

在发生性能问题的游戏过程开始前录制

点击start按钮或者左上角的圆圈录制按钮

三、采样信息的三种视图

Chart视图

chart视图又称火焰图，我们可以利用火焰图观察整个游戏过程中cpu的消耗情况，快速定位造成卡顿的游戏逻辑或者代码位置。

一般来说，最佳的火焰图走势应该如下图1所示，由密集且细长的锯齿组成。其中，锯齿高度代表函数堆栈调用深度。宽度代表该次函数堆栈的总调用耗时。所以，我们在火焰图中应该着重关注呈“梯形”的函数堆栈(如下图2所示)

（图1）

（图2）

如下图3所示。在火焰图中将鼠标悬浮在对应的函数堆栈上，可以看到函数调用的具体信息
Self Time：该函数的自我耗时 (不包括调用栈中的其他函数耗时)
Total Time: 自该层函数起的整个调用栈耗时
Aggregated Self Time:采样过程中的总共 Self Time耗时
Aggregated Total Time:采样过程中的总共 Total Time耗时
应该重点关注Self Time耗时较高的函数（鼠标单机函数块，可以跳转至函数对应代码位置 如下图4所示）

（图3）

(图4)

Heavy 视图

Heavy视图更类似数据统计，它根据调用堆栈的最后一个函数的self time耗时依次排列(也叫自下而上图)。我们可以用heavy图统计整个游戏过程中耗时占比最大的几个函数，并对其进行优化。(如下图5所示)

值得注意的是，JS调用C++导致的调用栈耗时虽然会统计进调用栈耗时中，但是具体的C++函数将会是乱码。如下图五中的Greater_TimespanTimespan 和 anonymous 两个函数。我们可以点击函数名旁边的三角去查看上一级的调用栈。再根据业务逻辑来优化或者减少调用频次

所以在实际开发过程中，应该尽量减少或者不使用匿名函数。匿名函数无法直观地表示在数据图中，会增加我们优化和调试的难度

(图5)

Heavy视图可以快速的定位和概览某一具体函数的消耗，方便我们针对性的优化具体函数耗时和逻辑

Tree视图

Tree视图本质和Heavy视图一样，只不过Heavy视图选取的是调用栈尾函数耗时，而Tree视图则是调用栈头以及整个调用栈耗时。具体细节同样可以参考上述的Heavy视图内容

(图6)