JavaScript Web Workers使用流程

背景

Web Workers是一个API，允许在浏览器中运行后台处理任务，而不影响用户界面（UI）线程的稳定性。

Web Workers 可用于消除阻止 UI 的耗时任务，如图表生成，物理模拟或数据分析等：

使用 Web Workers

启动和终止

一个web worker 由一个文件创建，它正常情况下位于主线程之外。可以使用 JavsScript 的 Worker() 构造函数来创建并启动 Worker：

const worker = new Worker('worker.js');

要终止 Worker，请使用 terminate() 方法：

worker.terminate();

通信

Web workers 使用 消息传输 机制 (message-passing mechanism) 来与主线程进行通信：

• 主线程可以通过 postMessage() 方法将消息发送给 Worker:

worker.postMessage('Hello World!');

• Worker 可以使用 onmessage 处理函数来接受主线程发送的消息：

worker.onmessage = function(event) {
  console.log(event.data); // Prints 'Hello Worker!'
});

示例

以下代码演示了如何使用 web workers 运行一个耗时任务：

主文件（main.js）

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

// Send a message to the worker
worker.postMessage('start');

// Handle messages sent by the worker
worker.onmessage = function(event) {
  console.log('Received message from worker', event.data);
};

工作者文件（worker.js）

// Receive messages from the main script
onmessage = function(event) {
  if (event.data == 'start') {
    // Run expensive task
    var result = doExpensiveTask();    
    // Send message to main script 
    postMessage(result);
  }
};