导言：本次项目背景为字节青训营的前端监控项目

起因

开始

我们是前端组，顾名思义所以我们大家主要做的就是前端内容，在项目分工的时候组内七个人六个前端的同学，一个半后端的同学，嗯，那半个就是我这个半吊子后端，因为有能够专职后端的同学，于是我们后端的技术选型就选择了SpringBoot而不是nodejs，也因此埋下了罪恶的种子。

原因

前端监控在埋点后需要把报错等等传给我们亲爱的后端，在需要展示的监控大屏系统中我们又需要问我们的后端同学要需要展示的数据，一般来讲应该是后端处理好数据直接给我们就可以，但是由于我们只有一个后端同学，为了减轻他的压力，我们决定把部分数据处理的工作拿到前端（在实际业务中是不会出现的！！！坏习惯勿学！）

中途

由于我拿到的数据就是基本等于从数据库原封不动倒出来

{
  Type: "AA",
  time: "2022-8-7 06:11:12",
  errorType: "RangeError",
  browserName:"Chrome",
  path:"http://localhost:3000/home/test.html",
  src:""
},
{
  Type: "AA",
  time: "2022-8-7 06:11:12",
  errorType: "ReferenceError",
  browserName:"Chrome",
  path:"http://localhost:3000/home/test.html",
  src:""
},
{
  Type: "AA",
  time: "2022-8-7 07:11:12",
  errorType: "Error",
  browserName:"Chrome",
  path:"http://localhost:3000/home/test.html",
  src:""
},

我需要做的就是把这些数据变成我在Echarts里需要的data[ ]， X轴需要两条，一条是现在小时以及前十一个小时共十二个小时，数据Data则需要每小时内发生的错误量（错误条数）

// 循环后端传来的数据
console.time()
for (let echartsRequestDataKey in EchartsRequestData) {
  let requestData = EchartsRequestData[echartsRequestDataKey];
  //src为”null“ || "" || null 则为JS异常 且判断errorType

  if ((requestData.src === "null" || requestData.src === "" || requestData.src === null) && requestData.errorType !== "ResourceError" ){
    // JS错误异常
    switch (requestData.errorType) {
        //饼状图用计算各种错误的百分比
      case "Error":
        errTypeCount.Error.count++;
        break;
      case "ReferenceError":
        errTypeCount.ReferenceError.count++;
        break;
      case "TypeError":
        errTypeCount.TypeError.count++;
        break;
      case "RangeError":
        errTypeCount.RangeError.count++;
        break;
      case "URIError":
        errTypeCount.URIError.count++;
        break;
      default:
    }
    //折线图各个小时发生的总错误量

    let timeSlot = requestData.time.substring(9,11)+":00";
    DataToday[DataX.indexOf(timeSlot)]++;


  }else{
    // 资源异常
    errTypeCount.ResourceError.count++;

    //折线图各小时发生的资源异常
    let timeSlot = requestData.time.substring(9,11)+":00";
    DataTodayResources[DataX.indexOf(timeSlot)]++;



  }
}
console.timeEnd()

优化点在于我最初选择了一个手写的循环（类似于for循环但是有一定的条件）

// 折线图各个小时发生的总错误量
let timeSlot = requestData.time.substring(9,11);

if (echartsRequestDataKey === 0){
  DataToday[DataTodayKey]++;
  pastTime = timeSlot;
}else if (pastTime === timeSlot){
  DataToday[DataTodayKey]++;
}else {
  timeDifference = timeSlot - pastTime;
  DataTodayKey+=timeDifference;
  DataToday[DataTodayKey]++;
}

但是我灵光一闪既然数据的数组的下标和X轴下标需要对应，X轴的Data数组也已经被定义好了，且都是按照时间（例10：00）作为value那我在循环数据的时候是不是取数据中的time拿到他的小时并且也加工成 10：00 这样，去取它在x轴的下标，将值++不就行了！照着这个思路新代码就产生了！

let timeSlot = requestData.time.substring(9,11)+":00";
DataToday[DataX.indexOf(timeSlot)]++;

没错两行就解决了原本需要十几行的代码的问题

总结

经过这次更改经过初步测试（console.time() --- console.timeend()测试），代码运行速度的平均值有一定提升，最慢时间有稳定且显著的提示（非准确计算，仅多次估计），但是最明显的式代码量少了超过80%优化了代码。

可能这就是算法或者说思维方式的作用，有时候遇到一些问题应该把一定的时间放在思考而不是用最笨最简单的方法去写代码。

第一次代码优化，如有不足请大佬们多多指教。

记第一次代码优化 | 青训营笔记

起因

开始

原因

中途

总结