当前位置:首页 > 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)内容:

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可以实现线程间共享内存:

主线程:

js实现多线程

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实例会消耗系统资源,需要合理管理生命周期。

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

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

相关文章

js实现

js实现

实现 JavaScript 功能的方法 在 JavaScript 中实现特定功能通常涉及多个步骤。以下是常见的实现方法: 基础语法和变量声明 使用 let 或 const 声明变量: let co…

js防抖和节流实现

js防抖和节流实现

防抖(Debounce)的实现 防抖的核心思想是在事件被触发后,延迟执行回调函数。如果在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口大小调整等场景。 function debounce…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js钟表实现

js钟表实现

实现JavaScript钟表的基本方法 创建一个简单的JavaScript钟表可以通过以下步骤完成,涵盖数字和模拟两种形式。 数字钟表实现 HTML结构只需一个显示时间的容器: <div i…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…

js图片轮播的实现

js图片轮播的实现

基础图片轮播实现 使用HTML、CSS和JavaScript实现一个简单的图片轮播效果。HTML部分定义轮播容器和图片,CSS负责样式和过渡效果,JavaScript处理逻辑。 <div cl…