海印网
海印网

JavaScript 中用于多线程的 Web Workers

hao123数码00

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

什么是网络工作者?

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

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

如何使用网络工作者

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

  1. 创建工人文件 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;
}

登录后复制

  1. 在主线程初始化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);
};

登录后复制

  1. 终止 worker

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

worker.terminate();

登录后复制

示例:对大数组进行排序

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

立即学习“Java免费学习笔记(深入)”;

工作文件(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);
};

登录后复制

web workers 的一些好处

  • 提高性能:将任务卸载到单独的线程可以防止主线程被阻塞。
  • 更好的用户体验:即使在密集操作期间,ui 也能保持响应。
  • 可扩展性:多个工作人员可以同时处理不同的任务。

web workers 开发人员面临的限制

web workers 有优点,但也有一些缺点和限制。

  • no dom access:workers 无法直接操作 dom。
  • 上下文隔离:workers 有自己的全局作用域,无法访问主线程中的变量或函数。
  • 开销:创建工人并与工人沟通是有成本的,使他们不适合非常小的任务。

网络工作者的结论

web workers 让您可以在后台运行繁重的任务,让 javascript 感觉就像有多个线程。通过学习如何有效地使用它们,您可以开发更快、响应更灵敏的 web 应用程序。

对于需要更高级线程功能的场景,请考虑共享 workers 或 worklet 等选项,它们扩展了 web worker 模型。通过正确使用 web workers,您可以显着提高 javascript 应用程序的性能和响应能力。

以上就是JavaScript 中用于多线程的 Web Workers的详细内容,更多请关注其它相关文章!

Tags: 任务主线

Sorry, comments are temporarily closed!