JavaScript 性能分析新工具 OneProfile
OneProfile 是一个网页版的小工具,可以用全新的方式展示 JavaScript 性能分析的结果,帮助开发者洞悉函数调用关系,优化应用性能。
背景
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 详解
{
"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
中用蓝色表示。
OneProfile 使用说明
链接地址
使用 Chrome 打开: OneProfile
图例
黑色
系统函数
暗红色
存在逆优化的函数,鼠标悬停可见原因
蓝色
当前采样点活动的函数
操作
滚轮
缩放窗口
prev
前一个采样点
next
后一个采样点
一些用例
某在线地图网站的前端代码,红色较多说明存在大量 v8 无法优化的代码
是不是很像外星人
( 请原谅作者笑点低 >< )
关于
本文相关的源码在:
https://github.com/wyvernnot/javascript_performance_measurement/tree/gh-pages/cpuprofile_topology;
本文由OneAPM工程师原创 ,想阅读更多技术文章,请访问OneAPM官方技术博客。
JavaScript 性能分析新工具 OneProfile的更多相关文章
- JavaScript 堆内存分析新工具 OneHeap
OneHeap 关注于运行中的 JavaScript 内存信息的展示,用可视化的方式还原了 HeapGraph,有助于理解 v8 内存管理. 背景 JavaScript 运行过程中的大部分数据都保存在 ...
- 用Chrome开发者工具做JavaScript性能分析
来源: http://blog.jobbole.com/31178/ 你的网站正常运转.现在我们来让它运转的更快.网站的性能由页面载入速度和代码执行效率决定.一些服务可以让你的网站载入更快,比如压缩J ...
- Linux性能分析命令工具汇总
转自:http://rdc.hundsun.com/portal/article/731.html?ref=myread 出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章. ...
- Android性能分析Systrace工具
一.概述 保证系统流畅度,也就是保证系统能连续不间断地提供每秒60帧的运行状态.当出现掉帧时(也可称为Jank),需要知道当前整个系统所处的状态,systrace便是最佳的选择,它能手机检测Andro ...
- 性能分析之工具使用——cpu、io 、mem【工具分析】
nmon nmon 是一种在aix 与各种 Linux 操作系统上广泛使 用的监控与与分析工具,他主要记录以下内容: • cpu 占用率 • 内存使用情况 • 磁盘I/O 速度.传输和读写比率 • 文 ...
- 后台故障&性能分析常用工具
说明 本文是一个归纳总结,把常用的一些指令,及它们常用的option简单记录了一下,目的是当我们需要工具去定位问题的时候,能够从中找到合适的工具,具体的用法网上有很多博文了,当然还有man手册.参考了 ...
- Linux Performance Analysis and Tools(Linux性能分析和工具)
首先来看一张图: 上面这张神一样的图出自国外一个Lead Performance Engineer(Brendan Gregg)的一次分享,几乎涵盖了一个系统的方方面面,任何人,如果没有完善的计算系统 ...
- Linux 性能分析工具汇总合集
出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识, ...
- [转]Linux性能分析工具汇总合集
出于对Linux操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识, ...
随机推荐
- sqlserver,sqlite,access数据库链接字符串
SqlServer:string connection = "server=32.1.1.48;database=数据库名;user=sa;password=sa2008"; ac ...
- CA证书过期
CA证书问题请教!最近在客户这里做Exchange2010及RMS项目,对当前Ca证书颁发机构的环境做了下勘察和调研,发现有些地方出现警号显示过期,不知道会不会影响Exchange和Adrms的集成部 ...
- jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的 可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 通过一个简单的例子,简单区分下jQuer ...
- struts2框架基本操作总结
struts技术说明 一:第一配置开发环境 1.struts.xml文件 <?xml version="1.0" encoding="UTF-8" ?&g ...
- TFS(Taobao File System)安装方法
文章目录: 一.TFS(Taobao File System)安装方法 二.TFS(Taobao File System)配置dataServer.分区.挂载数据盘 三.TFS(Taobao File ...
- IOS中GPS定位偏移纠正(适用于Google地图)
在这个神奇的国度里,我们总得学习一些有中国特色的东东,例如“火星坐标”.也许有人还不知道这是什么玩意,我就简要介绍一下吧. 如果你有带GPS模块的智能手机,打开定位功能,然后访问Google ...
- MVC4.0 WebApi如何设置api支持namespace
1.自定义HttpControllerSelector /// <summary> /// 设置api支持namespace /// </summary> public cla ...
- 关于使用,NI采集卡+labview信号采集,问题交流【第二贴】
*** 采集卡 NI PCI-6534: max sample rate 20MHz:32位的数字输入,数字输出. ***输入信号: 峰峰值,4.16V 最小值 -80mV 频率 ...
- Android实现简单音乐播放器(MediaPlayer)
Android实现简单音乐播放器(MediaPlayer) 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能 ...
- P3380: [Usaco2004 Open]Cave Cows 1 洞穴里的牛之一
还是蛮简单的一道题,首先dfs一遍,在所有能到达放有干草的洞穴的所有路径中,找出路径上最小伐值的最大值,按这个值由小到大,再来一遍贪心就行了,能放就放,不能放拉倒(也可以理解为,不能放把最前一个删了) ...