什么是类型化数组和ArrayBuffer，以及它们在高性能图形或音频处理中的应用原理是什么？-js教程-PHP中文网

类型化数组和ArrayBuffer通过提供对二进制数据的直接、高效访问，解决了传统JavaScript数组在处理大量数据时因对象开销和动态特性导致的性能瓶颈。ArrayBuffer作为原始内存缓冲区，存储未格式化的字节数据，而类型化数组（如Int32Array、Float32Array）则以特定数据类型视图的形式解释这些字节，实现对同一块内存的不同读写方式。这种机制支持内存连续存储、避免频繁垃圾回收，并能高效传递给WebGL或Web Audio API等底层API。在WebGL中，顶点数据通过Float32Array组织并上传至GPU，利用stride和offset精确配置属性布局，提升图形渲染效率；在Web Audio API中，音频采样数据以Float32Array形式存储于AudioBuffer中，支持实时数学运算与低开销处理，确保高性能音频合成与分析。两者共同为Web端的高性能计算提供了基础支撑。

什么是类型化数组和arraybuffer，以及它们在高性能图形或音频处理中的应用原理是什么？

类型化数组（Typed Arrays）和ArrayBuffer是JavaScript中处理二进制数据的基础构件。简单来说，ArrayBuffer就像一块未经格式化的内存区域，它只是一堆原始的字节。而类型化数组，则像是给这块内存区域戴上了一副“眼镜”，让我们能以特定的数据类型（比如32位浮点数、8位整数等）去解读和操作这块内存里的数据。它们在高性能图形或音频处理中的应用原理，核心就在于提供了对底层二进制数据的直接、高效访问和操作能力，绕开了JavaScript传统数组的对象开销和动态特性，从而极大地提升了处理大量数据的性能。

解决方案

在我看来，要真正理解类型化数组和ArrayBuffer的价值，得从它们解决的问题说起。传统的JavaScript数组，虽然灵活，但每个元素都可能是一个独立的JavaScript对象，这在内存管理和访问速度上都有不小的开销。当你需要处理成千上万个像素点数据、音频采样数据或者三维模型的顶点数据时，这种开销就变得无法承受了。

ArrayBuffer的出现，首先提供了一个固定大小的、原始的二进制数据缓冲区。它本身不包含任何类型信息，你不能直接操作它里面的字节。它更像是一个“黑盒子”，里面装满了未经解释的二进制位。

类型化数组则扮演了“解释器”的角色。比如，Int32Array 会把ArrayBuffer中的每四个字节解释成一个32位有符号整数，而 Float32Array 则会将其解释为32位浮点数。这种“视图”机制非常巧妙，它允许不同的类型化数组视图共享同一个ArrayBuffer，这意味着你可以用不同的方式去解读同一份原始数据，而无需复制数据。

在高性能图形（如WebGL）和音频处理（如Web Audio API）中，这种直接操作二进制数据的能力是至关重要的。图形渲染需要将大量的顶点坐标、颜色、纹理坐标等数据快速传输给GPU；音频处理则需要实时地读取、修改和写入大量的音频采样数据。类型化数组和ArrayBuffer正是为此而生。它们确保数据以紧凑、连续的内存形式存在，减少了JavaScript引擎的内存分配和垃圾回收压力，并且能够被高效地传递给底层的C/C++实现（比如浏览器内部的图形或音频引擎），甚至直接与WebAssembly模块交互，实现近乎原生的性能。

为什么传统JavaScript数组在处理大量二进制数据时效率低下？

这个问题其实挺有意思的，它触及了JavaScript语言设计的一些底层考量。你可能会觉得，不就是存一堆数字嘛，JS数组不是挺好用的吗？但实际情况是，JavaScript数组远比你想象的要复杂。

首先，JavaScript数组是“异构”的。这意味着你可以在同一个数组里放数字、字符串、对象，甚至函数。这种灵活性是以牺牲性能为代价的。为了支持这种异构性，JavaScript引擎在内部通常会将数组元素作为独立的JavaScript值（通常是对象指针）来存储。这就导致了两个问题：一是内存不连续，每个元素可能散落在内存的不同位置，导致CPU缓存命中率低；二是每个元素都有额外的元数据开销，比如类型信息、引用计数等。

其次，JavaScript数组是动态的。你可以随时增加或删除元素，这在底层意味着数组可能需要频繁地重新分配内存。如果数组容量不够，引擎可能需要申请一块更大的内存空间，然后将所有旧数据复制过去，再释放旧内存。这个过程在处理大量数据时，会产生显著的性能损耗，并可能导致垃圾回收器频繁工作，造成卡顿。

最后，当这些数据需要传递给像WebGL这样的底层API时，如果它们存储在传统的JavaScript数组中，浏览器引擎还需要进行额外的“打包”或“转换”操作，将这些JavaScript对象转换成底层的C/C++结构体或原始数据类型，才能被GPU理解。这个转换过程本身就是一种开销。

相比之下，类型化数组提供的是一个“纯粹”的数字数组，它们是固定大小、同质的，并且在内存中是连续存储的。这种设计使得它们能够直接映射到底层的二进制数据结构，从而避免了上述所有性能陷阱。

WebGL如何利用ArrayBuffer和Typed Arrays进行图形渲染？

在WebGL的世界里，ArrayBuffer和类型化数组简直是核心中的核心。没有它们，高性能的3D图形渲染几乎是不可想象的。

想象一下你要渲染一个复杂的3D模型，它由成千上万个顶点构成。每个顶点可能包含位置（x, y, z）、颜色（r, g, b, a）、法线（nx, ny, nz）和纹理坐标（u, v）等信息。这些数据量非常庞大。

WebGL的工作流程大致是这样的：

数据准备： 你首先会将这些顶点数据组织成一个大的扁平化数组。例如，如果每个顶点有3个位置分量和3个颜色分量，那么一个顶点就是6个浮点数。这些浮点数会存储在一个 Float32Array 中。这个 Float32Array 实际上是 ArrayBuffer 的一个视图。

阿里云-虚拟数字人
阿里云-虚拟数字人是什么？ ...

2

查看详情
```
// 假设有三个顶点，每个顶点有位置(x,y,z)和颜色(r,g,b)
const vertices = new Float32Array([
    // 第一个顶点
    0.0, 0.5, 0.0,    1.0, 0.0, 0.0, // 位置, 颜色
    // 第二个顶点
    -0.5, -0.5, 0.0,  0.0, 1.0, 0.0,
    // 第三个顶点
    0.5, -0.5, 0.0,   0.0, 0.0, 1.0
]);
```
登录后复制
创建缓冲区对象： 接下来，你需要创建一个WebGL缓冲区对象（gl.Buffer）。这就像在GPU的内存中预留一块空间。
```
const vertexBuffer = gl.createBuffer();
```
登录后复制
绑定和上传数据： 然后，你将这个缓冲区对象绑定到WebGL的 ARRAY_BUFFER 目标上，并将你的 Float32Array 数据上传到GPU。
```
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
```
登录后复制
这里 gl.bufferData 方法直接接收 Float32Array 作为参数，它会高效地将类型化数组中的二进制数据传输到GPU。gl.STATIC_DRAW 提示WebGL这些数据不会经常改变。

顶点属性配置： 最后，你告诉WebGL如何从这个缓冲区中解析出顶点的位置、颜色等属性。例如，位置信息是每6个浮点数中的前3个，颜色信息是接下来的3个。

// 假设你的着色器里有a_position和a_color两个属性
const positionLocation = gl.getAttribLocation(program, 'a_position');
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(positionLocation);

const colorLocation = gl.getAttribLocation(program, 'a_color');
gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 6 * Float32Array.BYTES_PER_ELEMENT, 3 * Float32Array.BYTES_PER_ELEMENT);
gl.enableVertexAttribArray(colorLocation);

登录后复制

这里的 vertexAttribPointer 方法的参数，特别是 stride（步长）和 offset（偏移量），都是基于类型化数组的字节长度来计算的。

通过这种方式，WebGL能够直接、批量地处理这些二进制数据，而无需JavaScript引擎在每次访问时都进行类型检查和对象解引用。这大大减少了CPU和GPU之间的数据传输开销，并且使得GPU能够以其擅长的方式（并行处理）高效地渲染图形。

Web Audio API中Typed Arrays如何提升音频处理性能？

Web Audio API是一个非常强大的Web标准，它允许你在浏览器中进行复杂的音频处理，比如合成、混音、滤波、特效等。在这里，类型化数组同样扮演着不可或缺的角色，尤其是在处理原始音频采样数据时。

音频数据通常以一系列采样点的形式存在，每个采样点代表了某一时刻的声波振幅。这些采样点可以是16位整数（PCM）或者32位浮点数。在Web Audio API中，最常见的处理方式是使用32位浮点数来表示音频采样，范围通常在-1.0到1.0之间。

当你通过 AudioContext 创建一个 AudioBuffer（例如，从一个音频文件解码得到，或者自己生成）时，这个 AudioBuffer 内部就是由一个或多个 Float32Array 来存储每个声道的音频采样数据的。

例如，如果你想创建一个持续一秒、采样率为44100Hz的单声道音频缓冲区，你会这样做：

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const sampleRate = 44100; // 采样率
const duration = 1;       // 1秒
const numberOfChannels = 1; // 单声道

const audioBuffer = audioCtx.createBuffer(numberOfChannels, sampleRate * duration, sampleRate);

// 获取第一个声道的Float32Array数据
const channelData = audioBuffer.getChannelData(0);

// 现在你可以直接操作这个Float32Array来生成或修改音频采样数据
// 例如，生成一个简单的正弦波
for (let i = 0; i < channelData.length; i++) {
    const time = i / sampleRate;
    channelData[i] = Math.sin(2 * Math.PI * 440 * time); // 440Hz正弦波
}

// 接下来，你可以将这个audioBuffer连接到AudioContext的输出，或者进行其他处理
// ...

登录后复制

这里的 channelData 就是一个 Float32Array。你可以直接对它进行数学运算，比如加减乘除、应用滤波器算法等，而这些操作都是在高效的类型化数组上进行的。

性能提升的原理在于：

直接内存访问： Float32Array 提供了对连续内存区域的直接访问，避免了JavaScript对象封装带来的开销。这意味着当你遍历 channelData 数组时，CPU可以非常高效地读取和写入数据，因为数据是紧密排列的，有利于缓存命中。
减少垃圾回收： 一旦 AudioBuffer 被创建，其内部的 Float32Array 的大小就是固定的。在音频处理过程中，你通常是修改这些数组中的值，而不是频繁地创建新的数组或调整数组大小，这大大减少了垃圾回收的压力。
与底层C++的无缝衔接： 浏览器内部的Web Audio引擎通常是用C++实现的。Float32Array 的数据结构可以直接映射到C++的浮点数数组，从而避免了数据转换的开销，使得数据可以高效地在JavaScript层和底层C++实现之间传递。