JavaScript Web Workers使用流程

最新推荐文章于 2025-02-28 10:08:22 发布

无敌的季末

最新推荐文章于 2025-02-28 10:08:22 发布

阅读量512

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 ui

本文链接：https://blog.csdn.net/qq_36375770/article/details/129235732

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

WebWorkers是一个API，用于在浏览器中运行后台任务，不干扰UI线程。它们通过消息传递与主线程通信，启动后使用Worker()构造函数，终止时调用terminate()。主线程使用postMessage发送消息，Worker通过onmessage接收。示例展示了如何使用WebWorkers执行耗时任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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