Web Worker 教程：原理、用法、通信及性能优化指南

Web Worker 概述与限制

Web Worker

概述

JavaScript 采用单线程模型，所有任务必须按顺序在一个线程中执行，前一个任务未完成时，后续任务只能等待。随着计算机计算能力的提升，尤其是多核 CPU 的普及，单线程模型显得力不从心，无法充分利用硬件算力。

Web Worker 的核心作用是为 JavaScript 引入多线程环境。主线程可以创建 Worker 线程，将特定任务分配给后者处理。在后台线程运行的同时，主线程继续响应用户交互，两者互不干扰。当 Worker 完成计算后，将结果返回给主线程。这种机制使得计算密集型或高延迟任务由后台处理，主线程专注于 UI 交互，保持界面流畅，避免被阻塞。

Worker 线程一旦创建，将持续运行，不会因主线程的用户操作（如点击按钮、提交表单）而中断，这有利于随时响应主线程的通信请求。然而，Worker 占用较多系统资源，因此不应过度使用，且在任务完成后应及时关闭。

使用 Web Worker 时需注意以下几点。

（1）同源限制

Worker 线程执行的脚本文件必须与主线程脚本遵循同源策略。

（2）DOM 限制

Worker 线程拥有独立的全局对象，与主线程不同。它无法访问主线程的 DOM 对象，也不能使用 document、window 或 parent 等对象。但 Worker 可以使用 navigator 和 location 对象。

（3）全局对象限制

Worker 的全局对象是 WorkerGlobalScope，不同于网页的 Window 对象，许多接口无法使用。例如，标准中未定义 Worker 全局对象包含 console 接口，因此理论上 Worker 不能使用 console.log。尽管浏览器通常支持此功能，但为确保兼容性，建议避免使用该方法。

（4）通信联系

Worker 线程与主线程处于不同的上下文环境，无法直接通信，必须通过消息传递机制进行交互。

（5）脚本限制

Worker 线程不能执行 alert() 和 confirm() 方法，但可以使用 XMLHttpRequest 对象发起 AJAX 请求。

（6）文件限制

Worker 线程无法读取本地文件，即不能访问本机文件系统（file://协议）。其加载的脚本必须来自网络。

Web Worker 基本用法

基本用法

主线程

主线程通过 new 命令调用 Worker() 构造函数来创建 Worker 线程。

var worker = new Worker('work.js');

Worker() 构造函数的参数是一个脚本文件路径，该文件定义了 Worker 线程要执行的任务。由于 Worker 不能读取本地文件，脚本必须来自网络。如果下载失败（如返回 404 错误），Worker 会静默失败。

随后，主线程调用 worker.postMessage() 方法向 Worker 发送消息。

worker.postMessage('Hello World'); worker.postMessage({method: 'echo', args: ['Work']});

worker.postMessage() 方法的参数即为主线程传递给 Worker 的数据，支持各种数据类型，包括二进制数据。

接着，主线程通过 worker.onmessage 指定监听函数，以接收 Worker 线程返回的消息。


worker.onmessage = function (event) {
 doSomething(event.data);
}

function doSomething() {
 // 执行任务
 worker.postMessage('Work done!');
}

在上面的代码示例中，事件对象的 data 属性用于获取 Worker 发送的数据。

Worker 完成任务后，主线程可以将其关闭。

worker.terminate();

Worker 线程

Worker 线程内部需要设置一个监听函数，用于监听 message 事件。


self.addEventListener('message', function (e) {
 self.postMessage('You said: ' + e.data);
}, false);

在上面的代码示例中，self 代表子线程自身，即子线程的全局对象。因此，以下两种写法等效。


// 写法一
this.addEventListener('message', function (e) {
 this.postMessage('You said: ' + e.data);
}, false);

// 写法二
addEventListener('message', function (e) {
 postMessage('You said: ' + e.data);
}, false);

除了使用 self.addEventListener() 指定监听函数，也可以使用 self.onmessage 指定。监听函数的参数是一个事件对象，其 data 属性包含主线程发送的数据。self.postMessage() 方法用于向主线程发送消息。

根据主线程发送的数据，Worker 线程可以调用不同的方法，以下是一个示例。


self.addEventListener('message', function (e) {
 var data = e.data;
 switch (data.cmd) {
 case 'start':
  self.postMessage('WORKER STARTED: ' + data.msg);
  break;
 case 'stop':
  self.postMessage('WORKER STOPPED: ' + data.msg);
  self.close(); // Terminates the worker.
  break;
 default:
  self.postMessage('Unknown command: ' + data.msg);
 };
}, false);

在上面的代码示例中，self.close() 用于在 Worker 内部关闭自身。

Worker 脚本加载与错误处理

Worker 加载脚本

如果 Worker 内部需要加载其他脚本，可以使用专门的方法 importScripts()。

importScripts('script1.js');

该方法支持同时加载多个脚本。

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

错误处理

主线程可以监听 Worker 是否发生错误。如果发生错误，Worker 会触发主线程的 error 事件。


worker.onerror(function (event) {
 console.log([
 'ERROR: Line ', event.lineno, ' in ', event.filename, ': ', event.message
 ].join(''));
});

// 或者
worker.addEventListener('error', function (event) {
 // ...
});

Worker 内部也可以监听 error 事件。

关闭 Worker 与数据通信

关闭 Worker

使用完毕后，为了节省系统资源，必须关闭 Worker。


// 主线程
worker.terminate();

// Worker 线程
self.close();

数据通信

前文提到，主线程与 Worker 之间的通信内容可以是文本或对象。需要注意的是，这种通信是拷贝关系，即传值而非传址。Worker 对通信内容的修改不会影响主线程。浏览器内部的运行机制是将通信内容串行化，将串行化后的字符串发送给 Worker，后者再将其还原。

主线程与 Worker 之间也可以交换二进制数据，例如 File、Blob、ArrayBuffer 等类型，这些类型也可以在线程之间发送。以下是一个示例。


// 主线程
var uInt8Array = new Uint8Array(new ArrayBuffer(10));
for (var i = 0; i < uInt8Array.length; ++i) {
 uInt8Array[i] = i * 2; // [0, 2, 4, 6, 8,...]
}
worker.postMessage(uInt8Array);

// Worker 线程
self.onmessage = function (e) {
 var uInt8Array = e.data;
 postMessage('Inside worker.js: uInt8Array.toString() = ' + uInt8Array.toString());
 postMessage('Inside worker.js: uInt8Array.byteLength = ' + uInt8Array.byteLength);
};

然而，通过拷贝方式发送二进制数据会导致性能问题。例如，主线程向 Worker 发送一个 500MB 的文件，默认情况下浏览器会生成该文件的副本。为了解决这一问题，JavaScript 允许主线程将二进制数据直接转移给子线程。一旦转移，主线程将无法再使用这些二进制数据，这是为了防止多个线程同时修改数据带来的复杂性。这种转移数据的方法称为 Transferable Objects。这使得主线程可以快速将数据交给 Worker，对于图像处理、声音处理、3D 运算等场景非常有利，且不会产生性能负担。

如果要直接转移数据的控制权，需使用以下写法。


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

同页面 Worker 与实例应用

同页面的 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'
};

在上面的代码示例中，先将嵌入网页的脚本代码转换为二进制对象，然后为该二进制对象生成 URL，最后让 Worker 加载该 URL。这样就实现了主线程和 Worker 的代码都在同一个网页中的效果。

实例：Worker 线程完成轮询

有时，浏览器需要轮询服务器状态，以便第一时间得知状态改变。这个工作可以放在 Worker 里面。


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');

在上面的代码示例中，Worker 每秒钟轮询一次数据，然后跟缓存做比较。如果不一致，就说明服务端有了新的变化，因此就要通知主线程。

实例： Worker 新建 Worker

Worker 线程内部还能再新建 Worker 线程（目前只有 Firefox 浏览器支持）。以下的例子是将一个计算密集的任务，分配到10个 Worker。

主线程代码如下。


var worker = new Worker('worker.js');
worker.onmessage = function (event) {
 document.getElementById('result').textContent = event.data;
};

Worker 线程代码如下。


// worker.js

// settings
var num_workers = 10;
var items_per_worker = 1000000;

// start the workers
var result = 0;
var pending_workers = num_workers;
for (var i = 0; i < num_workers; i += 1) {
 var worker = new Worker('core.js');
 worker.postMessage(i * items_per_worker);
 worker.postMessage((i + 1) * items_per_worker);
 worker.onmessage = storeResult;
}

// handle the results
function storeResult(event) {
 result += event.data;
 pending_workers -= 1;
 if (pending_workers <= 0)
 postMessage(result); // finished!
}

在上面的代码示例中，Worker 线程内部新建了10个 Worker 线程，并且依次向这10个 Worker 发送消息，告知了计算的起点和终点。计算任务脚本的代码如下。


// core.js
var start;
onmessage = getStart;
function getStart(event) {
 start = event.data;
 onmessage = getEnd;
}

var end;
function getEnd(event) {
 end = event.data;
 onmessage = null;
 work();
}

function work() {
 var result = 0;
 for (var i = start; i < end; i += 1) {
 // perform some complex calculation here
 result += 1;
 }
 postMessage(result);
 close();
}

Web Worker API 详解

API

主线程

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

var myWorker = new Worker(jsUrl, options);

Worker() 构造函数可以接受两个参数。第一个参数是脚本的网址（必须遵守同源政策），该参数是必需的，且只能加载 JS 脚本，否则会报错。第二个参数是配置对象，该参数可选。它的一个作用是指定 Worker 的名称，用来区分多个 Worker 线程。


// 主线程
var myWorker = new Worker('worker.js', { name : 'myWorker' });
// Worker 线程
self.name // myWorker

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.onmessageerror：指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时，会触发这个事件。
self.close()：关闭 Worker 线程。
self.postMessage()：向产生这个 Worker 线程发送消息。
self.importScripts()：加载 JS 脚本。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

JavaScript Web Worker 多线程使用详解与最佳实践