web Worker

Web Worker (工作线程) 是 HTML5 中提出的概念，分为两种类型，专用线程（Dedicated Web Worker） 和共享线程（Shared Web Worker）。专用线程仅能被创建它的脚本所使用（一个专用线程对应一个主线程），而共享线程能够在不同的脚本中使用（一个共享线程对应多个主线程）。

• Web Worker 的意义在于可以将一些耗时的数据处理操作从主线程中剥离，使主线程专注于页面渲染和交互
• 有同源限制
• 无法访问 DOM 节点
• 运行在另一个上下文中
• Web Worker 的运行不会影响主线程，但任受到主线程是单线程的瓶颈限制，如果和主线程交互频繁依然有可能阻塞页面渲染

以下代码都在 index.html 文件为主线程 worker.js sharedWorker.js 为子线程
因为 Web Worker 有同源限制，所以在本地调试的时候也需要通过启动本地服务器的方式访问，使用 file:// 直接打开的话将会抛出异常。

浏览器支持判断

if(window.Worker) 

if(window.SharedWorker)

创建线程

/*
  创建实例提供两个个参数
  1. path 脚本路径 （同源策略）
  2. {
    type // 引入外部脚本的方式 可以是 classic 或 module。 默认值为 classic
    name: 
    credentials: 
  }
*/

// 专用线程
const worker = new Worker('/worker.js')

// 共享线程
const sharedWorker = new SharedWorker('/sharedWorker.js')

发送消息

// index.html
const worker = new Worker('/worker.js')

// 方式1 
worker.postMessage('hello webWorker')

// 方式2 
worker.addEventListener('hello webWorker')



// worker.js
// 在子线程中 self 和 this 都代表子线程的全集对象
// 方式1 
self.addEventListener('message', function(e) {
  console.log(e.data) // 对应主线程传递的消息 hello webWorker
})

// 方式2
this.addEventListener('message', function(e) {})

// 方式3 
addEventListener('message', function(e) {})

// 方式4 
onmessage = function(e) {}

接收消息

// index.html
const worker = new Worker('/worker.js')

worker.postMessage('hello webWorker')

// 接收子线程消息
worker.onmessage = function(e) {
  console.log(e) // 收到
}


// worker.js 
// 在子线程中 self 和 this 都代表子线程的全集对象
// 写法 1
self.addEventListener('message', function (e) {
    // ...
})

// 写法 2
this.addEventListener('message', function (e) {
    // ...
})

// 写法 3
addEventListener('message', function (e) {
    // ...
})

// 写法 4
onmessage = function (e) {
    // ...
}