JavaScript 运行时性能分析怎么查看 Task 耗时分布-js教程-PHP中文网

使用 chrome devtools 的 performance 面板录制页面运行过程，在 time 轴上查看 task 耗时分布。通过展开主线程任务条并切换至 flame chart（火焰图）视图，可以直观地看到每个任务的执行时长及其调用栈占比。

JavaScript 运行时性能分析怎么查看 Task 耗时分布

如何识别导致卡顿的长任务

在 Performance 面板中，关注主线程上持续时间超过 50ms 的任务块。这些任务通常会导致界面掉帧或响应延迟。通过点击具体的任务条，可以在下方的 Call Tree（调用树）中查看其详细的函数调用栈，从而定位到具体的代码行。

JavaScript 运行时性能分析怎么查看 Task 耗时分布

const longTask = () => {
    let sum = 0;
    for (let i = 0; i <p>预期结果：控制台输出一个大于 50 的数字，表示该同步循环任务占用了主线程较长时间，可能在 Performance 面板中被标记为红色或橙色的高亮任务。</p><h2>如何利用 Flame Chart 分析任务层级</h2><p>Flame Chart 以自底向上的方式展示调用栈，每一层代表一个函数调用。越宽的任务条表示该函数及其子调用消耗的总时间越长。通过观察不同颜色的色块，可以区分 JavaScript 代码、DOM 操作、样式计算等不同类型的工作负载。这种可视化方式有助于快速发现哪些函数是性能瓶颈。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="javascript-typescript-typescript-scaffold" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="overflowclass">javascript-typescript-typescript-scaffold</a>
													<p class="overflowclass">你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill12540" title="javascript-typescript-typescript-scaffold" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div><p><img src="https://img.php.cn/upload/article/001/242/473/179445436843915.png?x-oss-process=image/resize,p_40" alt="JavaScript 运行时性能分析怎么查看 Task 耗时分布"></p><pre class="brush:php;toolbar:false;">// 模拟嵌套调用场景
function step1() { step2(); }
function step2() { step3(); }
function step3() { 
    let data = new Array(10000).fill(0);
    data.map(x => x * 2);
}

step1();

预期结果：在 Flame Chart 中，step1 位于最底层，step3 位于顶层且宽度最大，因为 step3 包含了数组分配和映射操作，消耗了最多的 CPU 时间。这展示了调用栈的深度与任务耗时的关系。