非采样JavaScript性能分析及Chrome开发者工具采样问题与工具咨询

采样机制推测判断 #

你的推测完全正确。
Chrome DevTools的Performance面板默认使用采样式性能分析模式，核心逻辑是每隔固定时间间隔（通常为1ms）抓取当前JS调用栈状态，只会统计采样时刻命中的函数。执行时间极短、刚好未落在采样点的函数不会被记录，因此Event Log视图无法展示全量函数调用和对应执行时长。你当前定位到的jQuery find函数属于高频长耗时函数，多次被采样命中，数据可信度很高。

无手动埋点全量调用追踪方案 #

Chrome DevTools本身就内置了全量函数追踪能力，无需额外安装第三方工具，操作路径如下：

• 打开Performance面板，点击右上角齿轮形状的设置按钮
• 在弹出的设置项中，找到JavaScript profiler分类，勾选Record all function calls选项
• 重新录制性能数据，即可关闭采样模式，获取全量函数的调用栈、执行时长、父子调用关系等完整数据

注意：全量追踪会产生较高的性能开销，录制期间页面运行速度会明显变慢，生成的性能文件体积也更大，建议仅在已锁定大致耗时范围、录制短时间操作场景时开启，避免页面崩溃。

Web Tracing Framework适配建议 #

Web Tracing Framework已经停止维护超过6年，对最新版Chrome的兼容性极差，绝大多数场景下都会出现数据解析异常、扩展崩溃等问题，不建议继续投入时间调试适配，Chrome内置的全量分析能力已经可以覆盖它的全部核心功能。

业内常用非采样JS性能分析工具 #

• Chrome DevTools 全量JS Profiler：浏览器原生内置，无额外依赖，支持火焰图、函数耗时排序、调用栈回溯等能力，是前端本地调试最常用的非采样分析工具
• Node.js node --prof 工具：Node.js环境下开启--no-sampling参数后可生成全量调用日志，支持导入Chrome DevTools直接分析
• Sentry性能分析：生产环境非侵入式分析工具，开启全量采样配置后可采集线上真实用户的全量函数调用数据，无需修改业务代码
• 框架专属DevTools：React DevTools、Vue DevTools均内置了组件生命周期的全量追踪能力，无需埋点即可查看每个组件的渲染、更新耗时

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