摘要：是一个网页版的小工具，可以用全新的方式展示性能分析的结果，帮助开发者洞悉函数调用关系，优化应用性能。研究表明这个数字正对应于的值。因此知道了路径编号，便可以知道那些函数处在激活状态。在中用蓝色表示。
OneProfile 是一个网页版的小工具，可以用全新的方式展示 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 详解
js{
"functionName": "lineTo",
"scriptId": "0",
"url": "",
"lineNumber": 0,
"columnNumber": 0,
"hitCount": 45, // 被采样到的次数
"callUID": 6, // 函数入口的 UID
"children": [],
"positionTicks": [
{
"line": 1,
"ticks": 45
}
],
"deoptReason": "", // 逆优化的原因
"id": 11
}
samples, timestamps 和 CpuProfileNode 的关系
如果从 head 开始，对 head 结点及其 children 属性下的结点做一次深度优先的遍历，每个可能路径都会有一个编号。
研究表明这个数字正对应于 samples 的值。因此知道了路径编号，便可以知道那些函数处在激活状态。在 OneProfile 中用蓝色表示。
链接地址
使用 Chrome 打开： OneProfile
图例
黑色 系统函数
暗红色 存在逆优化的函数，鼠标悬停可见原因
蓝色 当前采样点活动的函数
操作
滚轮 缩放窗口
prev 前一个采样点
next 后一个采样点
一些用例
某在线地图网站的前端代码，红色较多说明存在大量 v8 无法优化的代码
是不是很像外星人
( 请原谅作者笑点低 >< )
关于本文相关的源码在：
https://github.com/wyvernnot/javascript_performance_measurement/tree/g...;
本文由OneAPM工程师原创 ，想阅读更多技术文章，请访问OneAPM官方技术博客。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85854.html
摘要：关注于运行中的内存信息的展示，用可视化的方式还原了，有助于理解内存管理。背景运行过程中的大部分数据都保存在堆中，所以性能分析另一个比较重要的方面是内存，也就是堆的分析。上周发布了工具，可以用来动态地展示的结果，分析各种函数的调用关系。 OneHeap 关注于运行中的 JavaScript 内存信息的展示，用可视化的方式还原了 HeapGraph，有助于理解 v8 内存管理。 ...
摘要：如果你的运行缓慢，你可以考虑是否能优化请求，减少对的操作，尽量少的操，或者牺牲其它的来换取性能。在认识描述这些核心元素的过程中，我们也会分享一些当我们构建的时候遵守的一些经验规则，一个应用应该保持健壮和高性能来维持竞争力。 一个开源的前端错误收集工具 frontend-tracker，你值得收藏~ 蒲公英团队最近开发了一款前端错误收集工具，名叫 frontend-tracker ，这款...
摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。背后的故事本文是对于年之间世界发生的大事件的详细介绍，阐述了从提出到角力到流产的前世今生。 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎...
摘要：入门，第一个这是一门很新的语言，年前后正式公布，算起来是比较年轻的编程语言了，更重要的是它是面向程序员的函数式编程语言，它的代码运行在之上。它通过编辑类工具，带来了先进的编辑体验，增强了语言服务。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不觉已经到来了，总结过去的 2017，相信小伙们一定有很多收获...
阅读 1104·2023-04-26 03:05
阅读 587·2021-10-19 11:43
阅读 2781·2021-09-26 09:55
阅读 604·2019-08-30 15:56
阅读 828·2019-08-30 15:44
阅读 1038·2019-08-30 15:44
阅读 2562·2019-08-30 14:23
阅读 3112·2019-08-30 13:13
