使用web-worker解决大运算问题

因为web-weorker是单独线程不会阻断主线程，所以当处理数据量特别大的场景可以使用web-worker来解决

使用方法

实例化Worker对象

const work = new   Worker("./workjs.js")

监听从workjs.js中传递过来的数据

work.addEventListener("message", function (message) {
    console.log("message",message.data)
})

向workjs.js发送数据

work.postMessage("hello world")

workjs.js部分(真实单独线程处理逻辑部分)

self 监听主线程发送的信息

self.addEventListener("message", function (msg) {
    console.log("msg",msg.data)
})

self发送给主线程 信息

 self.postMessage("我是你儿子")

workjs.js可访问的信息

1. 新增 self 对象
2. 新增 WorkerGlobalScope
3. location 和 navigator 可以访问
4. 不可操作dom window document parent 不能使用

其余知识点

在react使用web worker

使用webpack的loader worker-loader
注意：使用语法和原生的不一致

主线程 react中使用语法 、a.worker.js (名字随便取的)

// 这里引入 固定语法
import Worker from "./worker/a.worker";
const worker = new Worker();
let result;
// 主线程接受子线程信息
worker.onmessage = (event) => {
if (!result) {
    result = document.createElement("div");
    result.setAttribute("id", "result");

    document.body.append(result);
}
result.innerText = JSON.stringify(event.data);
};
// 向子线程发生信息
worker.postMessage({ postMessage: true });

a.worker.js

onmessage = function (event) {
   const workerResult = event.data;
   workerResult.onmessage = true;
   console.info("message: " , workerResult)
 
 // 向主线程发送数据
   postMessage(workerResult);
 };

总结

1. 在react中使用webpack的loader能力可以使用web worker
2. loader支持sharedWorker 不用考虑兼容性
3. loader使用特定语法
4. 不需要将worker文件转换成URL