如何使用 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 秒钟的时间：

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

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

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

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

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

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

Chrome 开发者工具 —— Performance 快速入门
原文链接:https://developers.google.com/web/tools/chrome-devtools/evaluate-performance?hl=zh-cn 如果你想学会如何使 ...
Chrome 开发者工具 performance 标签页的用法
Analyze runtime performance 运行时性能是您的页面在运行时的表现,而不是加载. 就 RAIL 模型而言,本文介绍的方法对于分析页面的响应.动画和空闲阶段非常有用. 在隐身模式 ...
利用Chrome开发者工具memory comparison分析一个时间段内的JavaScript代码内存占用率
在测试代码line 13和line 16处设断点. 以debug方式运行,首先断点在line13 处触发: 点击Profiles tab, 点击button "Take Snapshot&q ...
浏览器原理 20 # Chrome开发者工具：利用网络面板做性能分析
说明浏览器工作原理与实践专栏学习笔记 DevTools Chrome 开发者工具(简称 DevTools)是一组网页制作和调试的工具,内嵌于 Google Chrome 浏览器中.它提供了通过界面访 ...
chrome开发者工具_如何使用Chrome开发者工具查找性能瓶颈
chrome开发者工具介绍 (Introduction) As one advances through a software development career, concerns beyond ...
Chrome开发者工具学习笔记
简介 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具.我们可以使用开发者工具来重演,调试和剖析我们的网站.开发者工具主要包含Elements面板.Console面 ...
Chrome开发者工具详解(2)-Network面板
注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板面板上包含了Elements面板.Console面板.Sources面板. ...
使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题
Optimize website speed 每当您着手提高站点的负载性能时,请始终从 audit 开始. 审计有两个重要功能: 它为您创建了一个基线来衡量后续更改. 它为您提供有关哪些更改将产生最大 ...
Chrome 开发者工具的Timeline和Profiles提高Web应用程序的性能[转]
我们都希望创建高性能的Web应用程序.由于我们的应用程序变得越来越复杂,我们可能想要支持丰富的画面以及理想的60帧/秒,这能保证我们的应用程序响应灵敏且生动流畅. 知道如何衡量和提高性能,是一个有用的 ...

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

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

最新文章

热门文章