使用 chrome devtools 的 performance 面板录制页面运行过程，在 time 轴上查看 task 耗时分布。通过展开主线程任务条并切换至 flame chart（火焰图）视图，可以直观地看到每个任务的执行时长及其调用栈占比。
如何识别导致卡顿的长任务
在 Performance 面板中，关注主线程上持续时间超过 50ms 的任务块。这些任务通常会导致界面掉帧或响应延迟。通过点击具体的任务条，可以在下方的 Call Tree（调用树）中查看其详细的函数调用栈，从而定位到具体的代码行。
const longTask = () => {
let sum = 0;
for (let i = 0; i < 1e8; i++) {
sum += i;
}
return sum;
};
performance.mark('start');
longTask();
performance.mark('end');
performance.measure('long-task', 'start', 'end');
console.log(performance.getEntriesByName('long-task')[0].duration); // 输出耗时毫秒数预期结果：控制台输出一个大于 50 的数字，表示该同步循环任务占用了主线程较长时间，可能在 Performance 面板中被标记为红色或橙色的高亮任务。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
如何利用 Flame Chart 分析任务层级
Flame Chart 以自底向上的方式展示调用栈，每一层代表一个函数调用。越宽的任务条表示该函数及其子调用消耗的总时间越长。通过观察不同颜色的色块，可以区分 JavaScript 代码、DOM 操作、样式计算等不同类型的工作负载。这种可视化方式有助于快速发现哪些函数是性能瓶颈。
// 模拟嵌套调用场景
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 时间。这展示了调用栈的深度与任务耗时的关系。
基于具体输入条件分析 Task 耗时差异
当输入数据量增大时，Task 的耗时分布会发生显著变化。例如，在处理大型数组时，同步循环任务会占用更多时间，而异步任务如 setTimeout 则保持相对稳定的调度开销。通过对比不同数据规模下的 Performance 记录，可以评估算法的时间复杂度对运行时性能的影响。
