ArrayBuffer + DataView + 定型数组总结

1. 什么是定型数组？

定性数组是js新增的一种数据结构，目的是提升向原生库传输数据的效率。

2. 历史

随着浏览器的越来越强大，人们开始期待浏览器能用来运行复杂的3d应用程序，以充分利用计算机的3d图形API和GPU加速器。于是有了WebGL（Web Graph Library），在早起的WebGL版本中，javascript数组与原生数组不匹配，所以出现了性能问题。这里的不匹配主要是指，js数组的数值默认是双精度浮点格式，但这不是WebGL图形驱动API所需要的，所以在这二者之间传递数组时，需要在WebGL运行环境中分配一个新数组，然后迭代js数组并且进行转化。如果数组长度很长，这将花费很多时间。javascript能不能有一种数组，当把这个数组传递给WebGL时，WebGL能够直接使用呢？答案就是使用定型数组。

3. ArrayBuffer

在将定型数组之间需要知道ArrayBuffer，从字面意义来看，它好像是一种数组缓冲区？答案是，ArrayBuffer是一块预分配内存，其实就是一块内存，这块内存js可以访问，但是不能直接访问，要使用一定的工具，这个工具就是视图。视图包括DataView, Float32Array等等。Float32Array就是定型数组。

const buf = new ArrayBuffer(3)    //通过ArrayBuffer这个js普通的构造函数来创建一个指定字节长度的内存空间。
console.log(buf.byteLength);  //查看这个分配的这块内存空间的字节长度

ArrayBuffer一经创建就不能再调整内存空间的大小，但是可以通过切片来复制全部或者部分到另一个新ArrayBuffer实例。垃圾回收机制能够自动回收被分配的内存，不需要手动释放。

const buf = new ArrayBuffer(16)
console.log(buf.byteLength);

const buf2 = buf.slice(0,8)     //通过切片复制
console.log