js-Web Worker

js是单线程语言，无法开启多个线程同时执行。HTML5中，浏览器提供了一种新特性web worker，让我们可以在页面主运行的 JavaScript 线程中加载运行另外单独的一个或者多个 JavaScript 线程。这样，在主线程处理页面渲染和交互的同时，web worker可处理一些复杂计算，当有结果后通知给主线程。

专用/共享
专用线程Dedicated Worker：一个worker线程对应一个js主线程。浏览器支持率很高。
共享线程 Shared Worker：一个worker线程可以被多个同源js主线程使用。需要指定port，显示打开后才能使用。浏览器支持率较低，较少使用。

// 主线程
const sharedWorker = new SharedWorker('./sharedWorker.js');
sharedWorker.port.onmessage = function(e) {
    // 业务逻辑
}
sharedWorker.port.start() // 需要显式打开
sharedWorker.port.postMessage([10, 24])

// Worker 线程
onconnect = function (e) {
    let port = e.ports[0]

    port.onmessage = function (e) {
        if (e.data.length > 1) {
            port.postMessage(e.data[1] - e.data[0])
        }
    }
}

由于共享线程sharedWorker目前支持情况较差，下文主要介绍专用线程worker。

使用

// main.js
// 实例化一个worker
const worker = new Worker('../src/worker.js');
// 监听message事件
worker.onmessage = e => {
  console.log(e.data); // "Polo"
}
// 错误处理
// 将普通错误冒泡上来
worker.onerror = e => {
  console.log(e); // a is undefined
}
// onmessageerror 监听发送的数据不能被反序列化错误
// 发送数据事件
worker.pushMessage("Marco");

// 立即终止worker线程中全部操作
worker.terminate();

// worker.js
// 监听message事件
onmessage = e => {
  console.log(e.data); // "Marco" 
  console.log(a) // 抛出错误
  // 发送数据事件
  pushMessage("Polo");
}
// 关闭当前worker线程
close();
// 引用外部脚本
importScripts(urlA, urlB);

worker和主线程中的数据传递，是通过复制数据，将数据的副本用于传输，（序列化/反序列化，浏览器中主要通过JSON编码/解码），所以是两份相互独立的数据。

可以获取到部分浏览器提供的 API ：
setTimeout()， clearTimeout()， setInterval()， clearInterval()：有了设计个函数，就可以在 Worker 线程中执行定时操作了；
XMLHttpRequest 对象：意味着我们可以在 Worker 线程中执行 ajax 请求；
navigator 对象：可以获取到 ppName，appVersion，platform，userAgent 等信息；
location 对象（只读）：可以获取到有关当前 URL 的信息；

局限性

不能访问DOM
没有window全局对象
同源限制：js主线程和worker必须同源

本地调试，也需要起服务，可以用browser-sync。

使用场景

懒加载
文本分析
流媒体数据处理
canvas 图形绘制
图像处理
...

js-Web Worker

推荐阅读更多精彩内容