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

如何分析代码执行耗时

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

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

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

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

如何分析内存占用

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

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

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

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

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

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

【Python line_profiler memory_profiler】分析每一行代码的耗时及内存占用情况
一.Python 借助 line_profiler 模块查看每一行耗了多少时间? 1. 安装 windows10.python3.7.4安装,安装得个2分钟左右 pip install line_p ...
commons-collections反序列化漏洞分析——远程代码执行
commons-collections反序列化漏洞分析--远程代码执行命令执行以及通过反射进行命令执行这里先说说java里面的命令执行.其实java的命令执行和PHP类似,PHP一般通过eval和 ...
ITK:跟踪两个代码执行之间的内存费用
ITK:跟踪两个代码执行之间的内存费用内容提要输出结果 C++实现代码内容提要跟踪两个代码执行之间的内存费用.请注意,必须使用内存才能对其进行计数. 输出结果 We are measuring ...
C++统计代码执行耗时
C++统计代码执行耗时文章目录 C++统计代码执行耗时 1. 需求 2. 代码结构 3. CMakeLists文件 4. 核心代码 5. 使用测试 1. 需求统计项目中代码执行耗时 2. 代码结构 ...
unity 代码执行耗时_您可以使用代码自动执行6项耗时的任务
unity 代码执行耗时扫盲曾经是抄写员和牧师的领域. 然后,世界变得更加复杂,要求每个人都读写. 计算也是一种读写能力,但是仅让程序员的教士才能理解它对于我们这个复杂的在线世界而言还不够. &qu ...
本地执行php查看内存占用,查看页面执行php占用内存情况
今天头脑一热,想看一下页面在执行的过程中占用了多少内存,我也不知道这样做的目的是什么,可能是出于我的惯性思维吧.不过这样做也不是完全没用, 你可以清楚的知道哪些页面占用的内存比较多,特别是对于使用共用 ...
JVM执行篇：使用HSDIS插件分析JVM代码执行细节--转
http://www.kuqin.com/java/20111031/314144.html 在<Java虚拟机规范>之中,详细描述了虚拟机指令集中每条指令的执行过程.执行前后对操作数栈. ...
如何使用Chrome直接编辑前端代码
写在前面虽然是后端开发,但是不可避免的有时候需要写一些前端代码,所以一些前端技能还是有必要掌握的.我们知道修改代码之后看到效果最直接的方式就是直接在浏览器修改,但是常规的方式,在页面刷新之后我们所做 ...
java打印代码执行耗时
在代码开发中,常常需要看代码的执行效率,必须直观的看到某个循环消耗的多少时间,进而针对性的优化,有两种方式. 1.使用System.currentTimeMillis()方法打印代码开始的执行时间和 ...
降低代码执行中得内存消耗_微服务中使用 OpenJ9 JVM内存占用降低60%！
专注于Java领域优质技术,欢迎关注作者: 陈一乐来自:陈一乐随着微服务的普及,许多企业踏上微服务之旅. 微服务化后,应用数量可能高一个数量级.一般企业,以前三五个应用能支撑业务,微服务化之后应 ...

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

如何分析代码执行耗时

如何分析内存占用

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

最新文章

热门文章