解释 JavaScript 中的 Atomics.waitAsync() (提案) 如何实现非阻塞的原子等待，提升 SharedArrayBuffer 的并发效率。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，大家好！我是今天的主讲人，江湖人称“代码老中医”。今天咱们来聊聊 JavaScript 里一个挺有意思的新玩意儿，叫 Atomics.waitAsync()。这玩意儿要是用好了，能让你的 SharedArrayBuffer 程序跑得更快更流畅，就像给便秘的老马喂了泻药一样，效果那是杠杠的！

啥是 SharedArrayBuffer？又为啥需要这 Atomics.waitAsync()？

首先，咱们得简单回顾一下 SharedArrayBuffer。简单来说，它就是 JavaScript 里一块可以被多个线程（Worker）共享的内存区域。这可厉害了，以前 JavaScript 都是单线程，想搞并发？只能靠消息传递，效率低得令人发指。有了 SharedArrayBuffer，多个 Worker 可以直接读写同一块内存，并发性能瞬间提升了好几个档次。

但是！问题来了。多个线程同时操作同一块内存，很容易出现数据竞争，就像一群人抢一个馒头，不打起来才怪。这时候就需要“原子操作”来保证数据的一致性。Atomics 对象就是 JavaScript 提供的一组原子操作，比如原子加、原子减等等。

以前，我们用 Atomics.wait() 来让某个线程阻塞，直到 SharedArrayBuffer 里的某个值满足特定条件。这就像你在门口等快递，但是 Atomics.wait() 是个阻塞操作，也就是说，线程会一直卡在那里，啥也干不了，直到快递小哥给你打电话。这在主线程里是绝对不能容忍的，会直接卡死你的页面！

Atomics.waitAsync() 的出现就是为了解决这个问题。它提供了一种非阻塞的原子等待方式，让线程可以在等待的同时去做其他事情，就像你设置了快递到货提醒，然后该干嘛干嘛，等快递到了再来取。

Atomics.waitAsync() 怎么用？

咱们先来看个简单的例子，假设有两个 Worker，一个负责生产数据，一个负责消费数据。

// producer.js (生产者)
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 2); // 创建一个可以存放两个整数的 SharedArrayBuffer
const arr = new Int32Array(sab);
const index = 0; // 生产者负责的索引

setInterval(() => {
  const value = Math.floor(Math.random() * 100); // 生成一个随机数
  Atomics.store(arr, index, value); // 原子性地将随机数存入 SharedArrayBuffer
  console.log(`生产者生产了：${value}`);
  Atomics.notify(arr, index, 1); // 唤醒等待该索引的消费者
}, 1000);

// consumer.js (消费者)
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 2); // 和生产者共享同一个 SharedArrayBuffer
const arr = new Int32Array(sab);
const index = 0; // 消费者负责的索引

async function consume() {
  while (true) {
    const expectedValue = -1; // 假设初始值为-1，等待生产者更新
    console.log(`消费者等待生产者生产数据...`);
    const result = await Atomics.waitAsync(arr, index, expectedValue, 5000).value; // 等待 5 秒

    if (result === 'ok') {
      const value = Atomics.load(arr, index); // 原子性地读取数据
      console.log(`消费者消费了：${value}`);
    } else if (result === 'timed-out') {
      console.log(`消费者等待超时...`);
    } else {
      console.log(`消费者等待出错：${result}`);
    }
  }
}

consume();

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Atomics.waitAsync Example</title>
</head>
<body>
  <h1>Atomics.waitAsync Example</h1>
  <script>
    const worker1 = new Worker('producer.js');
    const worker2 = new Worker('consumer.js');
  </script>
</body>
</html>

在这个例子里，producer.js 负责生产数据，并使用 Atomics.notify() 唤醒等待的消费者。consumer.js 负责消费数据，并使用 Atomics.waitAsync() 等待生产者生产数据。

Atomics.waitAsync(arr, index, expectedValue, timeout) 接受四个参数：

arr: 要操作的 Int32Array 或者 BigInt64Array 实例，它必须基于 SharedArrayBuffer 创建。
index: 要等待的数组元素的索引。
expectedValue: 期望的值，只有当 arr[index] 的值等于 expectedValue 时，才会开始等待。
timeout: 等待的超时时间，单位是毫秒。如果超过这个时间还没有被唤醒，waitAsync 会返回 timed-out。

Atomics.waitAsync() 返回一个 Promise 对象。这个 Promise 会在以下三种情况下 resolve：

ok: 线程被 Atomics.notify() 唤醒，并且 arr[index] 的值已经改变。
timed-out: 等待超时。
not-equal: arr[index] 的值不等于 expectedValue，也就是说，等待条件不满足。

重点！重点！重点！ Atomics.waitAsync() 返回的是一个包含 value 属性的对象，我们需要通过 .value 来获取实际的结果。这是一个非常容易被忽略的点，很多同学一开始用的时候都会踩坑。

更复杂一点的例子：生产者消费者模型带缓冲

上面的例子比较简单，生产者和消费者直接共享一个数据。在实际应用中，我们通常会使用一个缓冲区来提高效率。

// producer.js
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 3); // 缓冲区大小为 1
const arr = new Int32Array(sab);
const dataIndex = 0; // 数据索引
const countIndex = 1; // 计数器索引，表示缓冲区有多少数据
const capacity = 1; // 缓冲区容量
Atomics.store(arr, countIndex, 0); // 初始化计数器为 0

setInterval(() => {
  const value = Math.floor(Math.random() * 100);
  console.log(`生产者尝试生产：${value}`);

  // 等待缓冲区有空位
  let currentCount = Atomics.load(arr, countIndex);
  while (currentCount >= capacity) {
    console.log(`生产者等待空位...`);
    const result = Atomics.waitAsync(arr, countIndex, capacity, 5000).value; // 等待 countIndex 的值小于 capacity
    if (result === 'ok') {
      currentCount = Atomics.load(arr, countIndex); // 重新读取计数器
    } else if (result === 'timed-out') {
      console.log(`生产者等待超时...`);
      return; // 超时退出
    } else {
      console.log(`生产者等待出错：${result}`);
      return;
    }
  }

  Atomics.store(arr, dataIndex, value); // 放入数据
  console.log(`生产者生产了：${value}`);
  Atomics.add(arr, countIndex, 1); // 增加计数器
  Atomics.notify(arr, countIndex, 1); // 唤醒消费者
}, 500);

// consumer.js
const sab = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * 3); // 缓冲区大小为 1
const arr = new Int32Array(sab);
const dataIndex = 0; // 数据索引
const countIndex = 1; // 计数器索引，表示缓冲区有多少数据
const capacity = 1; // 缓冲区容量

async function consume() {
  while (true) {
    // 等待缓冲区有数据
    let currentCount = Atomics.load(arr, countIndex);
    while (currentCount <= 0) {
      console.log(`消费者等待数据...`);
      const result = await Atomics.waitAsync(arr, countIndex, 0, 5000).value; // 等待 countIndex 的值大于 0
      if (result === 'ok') {
        currentCount = Atomics.load(arr, countIndex); // 重新读取计数器
      } else if (result === 'timed-out') {
        console.log(`消费者等待超时...`);
        return; // 超时退出
      } else {
        console.log(`消费者等待出错：${result}`);
        return;
      }
    }

    const value = Atomics.load(arr, dataIndex); // 取出数据
    console.log(`消费者消费了：${value}`);
    Atomics.sub(arr, countIndex, 1); // 减少计数器
    Atomics.notify(arr, countIndex, 1); // 唤醒生产者
  }
}

consume();

在这个例子里，我们使用了一个大小为 1 的缓冲区。countIndex 用来记录缓冲区里有多少数据。生产者在放入数据之前，会先检查缓冲区是否已满，如果满了，就使用 Atomics.waitAsync() 等待消费者消费数据。消费者在取出数据之前，会先检查缓冲区是否为空，如果为空，就使用 Atomics.waitAsync() 等待生产者生产数据。

Atomics.waitAsync() 的优势

非阻塞: 这是最大的优势，可以让线程在等待的同时去做其他事情，避免了线程被卡死。
原子性: Atomics.waitAsync() 基于原子操作，可以保证数据的一致性。
超时机制: 可以设置超时时间，避免线程一直卡在那里。

Atomics.waitAsync() 的局限性

SharedArrayBuffer: 只能用于 SharedArrayBuffer，不能用于普通的 ArrayBuffer。
Int32Array/BigInt64Array: 只能用于 Int32Array 和 BigInt64Array。
需要配合 Atomics.notify(): 需要配合 Atomics.notify() 才能唤醒等待的线程。
浏览器兼容性: 目前还在提案阶段，浏览器兼容性可能不太好。

一些需要注意的点

Spurious Wakeups: Atomics.waitAsync() 有可能会被“虚假唤醒”（Spurious Wakeups），也就是说，即使 arr[index] 的值没有改变，线程也有可能被唤醒。因此，在 Atomics.waitAsync() 返回后，一定要再次检查 arr[index] 的值，确保满足等待条件。
死锁: 在使用 Atomics.waitAsync() 的时候，一定要注意避免死锁。比如，两个线程互相等待对方释放资源，就会导致死锁。
性能: 虽然 Atomics.waitAsync() 是非阻塞的，但是频繁的等待和唤醒也会带来一定的性能开销。因此，在使用 Atomics.waitAsync() 的时候，一定要仔细评估性能。
错误处理: Atomics.waitAsync() 可能会抛出异常，比如 TypeError。因此，在使用 Atomics.waitAsync() 的时候，一定要做好错误处理。

Atomics.waitAsync() 的应用场景

高并发数据处理: 可以用于处理需要高并发的数据，比如实时数据分析、游戏服务器等等。
多线程图像处理: 可以用于多线程图像处理，比如图像渲染、图像滤镜等等。
WebAssembly: 可以和 WebAssembly 结合使用，提高 WebAssembly 程序的性能。

总结

Atomics.waitAsync() 是一个非常有用的工具，可以帮助我们编写更高性能的 JavaScript 程序。但是，它也有一些局限性，需要我们仔细评估。希望通过今天的讲解，大家能够对 Atomics.waitAsync() 有更深入的了解，并在实际项目中灵活运用。

一些进阶思考

如何选择合适的超时时间？ 超时时间太短，可能会导致线程频繁被唤醒，浪费资源。超时时间太长，可能会导致线程一直卡在那里，影响程序的响应速度。
如何避免死锁？ 可以使用一些死锁避免算法，比如资源排序等等。
如何优化 Atomics.waitAsync() 的性能？ 可以减少等待和唤醒的次数，比如使用批量操作等等。

最后的温馨提示

Atomics.waitAsync() 还在提案阶段，不同的浏览器可能支持程度不一样，使用前请务必查阅相关文档和测试。另外，多线程编程本身就比较复杂，需要小心谨慎，避免出现各种奇怪的 bug。

好了，今天的讲座就到这里。希望大家有所收获，也欢迎大家多多交流，共同进步！谢谢大家！

发表回复 取消回复

发表回复取消回复