前端性能优化web Worker在项目中的具体应用

1 实际项目中使用Web Worker

下面这篇文章详细介绍了web worker常用的api, 场景(这里不知道有没有具体衡量指标)，使用过程中的注意事项，文章写的很好，感兴趣可以看下，这里不在详细叙述具体概念
Web Worker使用

1.1 场景

本文将分享一个web Worker在实际项目中使用的场景，在我们项目中，我们把从查询接口获取到的数据，格式化的过程，放在web worker中进行。

首先简单介绍下我们的项目，可视化相关项目，接口主要分为两大方面，配置查询和数据查询接口，其中数据查询接口是影响页面性能指标的一个很关键的因素，并且从查询接口获取到数据之后的格式化过程逻辑，全部放在fe中了，但是我们知道，数据格式化这个过程可能会涉及一些比较大的计算，因此我们选择将它拆出来放在一个单独web worker线程中，减少对主线程造成影响。

1.2 实现

具体解释看注释，写的比较详细

// workerHelper.ts
import Worker from 'worker-loader?inline=no-fallback!./query.worker.ts';
import axios, {
    CancelTokenSource } from 'axios';
import {
    ErrorType } from '@/api';
const {
    CancelToken } = axios;

type EventHanler = {
   
  resolve: (value: any) => void;
  reject: (reason?: any) => void;
};
export enum ErrorType {
   
  TIMEOUT,
  REQUEST,
  CANCEL
}

const requestMap = new Map<string, CancelTokenSource>();

// 调用接口
const query = async (
  params,
) => {
   
  let resultData;
  await axios.post(`******`, params, {
   
        headers: {
   },
        cancelToken: cancelToken.token,
      })
      .then(res =>