JavaScriptES8实战_共享内存与原子操作

JavaScript通过SharedArrayBuffer和Atomics实现共享内存与原子操作，支持多线程安全数据交换。1. SharedArrayBuffer允许主线程与Worker间共享内存，避免复制开销；2. Atomics提供原子操作如add、compareExchange，防止竞态条件；3. 适用于高性能计算场景，但需启用跨源隔离以确保安全。

JavaScript 中的共享内存与原子操作是 ES8（ECMAScript 2017）引入的重要特性，主要通过 SharedArrayBuffer 和 Atomics 对象实现。这些功能让开发者能够在多线程环境下安全地共享数据并进行同步操作，尤其是在使用 Web Workers 的场景中非常有用。

SharedArrayBuffer：共享内存的基础

SharedArrayBuffer 允许在主线程和 Web Worker 之间共享一块内存区域，多个上下文可以同时读写同一块内存，从而避免了传统 postMessage 的复制开销。

创建一个 SharedArrayBuffer 非常简单：

const sharedBuffer = new SharedArrayBuffer(1024); // 分配 1024 字节
const int32View = new Int32Array(sharedBuffer);   // 使用整型视图操作

这块内存可以被传递给 Worker：

立即学习“Java免费学习笔记（深入）”；

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(int32View);

// worker.js
self.onmessage = function(e) {
  const sharedArray = e.data; // 接收到共享数组
  console.log(sharedArray[0]);
};

Atomics：确保操作的原子性

当多个线程同时访问共享内存时，可能会出现竞态条件。Atomics 对象提供了一组静态方法，用于在 SharedArrayBuffer 上执行不可中断的操作，保证数据一致性。

常用 Atomics 方法包括：

• Atomics.load()：从数组位置读取值
• Atomics.store()：向数组位置写入值
• Atomics.add()：原子性地增加某个位置的值
• Atomics.sub()：原子性地减少某个位置的值
• Atomics.compareExchange()：比较并交换，用于实现锁机制

示例：两个线程对同一位置进行累加

ListenLeap

AI辅助通过播客学英语

101

查看详情

// 主线程
int32View[0] = 0;
Atomics.add(int32View, 0, 1); // 位置0加1

// Worker 中同样操作
self.onmessage = function(e) {
  const arr = e.data;
  Atomics.add(arr, 0, 1);
  self.postMessage(`New value: ${arr[0]}`);
};

由于 add 是原子操作，不会出现两个线程同时读取旧值导致计数错误的问题。

实际应用场景：计数器与线程同步

共享内存和原子操作适合用于高性能计算、实时数据处理或需要低延迟通信的场景。

比如实现一个跨线程计数器：

// 主线程初始化
const buffer = new SharedArrayBuffer(4);
const counter = new Int32Array(buffer);
counter[0] = 0;

const worker = new Worker('counter-worker.js');
worker.postMessage(counter);

// 启动多个操作
Atomics.add(counter, 0, 1);
console.log(`Counter is now: ${counter[0]}`);

// counter-worker.js
self.onmessage = function(e) {
  const ctr = e.data;
  Atomics.add(ctr, 0, 1);
  self.postMessage(ctr[0]);
};

每次调用 Atomics.add 后，计数准确递增，不受并发影响。

注意事项与兼容性

由于安全原因（如 Spectre 漏洞），SharedArrayBuffer 在某些浏览器中默认被禁用，需启用跨源隔离（Cross-Origin Isolation）：

• 页面必须设置以下响应头：

  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp

  登录后复制
• 未正确配置时，SharedArrayBuffer 构造函数会抛出错误
• 检查是否可用：

  if (typeof SharedArrayBuffer !== 'undefined') {
    // 可用
  }

  登录后复制

基本上就这些。共享内存配合原子操作为 JavaScript 提供了真正的并发编程能力，虽然使用门槛略高，但在特定高性能场景下极具价值。

以上就是JavaScriptES8实战_共享内存与原子操作的详细内容，更多请关注php中文网其它相关文章！