JavaScript内核与高级编程之：`JavaScript` 的 `Shared Structs` 提案：如何在多线程间共享复杂数据结构。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱们聊点刺激的——JavaScript的Shared Structs提案。别害怕，虽然名字听起来像量子物理，但其实没那么玄乎。

开场白：单线程的“甜蜜”负担

在JavaScript的世界里，我们一直享受着“单线程”带来的便利。这意味着什么呢？简单来说，就像只有一个服务员的餐厅，所有顾客（任务）都得排队等着他一个个服务。好处是简单，不容易出错，不用担心多个服务员同时抢着服务同一个顾客，导致场面混乱。

但问题也来了，如果某个顾客点了个满汉全席，服务员得花很长时间准备，其他顾客就只能干瞪眼。这就是单线程的瓶颈：如果一个任务耗时太长，整个程序就会卡住，用户体验极差。

多线程的诱惑：开启并行宇宙

为了解决这个问题，Web Workers应运而生。它允许我们在后台创建一个或多个独立的线程，让它们并行执行任务，就像餐厅里多了几个服务员，可以同时服务多个顾客。

然而，Web Workers之间的通信却是个麻烦事。它们之间只能通过“消息传递”（Message Passing）来交流，就像两个服务员用纸条传递信息，效率不高，而且传递复杂数据结构时，需要先“序列化”（把对象变成字符串），再“反序列化”（把字符串变回对象），这简直是脱裤子放屁，多此一举。

Shared Structs：打破数据孤岛

Shared Structs提案，就是为了解决Web Workers之间共享复杂数据结构的难题而生的。它允许我们在多个线程之间直接共享内存，就像餐厅里有一个公共的食材仓库，每个服务员都可以直接从中取用食材，无需通过纸条传递信息。

SharedArrayBuffer：共享内存的基石

Shared Structs的核心是SharedArrayBuffer。它是一种特殊的ArrayBuffer，可以在多个线程之间共享。

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

// 在主线程中创建一个Int32Array视图
const view1 = new Int32Array(sab);

// 在Web Worker中创建一个Int32Array视图
// (假设已经把sab传递给了Worker)
// const view2 = new Int32Array(sab);

// 现在，主线程和Worker可以同时访问和修改同一块内存区域了
view1[0] = 42; // 主线程修改
// console.log(view2[0]); // Worker可以读取到42

原子操作：保障数据一致性

多个线程同时访问和修改共享内存，可能会导致数据竞争（Data Race），就像多个服务员同时抢夺同一份食材，结果可能谁都抢不到，或者抢到的不是自己想要的。

为了避免数据竞争，我们需要使用原子操作（Atomic Operations）。原子操作是不可分割的操作，可以保证在多线程环境下，对共享变量的访问和修改是安全的。

JavaScript提供了Atomics对象，它包含了一系列原子操作方法。

// 创建一个共享的Int32Array
const sab = new SharedArrayBuffer(4); // 4字节，可以存储一个32位整数
const view = new Int32Array(sab);

// 初始化共享变量
Atomics.store(view, 0, 0); // 将view[0]设置为0

// 在Web Worker中：
// Atomics.add(view, 0, 1); // 原子性地将view[0]加1

// 在主线程中：
// Atomics.add(view, 0, 1); // 原子性地将view[0]加1

// 最终，view[0]的值应该是2，即使两个线程同时执行了加1操作

Atomics对象提供了一系列原子操作方法，包括：

方法	描述
`load(typedArray, index)`	加载指定索引处的原子值。
`store(typedArray, index, value)`	存储指定索引处的原子值。
`add(typedArray, index, value)`	原子性地将指定值添加到指定索引处的原子值。
`sub(typedArray, index, value)`	原子性地从指定索引处的原子值中减去指定值。
`and(typedArray, index, value)`	原子性地将指定索引处的原子值与指定值进行按位与操作。
`or(typedArray, index, value)`	原子性地将指定索引处的原子值与指定值进行按位或操作。
`xor(typedArray, index, value)`	原子性地将指定索引处的原子值与指定值进行按位异或操作。
`exchange(typedArray, index, value)`	原子性地将指定索引处的原子值与指定值进行交换。
`compareExchange(typedArray, index, expectedValue, replacementValue)`	原子性地比较指定索引处的原子值与期望值，如果相等，则将其替换为替换值。返回原始值。
`wait(typedArray, index, value, timeout)`	使当前线程休眠，直到指定索引处的原子值变为与期望值不同，或者超时。
`notify(typedArray, index, count)`	唤醒等待指定索引处的原子值的线程。
`isLockFree(size)`	检查给定大小的原子操作是否是无锁的。

Structs：组织数据的蓝图

有了共享内存和原子操作，我们就可以在多个线程之间共享基本数据类型了。但是，如果我们要共享复杂的数据结构，比如对象、数组等，该怎么办呢？

Shared Structs提案引入了“Structs”的概念。Structs是一种自定义的数据结构，可以包含多个字段，每个字段可以是基本数据类型或其他Structs。

// 定义一个Point结构体
struct Point {
  x: i32, // x坐标，32位整数
  y: i32, // y坐标，32位整数
}

// 创建一个Point实例
const point = new Point(10, 20);

// 访问Point实例的字段
console.log(point.x); // 10
console.log(point.y); // 20

注意，这只是一个伪代码示例，因为Shared Structs提案仍在制定中，具体的语法可能会有所变化。

如何在SharedArrayBuffer中使用Structs

Shared Structs提案的目标是让我们能够在SharedArrayBuffer中使用Structs。这意味着我们可以将Structs实例存储在共享内存中，并在多个线程之间共享它们。

// 创建一个共享的ArrayBuffer
const sab = new SharedArrayBuffer(Point.byteLength * 10); // 10个Point结构体的空间

// 在主线程中创建一个Point数组视图
const points1 = new Point.Array(sab);

// 在Web Worker中创建一个Point数组视图
// (假设已经把sab传递给了Worker)
// const points2 = new Point.Array(sab);

// 现在，主线程和Worker可以同时访问和修改同一块内存区域了
points1[0].x = 10; // 主线程修改
points1[0].y = 20;

// console.log(points2[0].x); // Worker可以读取到10
// console.log(points2[0].y); // Worker可以读取到20

同样，这只是一个伪代码示例，具体的实现方式可能会有所不同。

用例：图像处理

Shared Structs在图像处理方面有很大的潜力。例如，我们可以将图像数据存储在SharedArrayBuffer中，然后让多个Web Workers并行处理图像的不同区域。

// 假设imageData是一个包含图像数据的ArrayBuffer
const imageData = new Uint8ClampedArray(width * height * 4); // RGBA数据

// 创建一个共享的ArrayBuffer
const sab = new SharedArrayBuffer(imageData.byteLength);

// 将imageData的数据复制到sab中
const sharedImageData = new Uint8ClampedArray(sab);
sharedImageData.set(imageData);

// 将sab传递给多个Web Workers
// 每个Worker负责处理图像的一部分区域

// 在Web Worker中：
// const workerImageData = new Uint8ClampedArray(sab);
// processImage(workerImageData, startRow, endRow); // 处理图像的指定区域

// 最终，所有Worker处理完后，sharedImageData就包含了处理后的图像数据

用例：物理模拟

Shared Structs也可以用于物理模拟。例如，我们可以将游戏中所有物体的状态（位置、速度、加速度等）存储在SharedArrayBuffer中，然后让多个Web Workers并行计算物体的运动。

// 定义一个物体结构体
struct Body {
  x: f64, // x坐标，64位浮点数
  y: f64, // y坐标，64位浮点数
  vx: f64, // x速度，64位浮点数
  vy: f64, // y速度，64位浮点数
}

// 创建一个共享的ArrayBuffer
const sab = new SharedArrayBuffer(Body.byteLength * numBodies); // 所有物体的空间

// 在主线程中创建一个Body数组视图
const bodies1 = new Body.Array(sab);

// 将sab传递给多个Web Workers
// 每个Worker负责计算一部分物体的运动

// 在Web Worker中：
// const bodies2 = new Body.Array(sab);
// simulate(bodies2, startIndex, endIndex); // 计算指定范围内的物体的运动

// 最终，所有Worker计算完后，bodies1就包含了所有物体更新后的状态

Shared Structs的优势

高性能： 避免了序列化和反序列化的开销，提高了数据传输效率。
低延迟： 多个线程可以直接访问共享内存，降低了通信延迟。
简化代码： 无需手动管理数据的复制和同步，简化了多线程编程的复杂性。

Shared Structs的挑战

数据竞争： 需要使用原子操作来避免数据竞争，增加了编程的难度。
内存管理： 需要手动管理共享内存的分配和释放，容易出错。
安全风险： 共享内存可能存在安全风险，需要谨慎处理。

总结

Shared Structs提案为JavaScript带来了多线程编程的新可能。它允许我们在多个线程之间共享复杂的数据结构，从而提高程序的性能和响应速度。虽然Shared Structs还处于提案阶段，但它已经引起了广泛的关注，相信在不久的将来，我们就能在JavaScript中使用Shared Structs来构建高性能的多线程应用。

Q&A环节

现在进入Q&A环节，大家有什么问题都可以提出来，我会尽力解答。

补充说明

Shared Structs提案仍在积极开发中，具体的语法和实现方式可能会有所变化。
使用Shared Structs需要谨慎处理数据竞争和内存管理等问题。
并非所有场景都适合使用Shared Structs，需要根据实际情况进行选择。

希望今天的讲座对大家有所帮助，谢谢大家！

发表回复 取消回复

发表回复取消回复