如何读懂火焰图?

软件的性能分析,往往需要查看 CPU 耗时,了解瓶颈在哪里。

火焰图(flame graph)是性能分析的利器。本文介绍它的基本用法。

一、perf 命令

让我们从 perf 命令(performance 的缩写)讲起,它是 Linux 系统原生提供的性能分析工具,会返回 CPU 正在执行的函数名以及调用栈(stack)。

通常,它的执行频率是 99Hz(每秒99次),如果99次都返回同一个函数名,那就说明 CPU 这一秒钟都在执行同一个函数,可能存在性能问题。

$ sudo perf record -F 99 -p 13204 -g -- sleep 30

上面的代码中,perf record表示记录,-F 99表示每秒99次,-p 13204是进程号,即对哪个进程进行分析,-g表示记录调用栈,sleep 30则是持续30秒。

运行后会产生一个庞大的文本文件。如果一台服务器有16个 CPU,每秒抽样99次,持续30秒,就得到 47,520 个调用栈,长达几十万甚至上百万行。

为了便于阅读,perf record命令可以统计每个调用栈出现的百分比,然后从高到低排列。

$ sudo perf report -n --stdio

这个结果还是不易读,所以才有了火焰图。

二、火焰图的含义

火焰图是基于 perf 结果产生的 SVG 图片,用来展示 CPU 的调用栈。

y 轴表示调用栈,每一层都是一个函数。调用栈越深,火焰就越高,顶部就是正在执行的函数,下方都是它的父函数。

x 轴表示抽样数,如果一个函数在 x 轴占据的宽度越宽,就表示它被抽到的次数多,即执行的时间长。注意,x 轴不代表时间,而是所有的调用栈合并后,按字母顺序排列的。

火焰图就是看顶层的哪个函数占据的宽度最大。只要有"平顶"(plateaus),就表示该函数可能存在性能问题。

颜色没有特殊含义,因为火焰图表示的是 CPU 的繁忙程度,所以一般选择暖色调。

三、互动性

火焰图是 SVG 图片,可以与用户互动。

(1)鼠标悬浮

火焰的每一层都会标注函数名,鼠标悬浮时会显示完整的函数名、抽样抽中的次数、占据总抽样次数的百分比。下面是一个例子。

mysqld'JOIN::exec (272,959 samples, 78.34 percent)

(2)点击放大

在某一层点击,火焰图会水平放大,该层会占据所有宽度,显示详细信息。

左上角会同时显示"Reset Zoom",点击该链接,图片就会恢复原样。

(3)搜索

按下 Ctrl + F 会显示一个搜索框,用户可以输入关键词或正则表达式,所有符合条件的函数名会高亮显示。

四、火焰图示例

下面是一个简化的火焰图例子。

首先,CPU 抽样得到了三个调用栈。

func_c 
func_b 
func_a 
start_thread 

func_d 
func_a 
start_thread 

func_d 
func_a 
start_thread

上面代码中,start_thread是启动线程,调用了func_a。后者又调用了func_bfunc_d,而func_b又调用了func_c

经过合并处理后,得到了下面的结果,即存在两个调用栈,第一个调用栈抽中1次,第二个抽中2次。

start_thread;func_a;

func_b;

func_c 1 start_thread;

func_a;

func_d 2

有了这个调用栈统计,火焰图工具就能生成 SVG 图片。

上面图片中,最顶层的函数g()占用 CPU 时间最多。d()的宽度最大,但是它直接耗用 CPU 的部分很少。b()c()没有直接消耗 CPU。因此,如果要调查性能问题,首先应该调查g(),其次是i()

另外,从图中可知a()有两个分支b()h(),这表明a()里面可能有一个条件语句,而b()分支消耗的 CPU 大大高于h()

五、局限

两种情况下,无法画出火焰图,需要修正系统行为。

(1)调用栈不完整

当调用栈过深时,某些系统只返回前面的一部分(比如前10层)。

(2)函数名缺失

有些函数没有名字,编译器只用内存地址来表示(比如匿名函数)。

六、Node 应用的火焰图

Node 应用的火焰图就是对 Node 进程进行性能抽样,与其他应用的操作是一样的。

$ perf record -F 99 -p `pgrep -n node` -g -- sleep 30

详细的操作可以看这篇文章。

七、浏览器的火焰图

Chrome 浏览器可以生成页面脚本的火焰图,用来进行 CPU 分析。

打开开发者工具,切换到 Performance 面板。然后,点击"录制"按钮,开始记录数据。这时,可以在页面进行各种操作,然后停止"录制"。

这时,开发者工具会显示一个时间轴。它的下方就是火焰图。

浏览器的火焰图与标准火焰图有两点差异:它是倒置的(即调用栈最顶端的函数在最下方);x 轴是时间轴,而不是抽样次数。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程软文

分布式阿波罗Apollo配置中心

为什么要使用apollo,在我们开发分布式微服务项目的时候,那些配置一旦变更,就需要重启服务,这样非常不友好。因此我们考虑动态更改配置文件当中的配置,所以把那些...

29620
来自专栏娱乐心理测试

mpvue网络接口请求封装

在mpvue中我们同样使用小程序的原生API wx.request进行请求,具体方法如下:

48630
来自专栏hotqin888的专栏

用beego vue.js element axios 写flow办公流程——系列五

自己的认识:一定要用独立的前端,即vue.js前端项目必须是独立的,独立的服务,不要放beego里的view里作为tpl页面。虽然,放beego view里的t...

16400
来自专栏编程微刊

js通过input框输入属性和值,改变div的属性

js实现在input框里面输入属性和值,页面的 div的属性根据输入的属性和值进行变化。

67650
来自专栏码匠的流水账

聊聊flink的Execution Plan Visualization

本文主要研究一下flink的Execution Plan Visualization

14820
来自专栏成猿之路

2019开发者调查趋势与方向报告出炉

近日国外开发者平台 HankerRank 发布了 2019 年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一...

14740
来自专栏KEN DO EVERTHING

快速入门Vue

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

16910
来自专栏python教程

基于django的视频点播网站开发-step9-后台视频管理功能

从本讲开始,我们开始视频管理功能的开发,视频管理包括视频上传、视频列表、视频编辑、视频删除。另外还有视频分类的功能,会一同讲解。这一讲非常重要,因为你将学习到一...

24230
来自专栏前端vue

vue-cli3项目创建-配置-发布

(2) 修改user module -- src/store/module/user.js

4.3K40
来自专栏进击的全栈

认识Set和Map数据结构

tips : 由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致,而entries方法返回的...

17570

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励