如何在Chrome DevTools的Performance面板中定位JS函数性能对应的具体名称

为什么面板默认不直接标注具体JS函数名 #

• 面板的初始定位是主线程全链路任务观测工具，默认展示粒度为宏观任务分类（比如长任务、动画帧、请求回调），如果直接平铺所有嵌套的函数执行记录，会导致性能记录文件体积暴涨、面板渲染卡顿，影响普通用户的基础使用体验
• 线上生产环境的JS代码普遍经过压缩、混淆，大部分函数名本来就没有可识别的语义价值，默认展示这类压缩后的名称，对开发者的参考意义极低
• 很多逻辑的执行触发方是浏览器内核内部模块（比如GC、样式计算、布局重排），这类逻辑不属于用户编写的JS代码范畴，硬关联用户自定义函数名反而会造成认知混淆

笼统任务提示下的具体函数定位步骤 #

你碰到的“Task took 300ms”“Animation took x seconds”“HTML Request Frame”这类提示，本质都是浏览器将主线程上同一时间窗口内连续执行的逻辑打包后的外层容器标识，不是具体的执行逻辑本身，所有用户编写的JS函数都嵌套在这些容器块的下层调用栈中，可按以下步骤定位：

• 展开目标任务的嵌套执行栈。点击时间线上对应耗时的笼统任务块（比如提示长任务的黄色块），下方会自动切换到调用栈详情页，在Call Tree标签下，所有嵌套在该任务下的JS执行逻辑会按执行耗时从高到低排序，直接展示对应函数的名称、执行占比
• 开启高级JS观测开关。如果面板只展示笼统的任务分类、看不到具体函数，需要在Performance面板顶部的配置栏，勾选Show function call stacks和Advanced JS instrumentation选项，重新录制性能数据后，匿名函数、异步回调的上下文都会被完整解析，不会只输出笼统的任务描述
• 源码直接跳转定位。在调用栈列表中找到目标函数条目后，点击条目右侧关联的源码定位链接，DevTools会自动跳转到Sources面板中该函数的实际定义位置，直接匹配到开发场景中的对应逻辑
• 全局搜索快速匹配。如果任务嵌套层级较深找不到目标函数，可以在Performance面板的内置搜索框直接输入疑似的函数名，面板会自动高亮所有包含该函数执行的时间片段，点击即可直接跳转到对应的执行记录位置

补充说明：如果本地项目已经配置了Source Map，录制性能数据时DevTools会自动将压缩后的函数标识映射为开发环境的原始函数名，不需要手动在混淆代码中排查对应逻辑

内容的提问来源于stack exchange，提问作者fewjio