如何使用 chrome devtool 分析前端代码执行耗时和内存占用

如何分析代码执行耗时

代码执行耗时这块，大家应该都知道使用 Performance 面板中的 火焰图，火焰图中每个方块的宽度代表执行耗时，方块叠加的深度代表调用栈的深度。通过火焰图可以很直观地展示出代码调用关系，当你不熟悉某个框架、源码中的代码逻辑，又不希望一行行去看源码，火焰图就是最好的工具。

在分析性能的时候，为排除插件的影响，需要启用无痕模式

此外我们还可以看到每一行代码执行的时间。在火焰图中找到长任务，点击顶部 Task，点击 Button-Up，这时候可以看到根据耗时列出的调用栈：

找到那个执行耗时最长的，然后点击右侧源码地址，可以跳到 source 对应的源码，可以看到左边展示了每一行代码执行的耗时：

如何分析内存占用

内存占用可以使用 Memory 面板进行分析。一共有三种内存分析工具：

• Snapshot：某个时间点的 堆内存快照
• TimeLine：实时的按照 时间线 显示的内存分配情况
• Sampling：采样 的方式收集内存分配情况

如果想要看到按照时间线的实时分配情况，可以用第二种工具：TimeLine。

加载页面，点击录制，右边就会实时展示内存分配情况：

我们录到 6s 点击停止。可以看到有两条竖线，分别代表了两次内存分配。点击其中一条竖线，可以看到内存分配详情。