JavaScript 中用于多线程的 Web Workers

DDD

发布时间：2024-12-23 08:27:09

876人浏览过

来源于dev.to

转载

javascript 以单个序列运行代码，这称为单线程。这种设计非常适合 web 浏览器中的简单任务，但当主线程被复杂计算或后台操作等繁重任务阻塞时，可能会导致问题。这些任务可能会使页面变慢且无响应。为了解决这个问题，javascript 提供了 web workers，它允许您将繁重的任务移至单独的线程，保持主线程空闲，以实现流畅的用户交互。

什么是网络工作者？

web workers 是 web api 的一项功能，允许 javascript 代码在后台的单独线程上运行。这可以实现类似多线程的行为，通过从主线程卸载资源密集型任务来提高性能。

web workers 在不同的执行上下文中运行，这意味着它们无权访问 dom、窗口或文档对象。但是，它们可以通过消息与主线程通信。

如何使用网络工作者

这是使用 web workers 的分步指南：

创建工人文件 web workers 需要一个单独的 javascript 文件，其中包含要在后台执行的代码。例如，创建一个名为worker.js的文件：

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const result = performheavycomputation(data);
    self.postmessage(result);
};

function performheavycomputation(input) {
    // simulate a cpu-intensive task
    let total = 0;
    for (let i = 0; i < 1e7; i++) {
        total += i * input;
    }
    return total;
}

在主线程初始化worker 使用 worker 构造函数在主脚本中创建 worker 的实例：

// main.js
const worker = new worker('worker.js');

// send data to the worker
worker.postmessage(42);

// receive data from the worker
worker.onmessage = function(event) {
    console.log('result from worker:', event.data);
};

// handle errors
worker.onerror = function(error) {
    console.error('worker error:', error.message);
};

终止 worker

当工作人员的任务完成时，或者不再需要它时，终止它以释放资源：

worker.terminate();

示例：对大数组进行排序

对大数组进行排序可能会阻塞主线程，导致 ui 冻结。让我们使用 web worker 来处理此任务：

立即学习“Java免费学习笔记（深入）”；

BJXSHOP网上开店专家

BJXShop网上购物系统是一个高效、稳定、安全的电子商店销售平台，经过近三年市场的考验，在中国网购系统中属领先水平；完善的订单管理、销售统计系统；网站模版可DIY、亦可导入导出；会员、商品种类和价格均实现无限等级；管理员权限可细分；整合了多种在线支付接口；强有力搜索引擎支持... 程序更新：此版本是伴江行官方商业版程序，已经终止销售，现于免费给大家使用。比其以前的免费版功能增加了：1，整合了论坛

下载

工作文件（sortworker.js）：

self.onmessage = function(event) {
    const sortedarray = event.data.sort((a, b) => a - b);
    self.postmessage(sortedarray);
};

主要脚本：

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker('sortWorker.js');

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
    console.log('Sorted array:', event.data);
};

sortWorker.onerror = function(error) {
    console.error('Error in sorting worker:', error.message);
};