如何在DevTools CPU分析中使用并配置自定义标签

核心原理 #

浏览器原生的Performance.mark() API是实现自定义标签的关键，它能在代码执行流中插入自定义标记，DevTools的CPU分析工具会自动识别这些标记并提供筛选功能。

具体实现方式 #

• 原生JavaScript场景
  在需要标记的代码段前后添加标记，还可以关联测量条目来统计耗时：

  // 标记代码段起始点
  performance.mark('data-processing-start');
  
  // 你的业务逻辑代码
  handleLargeDataset();
  
  // 标记代码段结束点
  performance.mark('data-processing-end');
  
  // 可选：创建测量条目，记录这段代码的执行耗时
  performance.measure('data-processing-duration', 'data-processing-start', 'data-processing-end');
  

• React框架场景
  在组件的生命周期或副作用中插入标记，比如：

  import { useEffect } from 'react';
  
  function DataVisualization() {
    useEffect(() => {
      performance.mark('viz-render-start');
      // 渲染数据可视化的逻辑
      renderChart();
      performance.mark('viz-render-end');
      performance.measure('viz-render-duration', 'viz-render-start', 'viz-render-end');
    }, []);
  
    return <div className="chart-container"></div>;
  }
  

在DevTools中使用自定义标签 #

完成代码配置后重启应用，打开DevTools的Performance面板录制CPU分析数据，录制结束后，在顶部的筛选输入框中输入你的自定义标签名称，即可快速筛选出对应标记的代码执行片段。

内容的提问来源于stack exchange，提问作者polina-c