当前位置:首页 > JavaScript

js实现多线程

2026-01-30 13:39:00JavaScript

在JavaScript中实现多线程通常使用Web Workers API,它允许在后台线程中运行脚本,避免阻塞主线程。以下是具体实现方法:

创建Worker线程

在主线程中,通过new Worker()创建Worker实例,指定脚本路径:

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

线程间通信

主线程与Worker线程通过postMessageonmessage进行通信:

主线程发送消息:

worker.postMessage({ command: 'start', data: 42 });

主线程接收消息:

worker.onmessage = function(event) {
  console.log('Received:', event.data);
};

Worker线程脚本(worker.js)内容:

self.onmessage = function(e) {
  if (e.data.command === 'start') {
    const result = heavyComputation(e.data.data);
    self.postMessage({ status: 'complete', result });
  }
};

function heavyComputation(input) {
  // 模拟耗时计算
  return input * 2;
}

终止Worker

当不再需要Worker时,应主动终止以释放资源:

worker.terminate();

共享内存(高级用法)

使用SharedArrayBufferAtomics可以实现线程间共享内存:

主线程:

const sharedBuffer = new SharedArrayBuffer(1024);
const sharedArray = new Int32Array(sharedBuffer);
worker.postMessage({ buffer: sharedBuffer });

Worker线程:

let sharedArray;
self.onmessage = function(e) {
  if (e.data.buffer) {
    sharedArray = new Int32Array(e.data.buffer);
    Atomics.add(sharedArray, 0, 1); // 原子操作
  }
};

注意事项

Web Workers无法直接操作DOM,所有DOM操作必须通过消息传递回主线程执行。

Worker脚本必须与主页面同源(相同协议/域名/端口)。

大量Worker实例会消耗系统资源,需要合理管理生命周期。

js实现多线程

某些API(如LocalStorage)在Worker中不可用,需使用替代方案如IndexedDB。

标签: 多线程js
分享给朋友:

相关文章

js多线程如何简单实现

js多线程如何简单实现

JavaScript 多线程的简单实现方法 JavaScript 本身是单线程的,但可以通过 Web Workers 实现多线程操作。Web Workers 允许在后台运行脚本,独立于主线程执行任务。…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现授权

js实现授权

授权流程设计 授权流程通常涉及前端与后端的交互,常见方案包括OAuth2.0、JWT等。以JWT为例的典型流程: 用户提交凭证(如用户名密码)到认证服务 服务端验证通过后生成包含用户信息的J…

js实现菜单

js实现菜单

实现基本HTML结构 使用HTML创建菜单的基本框架,通常包含<ul>和<li>元素。示例结构如下: <ul id="menu"> <li><…

js实现滑动

js实现滑动

实现滑动效果的方法 在JavaScript中实现滑动效果可以通过多种方式完成,以下是几种常见的实现方法: 使用CSS过渡和JavaScript触发 通过CSS定义过渡效果,JavaScript控制触…

js计算器的实现

js计算器的实现

实现基础结构 HTML部分需要创建计算器的基本框架,包含显示区域和按钮。使用<div>容器包裹整个计算器,内部设置一个显示屏和多个按钮。 <div class="calculato…