Web Worker

Web Worker

web worker的作用是为javascript创建多线程环境，允许主线程创建woker线程。
javascript是单线程，在多核cpu的情况下，无法充分利用计算机的计算能力。

基本用法

// 主线程
const myworker = new Worker('./myworker.js') // 创建Worker对象

myworker.postMessage('the data') // 向Worker线程发送数据

myworker.onmessage = function(e) { // 监听通信
  console.log(e.data)
}

myWorder.onerror = function(e) {
  console.log(e)
}

myworker.terminate() // 关闭 Worker线程

// worker线程 ./myworker.js
self.onmessage = function(e) { // 监听通信
  console.log(e.data)
}

self.postMessage('worker data') // 向主线程发送数据

self.close()  // 关闭 Worker线程

主线程创建worker线程对象

• new Worker(url, options)

const myworker = new Worker('./myworker', {name: 'myworker'})

主线程创建worker线程对象的属性和方法

• myworker.onerror：指定error事件的监听函数。
• myworker.onmessage：指定message事件的监听函数。
• myworker.onmessageerror：监听message，发送数据无法序列化为字符串时触发。
• myworker.postMessage()：向Worker线程发送消息。
• myworker.terminate()：立即终止Worker线程。

Worker 线程的全局对象

• self.name: worker的名字。该属性只读，构造函数指定。
• self.onmessage: 指定message时间的监听函数。
• self.onmessageerror: 监听message，发送数据无法序列化为字符串时触发。
• self.close(): 关闭worker线程。
• self.postMessage(): 向主线程发送消息。
• self.importScripts(): 加载js脚本。

数据通信

1. 主线程和worker线程通信的是值而不是地址，可以是文本和对象。原理是先将通信内容串行话，然后通信，后者再还原。
2. 通信内容可以是文本，对象，二进制数据(File, Blob, ArrayBuffer)等类型

注意点

1. worker线程脚本和主线程是同源。
2. worker线程无法使用document, window, parent, 可以使用navigator，location，XMLHttpRequest对象。
3. worker线程无法加载本地文件(file://)，必须是网络。