Web Worker 简介¶

统计信息：字数 2940 阅读6分钟

为什么使用？¶

JS 是单线程，现在计算机很多都是多核CPU，不能很好利用多核的性能。所以 web worker 就是在主线程外，再增加一个线程，进行高性能计算和高延迟任务。

特点¶

主线程和 worker 线程不会干扰。两个线程需要通信形式传值。

worker 线程不会被主线程的 dom 事件干扰；worker 线程不能获取主线程的 DOM；无法读取本地的文件

主线程代码

// 创建工作线程
var worker = new Worker('test.js');

// 主线程向 worder 发送消息
worker.postMessage('comment');
worker.postMessage({method: 'add', id: '888'});

// 主线程事件监听
workder.onmessage = (e) => {
  console.log(e.data);
  worker.postMessage('receive data success');
}

workder.onerror = (error) => {
  console.log(error.message);
}

worker 线程代码（使用 self）

// 子线程的全局对象（self）
self.addEventListener('message', (e) => {
  console.log(e);
  let data = e.data;
  let type = data.type;
  // 根据不同的事件类型，执行不同的函数
  switch(type):
    case 'add':
        self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // Terminates the worker.
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
});