Chrome DevTools 怎么分析异步函数耗时-js教程-PHP中文网

核心是还原异步函数在整个事件循环中的真实位置和开销，包括promise解析、微任务执行及副作用；需用performance面板录制全周期，开启async stack traces追溯调用链，并结合performance.mark/measurement精准计时。

chrome devtools 怎么分析异步函数耗时

Chrome DevTools 分析异步函数耗时，核心不是看单个 await 行的执行时间，而是还原它在整个事件循环中的真实位置和开销——包括等待 Promise 解析、回调入队、微任务执行、以及可能触发的副作用（如重排、内存分配）。

这是最贴近实际运行场景的方式。异步函数的“耗时”往往横跨多个任务阶段，必须一次性录制才能看清全貌：

打开 Performance 面板 → 勾选 Network、JS Profile 和 Memory（按需）→ 点击录制按钮
触发目标操作（例如点击按钮调用一个 async function）→ 持续操作 2–5 秒，确保覆盖 Promise resolve、then 回调、渲染更新等环节
停止录制后，在 Main 轨道中查找对应任务：蓝色长条是宏任务（如 click 事件），绿色短条是微任务（如 Promise.then 或 async 函数体）
鼠标悬停微任务块，Summary 面板会显示具体函数名、执行时长、以及它所属的异步源头（例如 “initiated by fetch” 或 “from user click”）

光看耗时不够，得知道这个异步调用链从哪来：

宝塔Linux面板11.3.0

宝塔面板11.3.0是一款针对Linux服务器设计的可视化管理工具，通过重构核心模块实现资源占用显著降低，尤其适合低配置服务器环境。它将复杂的命令行操作转化为直观的图形界面，帮助开发者快速完成网站部署、环境配置及日常运维工作，无需专业技术背景即可高效管理服务器。

下载

进入 DevTools Settings → Preferences → Console → 勾选 Enable async stack traces
在 Performance 录制中，点击任一高耗时的 Promise.then 或 async 执行块 → 展开 Call Stack → 你会看到灰色的 async 标签（如 click → handleClick → api.fetch → .then → renderData）
点击灰色标签，Sources 面板会直接跳转到该回调定义处，哪怕它分散在不同文件或模块中

对关键路径做精准计时，绕过 DevTools 自动采样误差：

在异步函数入口打点：performance.mark('fetch-start')
在数据处理完成、视图更新前再打点：performance.mark('render-ready')
手动测量：performance.measure('total-fetch-to-render', 'fetch-start', 'render-ready')
刷新页面后，在 Performance 面板的 Timings 轨道中就能看到这条自定义区间，精确到微秒级

异步函数本身快，不代表整体快——它可能间接引发昂贵副作用：

在 Rendering 面板勾选 Paint flashing 和 Layout Shift Regions，观察 await 后 DOM 更新是否意外触发大面积重绘或布局抖动
在 Memory 轨道中检查 JS Heap 是否阶梯上升：如果每次异步调用都新增对象且 GC 后不回落，说明有闭包引用或未清理的监听器
留意 Main 轨道中是否出现红色长条（Long Task > 50ms）：它可能由异步回调中密集计算、大量 DOM 操作或未节流的 setState 引起