一、第一个版本如下：

如果我不解释，你能看懂啥意思么？估计时间长了，我也看不懂了，而且我也希望汇报工作的时候，也可以把自己的性能优化数据进行量化，从原来多少，优化多少。

二、第二个版本

我把开始时间，结束时间省略的。但是我要把每次数据9677这种数和使用时间挂钩的。请看第三个版本。

三、第三个版本

这回如何，是不是看着更加清晰，更加易读，如果需要汇报的话，截图也更加好看呢。

封装代码如下，喜欢直接抄走



/**
 * 性能优化计算时间统计
 * @param fn
 */
export function performPerformanceOptimization(fn: Function, desc?: string) {
// 封装随机颜色的log函数；
  const consoleLog = (...arg: any[]) => {
      const styles = {
        reset: '\x1b[0m',
        bright: '\x1b[1m',
        dim: '\x1b[2m',
        underscore: '\x1b[4m',
        blink: '\x1b[5m',
        reverse: '\x1b[7m',
        hidden: '\x1b[8m',
        fgBlack: '\x1b[30m',
        fgRed: '\x1b[31m',
        fgGreen: '\x1b[32m',
        fgYellow: '\x1b[33m',
        fgBlue: '\x1b[34m',
        fgMagenta: '\x1b[35m',
        fgCyan: '\x1b[36m',
        fgWhite: '\x1b[37m',
        bgBlack: '\x1b[40m',
        bgRed: '\x1b[41m',
        bgGreen: '\x1b[42m',
        bgYellow: '\x1b[43m',
        bgBlue: '\x1b[44m',
        bgMagenta: '\x1b[45m',
        bgCyan: '\x1b[46m',
        bgWhite: '\x1b[47m',
      };
    
      // 随机生成颜色
      function getRandomColor() {
        const colors = Object.keys(styles).filter(function (key) {
          return key.startsWith('fg');
        });
        const randomIndex = Math.floor(Math.random() * colors.length);
        return styles[colors[randomIndex]];
      }
      const res = arg.map((str) => {
        return getRandomColor() + str + styles.reset;
      });
      console.log(...res);
    };
  // 记录开始时间
  const startTime = performance.now();

  // 执行性能优化的代码
  if (fn) {
    fn();
  }
  // 记录结束时间
  const endTime = performance.now();

  // 计算总共使用的时间
  const duration = endTime - startTime;

  // 打印开始时间、结束时间和使用的时间
  // console.log('开始时间：' + new Date(startTime).toString());
  // console.log('结束时间：' + new Date(endTime).toString());
  consoleLog(`${desc || '使用时间：'}` + duration.toFixed(2) + '毫秒');
}


// 使用
  console.group('划词性能分析');
  performPerformanceOptimization(labelFlowFn, '标注时间 => ');
  const labelContent = [
    ...document.querySelectorAll(`span[data-option-key='${commonUid}']`),
  ].reduce((prev, current) => {
    const text = current.textContent;
    return prev + text;
  }, '').length;
  console.log('划选字数 =>', labelContent, '个');
  console.groupEnd();

总结：

是要使用console.log自带颜色处理功能。
console.group与console.groupEnd搭配，分组的概念，让整体更有结构感，更适合收集和汇报。
一切都是服务于业务，服务于态度和责任，我们既然要做，就要稍微做的好一点，易读一点，就可以思考的更加全面更加深入的，一同加油

浏览器日志花样调试，你肯定不知道的console（附带源码）

一、第一个版本如下：

二、第二个版本

三、第三个版本