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
postMessage('这是子线程传递的消息')

接收消息

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

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


// 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.terminate()


// worker.js 子线程
close()

// sharedWorker.js 共享线程
sharedWorker.port.close()

加载外部脚本

引入文件

// classic 使用 importScripts() 方法加载外部脚本
// module 使用 import ** from 'utils.js'
const worker = new Worker('/worker.js', {
  type: 'module'  // 用以指定 worker 类型。该值可以是 classic 或 module。 如未指定，将使用默认值 classic
})

// importScripts('script1.js', 'script2.js')

// import { add } from './utils.js'