如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈

简介: 如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈

将下面这段代码插入 SAP Spartacus payment types Component 的 next 方法:

    console.time('Jerry');
    const N = 100000;
    let A = 0;
    // const Y = [];
    for( let i = 0; i < N; i++){
      for( let j = 0; j < N; j++){
        //Y.push(j);
        A = A + j;
      }
    }
    console.timeEnd('Jerry');

正好消耗 10 秒钟的时间:

image.png

打开我们想分析性能的网页,点击 Chrome 开发者工具的 performance 面板,点击 Record 按钮,如下图图例2所示:

15.png

然后看到 Profiling 的提示对话框。点击 Continue 按钮,开始执行应用逻辑。

16.png

待应用逻辑执行完毕后,点击 Stop 按钮,

17.png

可以看到,95.4% 的执行时间,都花在了 next 函数上:

18.png

单击超链接,可以直接跳转到源代码位置:

19.png

20.png


目录
相关文章
|
7月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
67 1
|
4月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
29 0
|
8天前
|
数据采集 JavaScript 数据可视化
Node.js爬虫在租房信息监测与分析中的应用
Node.js爬虫在租房信息监测与分析中的应用
|
4月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
200 0
|
1月前
|
JavaScript 前端开发 API
框架分析(3)-Vue.js
框架分析(3)-Vue.js
|
1月前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
|
2月前
|
监控 JavaScript 安全
监控内网电脑软件设计与实现:基于Node.js的服务器端架构分析
在当今信息技术高度发达的时代,监控内网电脑的需求日益增长。企业需要确保网络安全,个人用户也需要监控家庭网络以保护隐私和安全。本文将介绍一种基于Node.js的服务器端架构,用于设计和实现监控内网电脑软件。
147 0
|
2月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
31 0
|
3月前
|
机器学习/深度学习 自然语言处理 JavaScript
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
GEE机器学习——最大熵分类器案例分析(JavaScript和python代码)
53 0
|
4月前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
35 0