JS `SharedArrayBuffer` 与 `Web Locks API` 构建跨 Worker 的分布式共享内存锁

各位观众，晚上好！今天咱们来聊聊如何在 JavaScript 的多线程世界里，用 SharedArrayBuffer 和 Web Locks API 打造一套跨 Worker 的分布式共享内存锁。这听起来有点像科幻小说，但其实非常实用，能让你的 Web 应用在多核 CPU 上跑得更快更稳。

首先，咱们先来了解一下这两个主角：SharedArrayBuffer 和 Web Locks API。

主角一：SharedArrayBuffer，共享的记忆

想象一下，你有一块内存，但不是你一个人独享，而是所有 Worker 都能看到、都能修改。这就是 SharedArrayBuffer 的作用。它就像一个公共的黑板，所有 Worker 都可以在上面写写画画，但是，也正因为是共享的，所以需要一些机制来避免大家同时修改导致数据混乱。

SharedArrayBuffer 本身只是提供了一块共享的内存区域，如何在这块区域上进行读写，以及如何保证多线程安全，就需要用到 Atomics 对象。Atomics 对象提供了一系列原子操作，可以确保在多线程环境下对 SharedArrayBuffer 的读写操作是安全的。

创建 SharedArrayBuffer 的方法：

// 创建一个 1024 字节的 SharedArrayBuffer
const sab = new SharedArrayBuffer(1024);

使用 Atomics 进行原子操作：

// 创建一个 Int32Array 视图，方便操作
const int32Array = new Int32Array(sab);

// 原子地将 int32Array[0] 的值设置为 10
Atomics.store(int32Array, 0, 10);

// 原子地将 int32Array[0] 的值加 1
Atomics.add(int32Array, 0, 1);

// 原子地比较 int32Array[0] 的值是否等于 11，如果是，则设置为 20，否则不修改
Atomics.compareExchange(int32Array, 0, 11, 20);

主角二：Web Locks API，秩序的维护者

有了共享的黑板，接下来就需要一个管理员来维持秩序，防止大家争抢着修改，导致黑板上的内容一片混乱。Web Locks API 就是这个管理员。它提供了一种机制，让 Worker 可以申请锁，只有拿到锁的 Worker 才能访问共享资源，用完之后再释放锁，让其他 Worker 也能有机会访问。

Web Locks API 就像一把钥匙，只有拿到钥匙的 Worker 才能打开房间的门，进入房间操作共享资源。

申请锁的方法：

navigator.locks.request('my-lock', async lock => {
  // 在这里进行需要锁保护的操作
  console.log('拿到锁了！');
  await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟耗时操作
  console.log('操作完成，释放锁！');
});

navigator.locks.request 函数会异步地请求一个名为 ‘my-lock’ 的锁。如果锁当前没有被其他 Worker 持有，那么就会立即获得锁，并执行回调函数。如果锁已经被其他 Worker 持有，那么就会等待，直到锁被释放。

组合技：SharedArrayBuffer + Web Locks API = 分布式共享内存锁

现在，我们把这两个主角组合起来，就能打造一套跨 Worker 的分布式共享内存锁了。思路是：

使用 SharedArrayBuffer 创建一块共享内存。
使用 Web Locks API 创建一个锁。
Worker 在访问共享内存之前，先申请锁。
拿到锁之后，Worker 就可以安全地读写共享内存。
操作完成后，Worker 释放锁，让其他 Worker 也能访问。

代码示例：

首先，创建一个主线程 (main.js)：

// main.js
const workerCount = navigator.hardwareConcurrency || 4; // 获取 CPU 核心数，作为 Worker 数量
const sab = new SharedArrayBuffer(1024);
const int32Array = new Int32Array(sab);

const workers = [];
for (let i = 0; i < workerCount; i++) {
  const worker = new Worker('worker.js');
  worker.postMessage({ sab, workerId: i }); // 将 SharedArrayBuffer 和 Worker ID 发送给 Worker
  workers.push(worker);
}

// 主线程可以监听所有 Worker 的消息，进行一些汇总处理
workers.forEach(worker => {
  worker.onmessage = (event) => {
    console.log(`Worker ${event.data.workerId} says: ${event.data.message}`);
  };
});

// 模拟主线程也需要访问共享内存
setTimeout(() => {
  navigator.locks.request('my-lock', async lock => {
    console.log('Main thread: 拿到锁了！');
    const oldValue = Atomics.load(int32Array, 0);
    Atomics.store(int32Array, 0, oldValue + 100);
    console.log(`Main thread: 当前共享内存的值为: ${Atomics.load(int32Array, 0)}`);
    console.log('Main thread: 操作完成，释放锁！');
  });
}, 5000); // 延迟 5 秒，让 Worker 先执行

然后，创建一个 Worker 线程 (worker.js)：

// worker.js
let sab;
let int32Array;
let workerId;

self.onmessage = (event) => {
  sab = event.data.sab;
  int32Array = new Int32Array(sab);
  workerId = event.data.workerId;
  runTask();
};

async function runTask() {
  navigator.locks.request('my-lock', async lock => {
    console.log(`Worker ${workerId}: 拿到锁了！`);
    const oldValue = Atomics.load(int32Array, 0);
    Atomics.store(int32Array, 0, oldValue + 1);
    self.postMessage({ workerId, message: `当前共享内存的值为: ${Atomics.load(int32Array, 0)}` });
    console.log(`Worker ${workerId}: 操作完成，释放锁！`);
  });
}

在这个例子中，我们创建了一个 SharedArrayBuffer，然后创建了多个 Worker，并将 SharedArrayBuffer 传递给每个 Worker。每个 Worker 在访问 SharedArrayBuffer 之前，都会先使用 Web Locks API 申请一个名为 ‘my-lock’ 的锁。拿到锁之后，就可以安全地读写 SharedArrayBuffer 了。

注意事项：

锁的粒度： 锁的粒度要根据实际情况进行选择。如果锁的粒度太小，会导致频繁的锁竞争，降低性能。如果锁的粒度太大，会导致并发度降低，也降低性能。
死锁： 要避免死锁的发生。死锁是指多个 Worker 互相等待对方释放锁，导致所有 Worker 都无法继续执行。
异常处理： 在使用锁的时候，要进行异常处理，防止因为异常导致锁无法释放。可以使用 try...finally 语句来确保锁一定会被释放。

更高级的用法：

条件变量： Atomics 对象还提供了一些方法，可以用来实现条件变量，例如 Atomics.wait 和 Atomics.wake。条件变量可以用来让 Worker 在满足特定条件的时候才执行，从而提高效率。
读写锁： 可以使用 Web Locks API 和 SharedArrayBuffer 实现读写锁。读写锁允许多个 Worker 同时读取共享内存，但只允许一个 Worker 写入共享内存。

总结：

SharedArrayBuffer 和 Web Locks API 是一对强大的组合，可以让你在 JavaScript 的多线程世界里，打造高性能、高并发的 Web 应用。当然，使用它们也需要一定的技巧和经验，需要根据实际情况进行选择和调整。

表格：SharedArrayBuffer 和 Atomics 常用方法

方法名	描述
`SharedArrayBuffer`	创建一个指定大小的 `SharedArrayBuffer` 对象。
`Atomics.load(arr, index)`	原子地读取数组 `arr` 中索引为 `index` 的元素值。
`Atomics.store(arr, index, value)`	原子地将数组 `arr` 中索引为 `index` 的元素设置为 `value`。
`Atomics.add(arr, index, value)`	原子地将数组 `arr` 中索引为 `index` 的元素加上 `value`。
`Atomics.sub(arr, index, value)`	原子地将数组 `arr` 中索引为 `index` 的元素减去 `value`。
`Atomics.exchange(arr, index, value)`	原子地将数组 `arr` 中索引为 `index` 的元素设置为 `value`，并返回原来的值。
`Atomics.compareExchange(arr, index, expectedValue, newValue)`	原子地比较数组 `arr` 中索引为 `index` 的元素是否等于 `expectedValue`，如果是，则设置为 `newValue`，并返回原来的值。如果不是，则不修改，并返回原来的值。
`Atomics.wait(arr, index, value, timeout)`	原子地检查数组 `arr` 中索引为 `index` 的元素是否等于 `value`，如果是，则休眠当前线程，直到其他线程调用 `Atomics.wake` 或超时。
`Atomics.wake(arr, index, count)`	唤醒等待在数组 `arr` 中索引为 `index` 的元素的线程，最多唤醒 `count` 个线程。

表格：Web Locks API 常用方法

方法名	描述
`navigator.locks.request(name, callback)`	请求一个名为 `name` 的锁，如果锁可用，则立即执行回调函数 `callback`，并将锁对象作为参数传递给回调函数。如果锁不可用，则等待，直到锁可用。
`navigator.locks.request(name, options, callback)`	请求一个名为 `name` 的锁，并指定一些选项，例如 `mode`（`exclusive` 或 `shared`）和 `ifavailable`。
`navigator.locks.query()`	查询当前锁的状态。

希望今天的分享对大家有所帮助！祝大家编程愉快， Bug 远离！

发表回复 取消回复

发表回复取消回复