当前位置:首页 > javascript > 正文内容

JS 多线程 web worker 基本使用

hxing6413个月前 (01-16)javascript4007

简介:

JS 是单线程,所有的任务都是在一个线程中完成的,也就是说,只能同时执行一个任务,因此有时多个任务同时进行的时候,会阻塞,比如UI会一直在渲染,同时还要进行复杂逻辑的处理,这时候我们就要使用多线程 worker


Worker的作用:

就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。等到 Worker 线程完成计算任务,再把结果返回给主线程。这样的好处是,一些计算密集型或高延迟的任务,被 Worker 线程负担了,主线程(通常负责 UI 交互)就会很流畅,不会被阻塞或拖慢。


下面是 JavaScript Worker 的详细使用步骤:

创建 Worker 对象

在主线程中创建 Worker 对象,传入一个 JavaScript 文件的 URL,该文件会在 Worker 线程中运行。

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


创建 Message 事件监听器

在主线程中为 Worker 对象添加 message 事件监听器,用于接收 Worker 线程发送的消息。

worker.addEventListener('message', (event) => {
  console.log('Received message from worker:', event.data);
});


发送消息给 Worker 线程

在主线程中通过 postMessage() 方法向 Worker 线程发送消息。

worker.postMessage({type: 'calculate', data: [1, 2, 3]});


在 Worker 线程中处理消息

在 Worker 线程中为 self 对象添加 message 事件监听器,用于接收主线程发送的消息。

self.addEventListener('message', (event) => {
  if (event.data.type === 'calculate') {
    const result = calculate(event.data.data);
    self.postMessage({type: 'result', data: result});
  }
});
function calculate(data) {
  return data.reduce((a, b) => a + b);
}


发送消息给主线程

在 Worker 线程中通过 postMessage() 方法向主线程发送消息。

self.postMessage({type: 'result', data: result});


需要注意的是,Worker 线程中不能直接操作 DOM,因为它们没有访问主线程的权限。如果需要操作 DOM,可以在 Worker 线程中处理数据,然后将处理结果通过 postMessage() 方法发送给主线程,在主线程中更新 DOM。


除了使用 JavaScript 文件创建 Worker 对象,还可以使用 Blob 对象或者 Data URL 创建 Worker 对象。Blob 对象可以动态生成 JavaScript 代码,Data URL 可以将 JavaScript 代码转换为 Base64 编码,并以字符串形式传递给 Worker 对象。


扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:https://www.xingxinghan.cn/?id=514

分享给朋友:

“JS 多线程 web worker 基本使用” 的相关文章

js模块化历程

这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来。经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史。 无模块时代在ajax还未提出之前,js还只是一种“玩具语言”,由Brendan Eich花了不到十天时间发明,用来在网页...

JavaScript中的setTimeout和setInterval

JavaScript是一门广泛应用于网页开发的脚本语言,它提供了许多强大的功能和特性。其中,setTimeout和setInterval是两个常用的定时器函数,它们可以在指定的时间间隔内执行代码。本文将深入探讨这两个函数的用法和特点,并通过代码示例来加深理解。...

深入理解JavaScript原型链

JavaScript原型链是该语言中一个核心的概念,理解它对于成为一名优秀的JavaScript开发者至关重要。在本篇文章中,我们将深入探讨JavaScript原型链的工作原理、如何使用原型链来实现继承,以及一些与原型相关的最佳实践。 原型链是什么?...

7个Js async/await高级用法

JavaScript的异步编程已经从回调(Callback)演进到Promise,再到如今广泛使用的async/await语法。后者不仅让异步代码更加简洁,而且更贴近同步代码的逻辑与结构,大大增强了代码的可读性与可维护性。在掌握了基础用法之后,下面将介绍一些高级用法,以便充分利用async/awai...

JS数组常用方法

JS数组常用方法

JS数组常用方法:1.数组的复制和填充批量复制方法 copyWithin(),以及填充数组方法fill()。这两个方法的函数签名类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。 1.1.fill()方法使用fill()方法可以向一个已...

typescript 中 omit 的理解

在 TypeScript 中,Omit 是一种非常有用的工具类型,它可以用于创建一个新的类型,这个新类型是从现有类型中排除了指定的属性后得到的。如果你想要处理一个对象但又不需要包含某些属性,那么 Omit 可以帮助你快速地创建一个新的类型。 比如说,...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。