前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何使用 Chrome 开发者工具 Performance tab 分析 JavaScript 的执行瓶颈

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

作者头像
Jerry Wang
发布2022-04-11 16:44:04
3540
发布2022-04-11 16:44:04
举报

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

代码语言:javascript
复制
    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 秒钟的时间:

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

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

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

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

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具(Cloudbase CLI Devtools,CCLID)是云开发官方指定的 CLI 工具,可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等,您可以专注于编码,无需在平台中切换各类配置。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档