Web Worker使用
·
1 min read
JS是单线程执行，假如前端有阻塞性运算，那么用户侧会感到UI操作卡顿，为提升体验，可以将这部分的运算交给Web Worker来解决。当然也可以将这部分运算交给后台，但具体选择哪种取决于场景及拓展性考虑，最近在开发WEB中遇到了这类问题，考虑后决定交付给前端解决，这里记录下Web worker使用。
接入配置
tsconfig.json
增加webworker类型定义设置
tsconfig.json
"lib": [
"webworker",
"dom",
"dom.iterable",
"esnext"
],
worker-plugin插件配置
为解决worker模块打包/加载，需要进行插件配置。
const WorkerPlugin = require('worker-plugin');
plugins:[
...
new WorkerPlugin()
...
]
业务代码中引入worker
export const myWorker = new Worker('./worker', { type: 'module' });
myWorker.postMessage(JSON.stringify({
data: detail,
}));
myWorker.onmessage = ({ data }: { data: WebWorkerResponse }) => {
};
worker中实现
(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的基本使用
