Performance Measure

JavaScript

浏览器提供了 performance 用于测量 JavaScript 的一些运行效率,并在浏览器的对应位置(如 Chrome 的 Performance Tab)生成火焰图,可以方便的查看程序调用栈的执行效率。简单的操作如下:

function getMarkName(name) {
  return `mark: ${name}`;
}
function beginMark(name) {
  performance.mark(getMarkName(name));
}
function endMark(name) {
  const markName = getMarkName(name);
  try {
    performance.measure(name, markName);
  } catch (e) {
    // 如果 markName 无法被找到(也就是 beginMark 函数没有被调用)
    // 那么程序在 performance.measure 的时候会报错
    // 这里无需将报错抛出,直接吞掉就可以了
  }
  performance.clearMarks(markName);
  performance.clearMeasure(name);
}

function main() {
  beginMark('label name');
  // 需要进行的操作
  endMark('label name');
}

具体来说,通过 performance.mark 函数标记一个点,然后在需要测量的程序执行完成之后,通过 performance.measure 来计算当前和最初 mark 的点之间的运行时间。最终,这一段结果会在 Chrome 的 Performance Timings 中形成对应的火焰图数据。

performance.measure 也支持三个参数的调用,三个参数分别是 label 的名称,起始 mark 的名称以及终止 mark 的名称。如果省略最后一个参数,那么终止的时间点就是当前 performance.measure 调用的时间点。

最后,通过 performance.clearMarksperformance.clearMeasure 删除标记,清理不必要的内存使用。

更多的介绍,可以参考 MDN 的文档。React 中也使用了类似的技术用于在 Performance 中生成每个 Component 渲染花费的时间,相关的代码可以参考 ReactDebugFiberPerf.js