HTML5引入的新数组TypedArray介绍

2019-01-28 19:55:16于海丽
signed char Uint8Array 1 8位无符号整数 octet unsigned char Uint8ClampedArray 1 8位无符号整数 (clamped) octet unsigned char Int16Array 2 16位有符号整数 short short Uint16Array 2 16位无符号整数 unsigned short unsigned short Int32Array 4 32位有符号整数 long int Uint32Array 4 32位无符号整数 unsigned long unsigned int Float32Array 4 32位IEEE浮点数 unrestricted float float Float64Array 8 64位IEEE浮点数 unrestricted double double
玩过canvas的可能会觉得很眼熟。

因为ImageData中用于存储图像数据的数组便是Uint8ClampedArray类型的。

例如:

var context = document.createElement("canvas").getContext("2d");var imageData = context.createImageData(100, 100);console.log(imageData.data);

其在FireBug中显示为:

Uint8ClampedArray { 0=0, 1=0, 2=0, 更多...}

为什么要用TypedArray

我们知道Javascript中数字是64位浮点数。则对于一个二进制图片(图片每个像素点是以8位无符号整数存储的),如果要将其数据在Javascript数组中使用,相当于使用了图片8倍的内存来存储一个图片的数据,这显然是不科学的。而TypedArray能帮助我们只使用原来1/8的内存来存储图片数据。

或者对于WebSocket,如果用base64进行传输也是一个花费较高的方式,转而使用二进制传送可能是更好的方式。

当然,TypedArray还有更多好处,比如具有更好的性能,下面我们进行一些小测试来验证这一点。

参与测试的浏览器为:

FireFox 17.0.1 和 Chrome 23.0.1271.97m