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操作系统的兴趣,以及对底层知识的强烈欲望,因此整理了这篇文章.本文也可以作为检验基础知识的指标,另外文章涵盖了一个系统的方方面面.如果没有完善的计算机系统知识,网络知识和操作系统知识, ...
随机推荐
- 从0 开始 WPF MVVM 企业级框架实现与说明 ---- 第三讲 WPF中 DataTemplate
后面在我们这项目中会大量用到模板,主要指的是空间模板,数据模板会用得比较少,下面我想介绍下控件模板和数据模板,我看到有位大神写得比较不错,我整理了下,让大家能更好理解,供大家参考, 首先介绍 Data ...
- .NET开源工作流RoadFlow-流程设计-保存与发布
如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...
- 在mac系统安装Apache Tomcat的详细步骤[转]
对于Apache Tomcat 估计很多童鞋都会,那么今天就简单说下在mac上进行tomcat的安装: 第一步:下载Tomcat 这里Himi下载的tomcat version:7.0.27 直接 ...
- JVM学习总结五(番外)——JConsole
之前本来打算结合自己写的小程序来介绍JConsole和VirtualVM的使用的,但是发现很难通过一个程序把所有的场景都体现出来,所以还是决定用书中的典型小例子来讲更加清晰. 一.JConsole的基 ...
- iOS9之Bitcode
Bitcode是被编译程序的一种中间形式的代码. 更新Xcode7后需要将”Build Settings”->”Enable Bitcode”设为NO,保证第三方库能真机运行项目. ...
- ios学习笔记之内存管理
一,内存管理类型定义 1,基本类型 任何C的类型,eg: int,short,char,long,long long,struct,enum,union等属于基本类型或结构体 ...
- 关于TableVIew的上下滚动如何探测其边界
UITableView is a subclass of UIScrollView, and UITableViewDelegate conforms to UIScrollViewDelegate. ...
- java数据结构和算法------顺序查找
package iYou.neugle.search; public class Sequence_search { public static int SequenceSearch(double[] ...
- Android BLE API: GATT Notification not received
When setting the value to the descriptor instead of putting descriptor.setValue(BluetoothGattDescrip ...
- “我爱淘”第二冲刺阶段Scrum站立会议1
完成任务: 完成了webservice的配置与测试,实现了在客户端的搜索功能,并且可以实现图书的发布功能,就是将图书的信息添加到数据库中. 计划任务: 在客户端实现分类功能,通过学院的分类查看书籍. ...