Web Worker多线程

Web Worker是HTML5引入的一项技术，它允许在浏览器中创建多线程环境，将一些耗时的计算任务放在后台线程中执行，以避免阻塞主线程，提高页面的响应性和性能。

Web Worker具有以下特点和用途：

• 多线程环境：Web Worker在浏览器中创建了一个独立的线程环境，与主线程（通常是UI线程）相互独立运行。这样可以使得主线程不受耗时任务的影响，保持页面的流畅性和响应性。
• 后台执行：Web Worker用于执行一些耗时的计算、数据处理或其他需要大量CPU资源的任务。这些任务通常在后台线程中执行，不会阻塞用户界面的更新和交互。
• 无法直接访问DOM：Web Worker在独立的线程中运行，因此无法直接访问页面的DOM结构，也不能更新UI。这是为了保证线程安全和避免竞争条件。
• 事件通信机制：Web Worker通过事件机制与主线程通信。主线程可以向Web Worker发送消息，Web Worker通过监听message事件来接收消息并进行相应的处理。同样，Web Worker也可以向主线程发送消息。

使用

• 主线程

// 创建Worker对象实例
var worker = new Worker('http://localhost:3000/worker.js'); // 只会执行url指定的脚本，必须同源

// 监听并接收worker线程消息
worker.onmessage = (e) => {
    console.log(`收到worker线程消息：${e.data}`);
    work.terminate(); // 销毁worker线程
};

// 向worker线程发送消息
worker.postMessage('hello worker')

• worker线程（worker.js）

// 监听并接收主线程发送的消息
self.onmessage = (e) => { // 在子线程中，self代表worker子线程的全局对象，也可以用this代替self，或者省略也行。
    console.log(`收到主线程消息：${e.data}`); 
    //向主线程发送消息
    postMessage('你好，我是worker！');

    // 子线程自己关闭
    // self.close()
}