如何通过Chrome DevTools调用树统计JS函数耗时及meldjs增强函数计时

嗨，我来帮你搞定这两个需求——用meldjs追踪增强函数的执行耗时，还有借助Chrome DevTools统计函数总执行时间：

因为meldjs是AOP库，咱们可以利用它的around通知来给增强函数包裹一层耗时统计逻辑，具体步骤如下：

• 针对需要统计的增强函数，使用meld.around()方法，在函数执行前记录开始时间，执行后记录结束时间，两者的差值就是执行耗时。
• 示例代码参考：

// 假设你要增强的目标对象是target，目标函数是你要监控的advised函数
meld.around(target, 'yourAdvisedFunction', function(proceed) {
  // 用performance.now()获取高精度时间戳
  const startTime = performance.now();
  // 执行原增强函数
  const result = proceed();
  // 计算并输出耗时
  const endTime = performance.now();
  const duration = endTime - startTime;
  console.log(`增强函数 ${this.name} 执行耗时：${duration.toFixed(2)}ms`);
  // 返回原函数结果，不影响业务逻辑
  return result;
});

• 针对你提到的validateRegistration和checkLengths这两个未增强的函数，你可以在配置增强时做过滤：遍历目标对象的方法时，判断函数名不是这两个的，再应用上述耗时统计逻辑，避免给不需要的函数加监控。

Chrome DevTools的Performance面板是统计函数执行时间的利器，操作步骤非常清晰：

1. 打开DevTools：按F12快捷键，或者右键页面选择「检查」，切换到Performance面板。
2. 开始录制：点击面板左上角的圆形录制按钮（或按Ctrl+E），然后触发你要测试的业务逻辑（比如点击按钮触发函数调用）。
3. 停止录制：再次点击录制按钮，DevTools会自动生成性能分析报告。
4. 查看调用树：在面板下方找到Call Tree（调用树）标签：
   • 这里会展示所有函数的调用层级，你可以展开函数节点查看它的子函数调用情况。
   • 重点关注两列：Self Time是函数自身执行的时间（不包含子函数调用），Total Time是函数的总执行时间（包含所有子函数的执行时间），你要的总执行时间就看这一列。
5. 快速定位目标函数：如果函数太多，可以在搜索框输入函数名（比如'advised'），DevTools会自动筛选出匹配的函数，方便你快速查看。
6. 进阶技巧：切换到Bottom-Up标签，会按函数总耗时从高到低排序，能帮你快速找到最耗时的函数环节。

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