Performance Measure

浏览器提供了 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.clearMarks 及 performance.clearMeasure 删除标记，清理不必要的内存使用。

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