当前位置:首页 > 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实现复制到剪贴板

使用document.execCommand方法(传统方式,已废弃但部分浏览器仍支持) 该方法适用于旧版浏览器,但已被标记为废弃。执行前需确保文本已被选中: function copyToClip…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = documen…

vue实现多线程

vue实现多线程

Vue 中实现多线程的方法 Vue.js 本身是单线程的,但可以通过 Web Workers 或类似技术实现多线程操作。以下是几种常见的方法: 使用 Web Workers Web Workers…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 cons…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="d…