探讨 JavaScript ArrayBuffer, SharedArrayBuffer, TypedArray 在处理二进制数据时的内存布局、性能优势和多线程共享。

大家好，今天咱们来聊聊 JavaScript 里的“内存魔法师”

嘿，大家好！今天咱们不聊那些花里胡哨的框架，也不谈那些高深莫测的设计模式。咱们来点实在的，聊聊 JavaScript 里的“内存魔法师”—— ArrayBuffer、SharedArrayBuffer 和 TypedArray。别害怕，虽然听起来有点像炼金术，但其实它们是处理二进制数据的利器，能让你的 JavaScript 代码在性能和多线程方面起飞！

想象一下，你需要处理音频、视频、图像，或者直接操作网络数据包，这些数据通常都是二进制格式。如果你还傻乎乎地用字符串或者传统的 JavaScript 数组去搞，那效率简直惨不忍睹，就像用算盘算火箭发射一样。这时候，我们的“内存魔法师”就要登场了！

1. `ArrayBuffer`：一块原始的内存蛋糕

首先，我们来认识一下 ArrayBuffer。你可以把它想象成一块原始的内存蛋糕，它就是一块连续的内存区域，你可以指定它的大小，但是你不能直接往里面写数据，也不能直接读取数据。它就像一个空盒子，你需要告诉 JavaScript 如何解读这个盒子里的内容。

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);
console.log(buffer.byteLength); // 输出: 16

看到没？我们创建了一个大小为 16 字节的 ArrayBuffer。但是，这个 buffer 就像一块未雕琢的璞玉，你得告诉 JavaScript 怎么去切割它，才能得到你想要的东西。

2. `TypedArray`：蛋糕切割师

接下来，就轮到 TypedArray 登场了。TypedArray 就像一个蛋糕切割师，它能按照不同的数据类型，把 ArrayBuffer 这块大蛋糕切割成小块，并且允许你读写这些小块。

JavaScript 提供了多种 TypedArray 类型，每种类型对应不同的数据格式：

类型	描述	字节大小
`Int8Array`	8 位有符号整数	1
`Uint8Array`	8 位无符号整数	1
`Uint8ClampedArray`	8 位无符号整数，溢出时自动截断到 0-255	1
`Int16Array`	16 位有符号整数	2
`Uint16Array`	16 位无符号整数	2
`Int32Array`	32 位有符号整数	4
`Uint32Array`	32 位无符号整数	4
`Float32Array`	32 位浮点数	4
`Float64Array`	64 位浮点数	8
`BigInt64Array`	64 位有符号整数	8
`BigUint64Array`	64 位无符号整数	8

让我们用一个例子来演示一下：

// 创建一个 16 字节的 ArrayBuffer
const buffer = new ArrayBuffer(16);

// 创建一个 Int32Array 视图，指向 ArrayBuffer
const int32View = new Int32Array(buffer);

// 往视图中写入数据
int32View[0] = 10;
int32View[1] = 20;
int32View[2] = 30;
int32View[3] = 40;

console.log(int32View); // 输出: Int32Array(4) [10, 20, 30, 40]
console.log(int32View.byteLength); // 输出: 16
console.log(int32View.byteOffset); // 输出: 0

// 创建一个 Uint8Array 视图，指向 ArrayBuffer
const uint8View = new Uint8Array(buffer);

console.log(uint8View); // 输出: Uint8Array(16) [10, 0, 0, 0, 20, 0, 0, 0, 30, 0, 0, 0, 40, 0, 0, 0]

在这个例子中，我们先创建了一个 16 字节的 ArrayBuffer。然后，我们创建了一个 Int32Array 视图，它把这个 ArrayBuffer 看作一个包含 4 个 32 位整数的数组。我们往这个视图中写入了 4 个整数。

接着，我们又创建了一个 Uint8Array 视图，它把同一个 ArrayBuffer 看作一个包含 16 个 8 位无符号整数的数组。你会发现，uint8View 里的数据和 int32View 里的数据是相关的，因为它们指向的是同一块内存区域。这就是 TypedArray 的强大之处：你可以用不同的方式解读同一块内存区域，实现各种各样的数据操作。

重要提示：

TypedArray 不是真正的数组，它们没有 push、pop 等方法。它们更像是一个固定大小的、类型化的数组视图。
TypedArray 的 byteLength 属性表示视图占用的总字节数，byteOffset 属性表示视图在 ArrayBuffer 中的起始位置。
你可以创建多个 TypedArray 视图指向同一个 ArrayBuffer，它们会共享同一块内存区域。

3. 性能优势：告别字符串拼接的噩梦

为什么我们要用 ArrayBuffer 和 TypedArray 呢？答案很简单：性能！

在处理二进制数据时，传统的 JavaScript 字符串操作效率非常低下。字符串是不可变的，每次修改字符串都会创建一个新的字符串对象，这会消耗大量的内存和 CPU 资源。

而 ArrayBuffer 和 TypedArray 允许你直接操作内存，避免了不必要的字符串拷贝和转换，大大提高了性能。

举个例子，假设我们需要把一个包含大量数字的数组转换成一个字符串：

传统方式（字符串拼接）：

const numbers = new Array(1000000).fill(1);

console.time('字符串拼接');
let str = '';
for (let i = 0; i < numbers.length; i++) {
  str += numbers[i];
}
console.timeEnd('字符串拼接'); // 耗时很长

使用 ArrayBuffer 和 TypedArray：

const numbers = new Array(1000000).fill(1);

console.time('TypedArray');
const buffer = new ArrayBuffer(numbers.length);
const uint8View = new Uint8Array(buffer);
for (let i = 0; i < numbers.length; i++) {
  uint8View[i] = numbers[i];
}
const str = String.fromCharCode.apply(null, uint8View);
console.timeEnd('TypedArray'); // 速度飞快

你可以亲自跑一下这段代码，你会发现使用 ArrayBuffer 和 TypedArray 的方式比字符串拼接快得多。原因很简单：我们直接在内存中操作数据，避免了大量的字符串拷贝。

4. `SharedArrayBuffer`：多线程共享的秘密武器

ArrayBuffer 虽然性能强大，但是它有一个限制：它不能在不同的线程之间共享。如果你想在 Web Worker 中处理同一个 ArrayBuffer，你需要通过 postMessage 方法进行拷贝，这会带来额外的性能开销。

这时候，SharedArrayBuffer 就要闪亮登场了！ SharedArrayBuffer 允许你在不同的线程之间共享同一块内存区域，而无需进行拷贝。这为 JavaScript 多线程编程打开了新的大门。

注意： 使用 SharedArrayBuffer 需要配置正确的 HTTP 头部，以启用 Cross-Origin Isolation。否则，浏览器会限制 SharedArrayBuffer 的使用。

// 在主线程中创建 SharedArrayBuffer
const sharedBuffer = new SharedArrayBuffer(1024);

// 创建一个 Web Worker
const worker = new Worker('worker.js');

// 将 SharedArrayBuffer 发送给 Web Worker
worker.postMessage(sharedBuffer);

// 接收 Web Worker 的消息
worker.onmessage = function(event) {
  console.log('Received from worker:', event.data);
};

在 worker.js 中：

// 接收主线程发送的 SharedArrayBuffer
onmessage = function(event) {
  const sharedBuffer = event.data;

  // 创建一个 Int32Array 视图，指向 SharedArrayBuffer
  const int32View = new Int32Array(sharedBuffer);

  // 修改 SharedArrayBuffer 中的数据
  int32View[0] = 123;

  // 将修改后的数据发送回主线程
  postMessage(int32View[0]);
};

在这个例子中，主线程创建了一个 SharedArrayBuffer，并将其发送给 Web Worker。Web Worker 创建了一个 Int32Array 视图，指向这个 SharedArrayBuffer，并修改了其中的数据。由于主线程和 Web Worker 共享同一块内存区域，因此主线程也能看到 Web Worker 的修改。

重要提示：

由于多个线程可以同时访问和修改 SharedArrayBuffer 中的数据，因此需要使用同步机制（例如 Atomics）来避免数据竞争。
Atomics 提供了一组原子操作，可以安全地在多个线程之间进行数据同步。

5. `DataView`：更灵活的内存操作

除了 TypedArray 之外，JavaScript 还提供了一个 DataView 对象，用于更灵活地操作 ArrayBuffer 中的数据。 DataView 允许你以任意字节偏移量和数据类型读取和写入数据，而无需受到 TypedArray 的限制。

const buffer = new ArrayBuffer(8);
const dataView = new DataView(buffer);

// 设置一个 32 位浮点数
dataView.setFloat32(0, 3.14159);

// 读取一个 32 位浮点数
const floatValue = dataView.getFloat32(0);
console.log(floatValue); // 输出: 3.14159

// 设置一个 16 位整数
dataView.setInt16(4, 1024);

// 读取一个 16 位整数
const intValue = dataView.getInt16(4);
console.log(intValue); // 输出: 1024

在这个例子中，我们使用 DataView 在 ArrayBuffer 的不同位置设置了不同类型的数据。DataView 的 set 和 get 方法允许你指定字节偏移量和数据类型，这使得你可以更精确地控制内存布局。

6. 应用场景：二进制数据的乐园

ArrayBuffer、SharedArrayBuffer、TypedArray 和 DataView 在处理二进制数据方面有着广泛的应用：

音频和视频处理： 可以直接操作音频和视频的原始数据，实现音频和视频的编解码、特效处理等功能。
图像处理： 可以直接操作图像的像素数据，实现图像的缩放、裁剪、滤镜等功能。
WebGL： WebGL 使用 ArrayBuffer 和 TypedArray 来传递顶点数据、纹理数据等，实现高性能的 3D 渲染。
网络编程： 可以直接操作网络数据包，实现自定义协议、数据压缩等功能。
游戏开发： 可以直接操作游戏资源，例如模型、纹理、音频等，提高游戏性能。

7. 总结：解锁 JavaScript 的性能潜力

ArrayBuffer、SharedArrayBuffer、TypedArray 和 DataView 是 JavaScript 中处理二进制数据的强大工具。它们可以帮助你：

提高性能，避免不必要的字符串拷贝和转换。
实现多线程编程，充分利用 CPU 资源。
更灵活地操作内存，控制数据布局。

掌握这些“内存魔法师”，你就能解锁 JavaScript 的性能潜力，构建更高效、更强大的应用程序！

希望今天的讲座能帮助你更好地理解 JavaScript 中的二进制数据处理。记住，不要害怕尝试，多动手实践，你就能成为真正的“内存魔法师”！

有什么问题，欢迎随时提问！祝大家编程愉快！

大家好，今天咱们来聊聊 JavaScript 里的“内存魔法师”

1. ArrayBuffer：一块原始的内存蛋糕

2. TypedArray：蛋糕切割师

3. 性能优势：告别字符串拼接的噩梦

4. SharedArrayBuffer：多线程共享的秘密武器

5. DataView：更灵活的内存操作