Web Worker使用

Web Worker使用

什么是Web Worker?

mdn官方解释是：Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通过将消息发布到该代码指定的事件处理器（反之亦然）

主线程和 worker 线程相互之间使用 postMessage() 方法来发送信息，并且通过 onmessage 这个 event handler 来接收信息（传递的信息包含在 message 这个事件的data属性内) 。数据的交互方式为传递副本，而不是直接共享数据。

worker 可以另外生成新的 worker，这些 worker 与它们父页面的宿主相同。此外，worker 可以通过 XMLHttpRequest 来访问网络，只不过 XMLHttpRequest 的 responseXML 和 channel 这两个属性的值将总是 null 。

简单点来说就是一个js的子进程

Web Worker中的属性和方法

构造函数：Worker(url)

创建一个Web Worker线程，指定执行的脚本（url: 脚本需要来自网络，不能来自本地）

事件

onerror(error: ErrorEvent)

监听worker线程出现的错误

onmessage(event: MessageEvent)

监听worker.postMessage发送的消息，消息保存到event.data中

onmessageerror()

当messageerror出现错误时，触发这个事件

方法

postMessage

主进程和子进程之间相互发送消息

terminate

立即终止worker进程

Web Worker中不能做什么？

worker 内，不能直接操作 DOM 节点，也不能使用 window 对象的默认方法和属性。但是你可以使用大量 window 对象之下的东西，包括 WebSockets，以及 IndexedDB 等数据存储机制。

使用场景

当进行大量的数据处理，例如：处理后端返回数据量大的数据，又不想页面，因为数据的处理而被阻塞，导致页面卡死等问题。

使用

work.js中

//1.子线程进行某些耗时操作
setTimeout(() => {
    postMessage("Hello World!!!");
}, 10000);
//这里是监听全局消息
onmessage = (e) => {
    console.log("childProcess=", e.data);
};

页面中

//1.创建一个线程
const webWorker = new Worker("./work.js");
//2.监听子线程发送过来的消息
webWorker.onmessage = (e) => {
console.log("message=", e.data);
};
//3.这里不会被上面阻塞
console.log("completed");
//4.发送给子线程
postMessage("Hello ChildProcess");
//5.终止worker
webWorker.terminate();