Web Worker使用

发表于 更新于 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 2 分钟

JS是单线程执行，假如前端有阻塞性运算，那么用户侧会感到UI操作卡顿，为提升体验，可以将这部分的运算交给Web Worker来解决。当然也可以将这部分运算交给后台，但具体选择哪种取决于场景及拓展性考虑，最近在开发WEB中遇到了这类问题，考虑后决定交付给前端解决，这里记录下Web worker使用。

接入配置

tsconfig.json

增加webworker类型定义设置

tsconfig.json

1
2
3
4
5
6
"lib": [
      "webworker",
      "dom",
      "dom.iterable",
      "esnext"
    ],

worker-plugin插件配置

为解决worker模块打包/加载，需要进行插件配置。

1
2
3
4
5
6
7
const WorkerPlugin = require('worker-plugin');

plugins:[
			...
      new WorkerPlugin()
      ...
]

业务代码中引入worker

1
2
3
4
5
6
7
8
9
export const myWorker = new Worker('./worker', { type: 'module' });

 myWorker.postMessage(JSON.stringify({
        data: detail,
      }));
      myWorker.onmessage = ({ data }: { data: WebWorkerResponse }) => {
      
      };

worker中实现

1
2
3
4
5
6
7
8
(self as DedicatedWorkerGlobalScope).onmessage = function ({ data }) {
  const req = JSON.parse(data) as WebWorkerRequest;
  const res = {
    type: req.type,
    data: {},
  };
  postMessage(res);
};

当前存在的问题

debug还没实现，目前只能是万能console

写在最后

以上即web worker的基本使用

相关文档