JavaScript 性能分析新工具 OneProfile

Chrome Dev Tools 自带的 CPU Profile 功能非常好用。用它可以方便的生成 JavaScript 的Flame Chart。

更棒的是你可以把Flame Chart导出，留着下次或者拷贝到其它机器上查看，特别好奇它是怎么实现的。

但是网上关于它的文件格式以及怎么画图的文档非常稀有，所以我自己摸索了一下它的文件格式,并尝试着用另一种方式展示 CPU Profile 的结果。

如何生成 CPU Profile 文件

使用最新版的 Chrome 打开任意一个测试网站，按 F12 打开Devtools， 切换到Profiles页，点击Start开始

收集 Profile 信息，在当前页面任意滑动鼠标等待大约5秒后， 点击Stop停止 Profile。在生成的 CPU Profile 名字上单击右键可以导出.cpuprofile后缀名的文件。

你可以自己生成一个，也可以直接下载这个用来测试sample.cpuprofile

理解 .cpuprofile 文件格式

用你的编辑器打开sample.cpuprofile，你会惊奇的发现：

1.sample.cpuprofile其实就是一个 JSON 格式的文件，有head,timestamps,samples等几个重要的属性

2.head指向一个结点，官方的名字叫CpuProfileNode，同时它的children指向子结点, 因此是一个嵌套结构

3.CpuProfileNode有很多重要的属性，包括 functionName，lineNumber，columnNumber，hitCount 等

4.timestamps是一个数组，记录着 Profiling 过程中每个采样点的时间戳

5. 对应timestamps下的每个时间点，samples数组相同的位置都会有一个数字，这个数字比较神秘，后面解释

CpuProfileNode 详解

1. {

2. "functionName":"lineTo",

3. "scriptId":"0",

4. "url":"",

5. "lineNumber":0,

6. "columnNumber":0,

7. "hitCount":45,// 被采样到的次数

8. "callUID":6,// 函数入口的 UID

9. "children":[],

10. "positionTicks":[

11. {

12. "line":1,

13. "ticks":45

14. }

15. ],

16. "deoptReason":"",// 逆优化的原因

17. "id":11

18. }

samples, timestamps 和 CpuProfileNode 的关系

如果从head开始，对head结点及其children属性下的结点做一次深度优先的遍历，每个可能路径都会有一个编号。

研究表明这个数字正对应于samples的值。因此知道了路径编号，便可以知道那些函数处在激活状态。在OneProfile中用蓝色表示。

OneProfile 使用说明

链接地址

使用 Chrome 打开：OneProfile

图例

黑色系统函数

暗红色存在逆优化的函数，鼠标悬停可见原因

蓝色当前采样点活动的函数

操作

滚轮缩放窗口

prev前一个采样点

next后一个采样点

一些用例

某在线地图网站的前端代码，红色较多说明存在大量 v8 无法优化的代码

原文链接：
http://www.gbtags.com/gb/share/5945.htm