HTML5引入的新数组TypedArray介绍

2020-04-22 07:48:24易采站长站整理
unsigned short
Int32Array
432位有符号整数
long
int
Uint32Array
432位无符号整数
unsigned long
unsigned int
Float32Array
432位IEEE浮点数
unrestricted float
float
Float64Array
864位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

Test1:顺序读取速读

复制代码
var timeArray1 = [];
var timeArray2 = [];
function check1(){
var array = new Uint8ClampedArray(5000000);
for(var i = array.length; i–;){
array[i] = Math.floor(Math.random() * 100);
}
var temp;
var time1 = (new Date()).getTime();
for(var i = array.length; i–;){
temp = array[i];
}
var time2 = (new Date()).getTime();
console.log(time2 – time1);
timeArray1.push(time2 – time1);
}
function check2(){
var array2 = new Array(5000000);
for(var i = array2.length; i–;){
array2[i] = Math.floor(Math.random() * 100);