放大之后，我们很快就发现这个耗时591ms的长任务，有90%的时间都花费在了一个叫init的方法上，这个方法一共执行了6次，其中3/4/6耗时尤其长
这个init方法到底是做什么的呢？
可能是挂在Vue组件的，会不会是有些组件特别大，里面的逻辑太复杂，这里需要掘金的前端给出答案。
再看下左边那个第二大的火焰，同样滚动鼠标滚轮把它放大
我们发现其中有一个forEach循环特别耗时，这个循环好像在计算什么东西，一共花了150ms。
这个依然需要看下具体的源码才能找到问题的根因。
最后给大家分享下我自己之前在XBoard看板项目中，通过火焰图发现一个依赖库的性能问题。
也是遵循一样的思路：
找到长任务
将长任务的火焰图放大
一层层往下找，直到找到一个耗时长的有名字的方法（现网大部分代码被压缩混淆了，看不出名字，开发环境会更方便定位到存在性能问题的方法）
在火焰图中点击这个方法，看详情面板中Function后的链接，点击这个链接，直接跳转到相应文件中的指定方法中
在源码中搜索这个方法名字，找到它
寻找解决方案
当时XBoard看板页有一堆长任务，我找了其中的TOP3
然后将第一个长任务放大，很快就有了收获，我发现其中有一个叫drawQrCode的方法耗时比较长，一共花了192ms。
接着通过查看详情，发现这是一个依赖库的方法，该依赖库定义了一个drawQrCode用来绘制二维码，而这个二维码其实不在看板页面上，而是需要通过鼠标hover到某个按钮上才加载出来。
所以当时解决的方案就是延迟drawQrCode方法的执行，即：
首页加载时，不执行drawQrCode方法，当鼠标移到相应按钮上时，才执行。
瀑布图代表浏览器发起向服务器的请求，然后浏览器根据服务器返回的数据，通过脚本执行相应的逻辑和页面的渲染。
当瀑布图有请求块时，说明浏览器在向服务器请求数据，如果浏览器必须依赖这些数据来做下一步的页面渲染，那么在服务器返回数据之前，很可能浏览器就没事干，然后火焰图上出现空白，饼图也会出现空闲（Idle）。
当浏览器拿到服务器返回的数据时，主线程正在处理这些数据，并渲染页面，因此很可能就没法向服务器发请求，这时瀑布图就会出现空白。
所以
发现瀑布图出现空白，很可能存在长任务，需要找到具体的耗时方法，并进行优化
发现火焰图出现空白，很可能是某些后台接口慢或者存在超大静态资源，需要定位到慢的原因，并想办法优化
小结本文先给大家简单介绍了如何生成网站的性能分析报告，以及这份报告的大致组成；
接着跟大家分享我自己在定位业务性能问题时，经常使用的三步法：在瀑布下用火焰烤饼；