CocosCreator游戏性能优化（1）：性能分析工具

本文从项目用到的两个工具做介绍，Chrome Dev Tools和Spector.js。

本文链接 CocosCreator游戏性能优化（1）：性能分析工具

关联文章 CocosCreator游戏性能优化（2）：合批渲染之RenderToTarget

                CocosCreator游戏性能优化（3）：GPU优化之降低计算分辨率

一、Chrome自带调试工具

        主要检查CPU端代码的性能，GPU端可以给出一个综合的耗时。能够得到每帧时间内的代码和函数执行时序、执行耗时等信息，帮助我们找到性能热点。

        1、按下F12或者按下图步骤打开，调出chrome调式工具。

打开调式工具

        2、选择性能performance项，点击录制按钮，开始录制快照。并在几秒后点击停止来结束录制。

            选项Screenshorts：是否输出画面截图快照。

            选项Memory: 是否输出内存信息。

            根据需求自行勾选。

点击开始录制按钮

点击停止结束录制

        3、得到录制信息如下，展示了时间线和函数执行耗时。

            选中一段时间，放大可以查看

耗时快照信息

保存到本地

        4、为了更详细地获取JS热点函数情况，可以如下打开Javascript Profile工具。

打开Javascript Profile工具

录制结果信息展示

---

二、Spector.js

        Spector.js是一个检测程序每一帧时间线渲染的内容、执行的shader、以及WebGL接口调用情况。常用于分析Drawcall、相机渲染内容等场景。Spector.js一般提供npm安装以及浏览器插件的形式。本文以chrome浏览器插件为例。（npm安装：https://www.npmjs.com/package/spectorjs。 插件可以搜索浏览器扩展程序来安装）。

      1、安装Spector.js地chrome扩展程序。

安装Spector.js插件

固定入口图标

        2、捕获帧渲染内容。

捕获帧渲染内容

        3、根据生成地渲染图和详细数据分析draw地内容和性能耗时。这里每调用一次drawElements或WebGL其他draw函数，则增加一次DrawCall。我们可以根据这个指令绘制的内容，来决定是否可以将多个指令合并在一起绘制（例如合图或调整图片和文字地渲染顺序等），进而减少DrawCall，提升性能。

捕获的渲染内容和详细信息

关联文章链接：

CocosCreator游戏性能优化（1）：性能分析工具

CocosCreator游戏性能优化（2）：优化Drawcall之合批渲染

CocosCreator游戏性能优化（3）：GPU优化之降低计算分辨率