技术背景

家喻户晓，JavaScript 语言采纳的是单线程模型，也就是说，所有工作只能在一个线程上实现，一次只能做一件事。后面的工作没做完，前面的工作只能等着。随着电脑计算能力的加强，尤其是多核 CPU 的呈现，单线程带来很大的不便，无奈充分发挥计算机的计算能力。
Web Worker 的作用，就是为 JavaScript 发明多线程环境，容许主线程创立 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后盾运行，两者互不烦扰。等到 Worker 线程实现计算工作，再把后果返回给主线程。这样的益处是，一些计算密集型或高提早的工作，被 Worker 线程累赘了，主线程（通常负责 UI 交互）就会很晦涩，不会被阻塞或拖慢。
Worker 线程一旦新建胜利，就会始终运行，不会被主线程上的流动（比方用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。然而，这也造成了 Worker 比拟消耗资源，不应该适度应用，而且一旦应用结束，就应该敞开。

应用限度

1、同源限度

调配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。所谓同源指同ip，同协定，同端口。不能像script那样无限度。

2、DOM 限度

Worker 线程所在的全局对象，与主线程不一样，无奈读取主线程所在网页的 DOM 对象，也无奈应用document、window、parent这些对象。然而，Worker 线程能够navigator对象和location对象，也能够拜访XMLHttpRequest。

3、通信限度

因为是不同的脚本环境，Worker和主线程它们不能间接通信，必须通过音讯实现。

4、文件限度

Worker 线程无奈读取本地文件，即不能关上本机的文件系统（file://），它所加载的脚本，必须来自网络。

根本用法

主线程

主线程采纳new命令，调用Worker()构造函数，新建一个 Worker 线程。

Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的工作。因为 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有胜利（比方404谬误），Worker 就会默默地失败。

而后，主线程就调用worker.postMessage()办法，向 Worker 发消息。

worker.postMessage()办法的参数，就是主线程传给 Worker 的数据。它能够是各种数据类型，包含二进制数据。

接着，主线程通过worker.onmessage指定监听函数，接管worker子线程发回来的音讯。

下面代码中，事件对象的data属性能够获取 Worker 发来的数据。

Worker 实现工作当前，主线程就能够把它关掉。

Worker 线程

Worker 线程外部须要有一个监听函数，监听message事件。

除了应用self.addEventListener()指定监听函数，也能够应用self.onmessage指定。监听函数的参数是一个事件对象，它的data属性蕴含主线程发来的数据。self.postMessage()办法用来向主线程发送音讯。

依据主线程发来的数据，Worker 线程能够调用不同的办法，上面是一个例子。

下面代码中，self.close()用于在 Worker 外部敞开本身。

Worker API

主线程

浏览器原生提供Worker()构造函数，用来供主线程生成 Worker 线程。

const myWorker = new Worker( workUrl, [options] );

Worker()构造函数，能够承受两个参数。第一个参数是脚本的网址（必须恪守同源政策），该参数是必须的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该对象可选。
Worker()构造函数返回一个 Worker 线程对象，用来供主线程操作 Worker。Worker 线程对象的属性和办法如下。

  Worker.onerror // 指定 error 事件的监听函数。  Worker.onmessage // 指定 message 事件的监听函数，发送过去的数据在Event.data属性中。  Worker.onmessageerror // 指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时，会触发这个事件。  Worker.postMessage() // 向 Worker 线程发送音讯。  Worker.terminate() // 立刻终止 Worker 线程。

Worker 线程

Web Worker 有本人的全局对象，不是主线程的window，而是一个专门为 Worker 定制的全局对象。因而定义在window下面的对象和办法不是全副都能够应用。

Worker 线程有一些本人的全局属性和办法。

self.name //  Worker 的名字。该属性只读，由构造函数指定。self.onmessage // 指定message事件的监听函数。self.onerror // Worker出错时触发self.onmessageerror // 指定 messageerror 事件的监听函数。发送的数据无奈序列化成字符串时，会触发这个事件。self.close() // 敞开 Worker 线程。self.postMessage() // 向产生这个 Worker 线程发送音讯。self.importScripts() // 加载 JS 脚本。

对于worker importScripts Api是指worker自身能够加载其它的js脚本，如

importScripts(path0)importScripts(path0, path1)importScripts(path0, path1, /* … ,*/ pathN)

数据通信

后面说过，主线程与 Worker 之间的通信内容，能够是文本，也能够是对象，也能够是二进制。须要留神的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的批改，不会影响到主线程。事实上，浏览器外部的运行机制是，先将通信内容串行化，而后把串行化后的字符串发给 Worker，后者再将它还原。
上面是一个例子。

然而，拷贝形式发送二进制数据，会造成性能问题。比方，主线程向 Worker 发送一个 500MB 文件，默认状况下浏览器会生成一个原文件的拷贝。为了解决这个问题，JavaScript 容许主线程把二进制数据间接转移给子线程，然而一旦转移，主线程就无奈再应用这些二进制数据了，这是为了防止出现多个线程同时批改数据的麻烦场面。这种转移数据的办法，叫做Transferable Objects。这使得主线程能够疾速把数据交给 Worker，对于影像解决、声音解决、3D 运算等就十分不便了，不会产生性能累赘。

如果要间接转移数据的控制权，就要应用上面的写法。

// Transferable Objects 格局worker.postMessage(arrayBuffer, [arrayBuffer]);// 例子var ab = new ArrayBuffer(1);worker.postMessage(ab, [ab]);

同页面的 Web Worker

通常状况下，Worker 载入的是一个独自的 JavaScript 脚本文件，然而也能够载入与主线程在同一个网页的代码。
场景一：

<!DOCTYPE html>  <body>    <script id="worker" type="app/worker">      addEventListener('message', function () {        postMessage('some message');      }, false);    </script>  </body></html>/*  下面是一段嵌入网页的脚本，留神必须指定<script>标签的type属性是一个浏览器不意识的值，上例是app/worker。而后，读取这一段嵌入页面的脚本，用 Worker 来解决。*/var blob = new Blob([document.querySelector('#worker').textContent]);var url = window.URL.createObjectURL(blob);var worker = new Worker(url);worker.onmessage = function (e) {  // e.data === 'some message'};

场景二：

function createWorker(f) {  var blob = new Blob(['(' + f.toString() +')()']);  var url = window.URL.createObjectURL(blob);  var worker = new Worker(url);  return worker;}var pollingWorker = createWorker(function (e) {  var cache;  function compare(new, old) { ... };  setInterval(function () {    fetch('/my-api-endpoint').then(function (res) {      var data = res.json();      if (!compare(data, cache)) {        cache = data;        self.postMessage(data);      }    })  }, 1000)});pollingWorker.onmessage = function () {  // render data}pollingWorker.postMessage('init');

Woker的嵌套

Worker 线程外部还能再新建 Worker 线程。