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，提升性能。
捕获的渲染内容和详细信息
关联文章链接：
