Introduction to the new array TypedArray introduced by HTML5

Comments: Arrays in Javascript are powerful guys: You can dynamically change the length without specifying the length when creating it. You can read it as a normal array or use it as a stack. You can change the value or even type of each element in the array.

Arrays in Javascript are powerful.:

You can dynamically change the length instead of specifying the length during creation. You can read it as a normal array or use it as a stack. You can change the value or type of each element in the array.

Well, it is actually an object. For example, we can create an array like this:

The Code is as follows:
Var array = new Array (10 );

The powerful and omnipotent array of Javascript brings us convenience. But in general:

All-powerful things can be used in various environments, but they are not necessarily applicable to various environments.

TypedArray is designed to solve the problem of "too many tasks" in arrays in Javascript.

Origin

TypedArray is a common fixed-length buffer type that allows reading binary data in the buffer.

It is introduced in the WEBGL specification to solve the problem of Javascript processing binary data.

TypedArray has been supported by most modern browsers. For example, you can use the following method to create TypedArray:

The Code is as follows:
// Create an 8-byte ArrayBuffer
Var B = new ArrayBuffer (8 );
// Create a reference for B. The type is Int32. The starting position is 0 and the ending position is the end of the buffer.
Var v1 = new Int32Array (B );
// Create a reference for B. The type is Uint8, the starting position is 2, and the ending position is the end of the buffer.
Var v2 = new Uint8Array (B, 2 );
// Create a reference for B. The type is Int16, the starting position is 2, and the total length is 2.
Var v3 = new Int16Array (B, 2, 2 );

The buffer and reference layout are as follows:

Variable	Index
	Bytes
B =	0	1	2	3	4	5	6	7
	Number of Indexes
V1 =	0				1
V2 =			0	1	2	3	4	5
V3 =			0		1

This indicates that the 0th elements of the v1 array of the Int32 type are the 0-3 bytes of the B of the ArrayBuffer type.

Constructor

We used ArrayBuffer to create TypedArray. In fact, TypedArray provides three constructors to create its instances.

Constructor
The Code is as follows:
TypedArray (unsigned long length)
Create a new TypedArray with a fixed length.


The Code is as follows:
TypedArray (TypedArray array)
TypedArray (type [] array)
Create a new TypedArray. Each element is initialized according to the array, and the elements undergo corresponding type conversion.


The Code is as follows:
TypedArray (ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length)
Create a new TypedArray as a buffer reference. byteOffset is the starting offset and length is the length.

Therefore, we usually use the following method to create TypedArray:

The Code is as follows:
Var array = new Uint8Array (10 );

Or:

The Code is as follows:
Var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
 
Data Operations

TypedArray provides the setter, getter, set, and subarray methods for data operations.

Method getter TypeGet (unsigned long index)

Returns the element of the specified index.

Setter void set (unsigned long index, TypeValue)

Set the element of the specified index to the specified value.

Void Set( TypedArrayArray, optional unsigned long offset) void Set( Type[] Array, optional unsigned long offset)

Set the offset Value Based on array.

TypedArray  Subarray(Long begin, optional long end)

A new TypedArray is returned. The start bit is begin and the last bit is end.

For example, you can use:

Var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alert (array [4]); // 5

The setting element can be used:

Var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); alert (array [4]); // 5 array [4] = 12; alert (array [4]); // 12

You can use:

Var array = new Uint8Array ([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); var array2 = array. subarray (0 ); Array type

Type	Size	Description	Web IDL type	C type
Int8Array	1	8-bit signed integer	byte	signed char
Uint8Array	1	8-bit unsigned integer	octet	unsigned char
Uint8ClampedArray	1	8-bit unsigned integer (clamped)	octet	unsigned char
Int16Array	2	16-bit signed integer	short	short
Uint16Array	2	16-bit unsigned integer	unsigned short	unsigned short
Int32Array	4	32-bit signed integer	long	int
Uint32Array	4	32-bit unsigned integer	unsigned long	unsigned int
Float32Array	4	32-bit IEEE floating point number	unrestricted float	float
Float64Array	8	64-bit IEEE floating point number	unrestricted double	double

You may find yourself familiar with canvas.

The array used to store image data in ImageData is of the Uint8ClampedArray type.

For example:

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

It is shown in FireBug:

Uint8ClampedArray {0 = 0, 1 = 0, 2 = 0, more ...}

Why TypedArray?

We know that the number in Javascript is a 64-bit floating point number. For a binary image (each pixel in the image is stored in an 8-bit unsigned integer), if you want to use the data in the Javascript array, it is equivalent to using 8 times the memory of the image to store the data of an image, which is obviously unscientific. TypedArray helps us store image data with only 1/8 of the original memory.

Or for WebSocket, if base64 is used for transmission, it is also a high-cost method. Instead, binary transmission may be better.

Of course, TypedArray has more benefits, such as better performance. Next we will perform some small tests to verify this.

The browser involved in the test is:

FireFox 17.0.1 and Chrome 23.0.20.1.97m

Test1: sequential read Speed

The Code is as follows:
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 );
}
Var temp;
Var time3 = (new Date (). getTime ();
For (var I = array2.length; I --;){
Temp = array2 [I];
}
Var time4 = (new Date (). getTime ();
Console. log (time4-time3 );
TimeArray2.push (time4-time3 );
}
Function timer (_ fun, _ time, _ callback ){
Var now = 0;
Function begin (){
Var timeout = setTimeout (function (){
If (now! ==__ Time ){
Now ++;
_ Fun ();
Begin ();
} Else {
If (timeArray1.length & timeArray2.length ){
Console. log ("timeArray1 =" + timeArray1 + ", average =" + average (timeArray1 ));
Console. log ("timeArray2 =" + timeArray2 + ", average =" + average (timeArray2 ));
}
_ Callback & _ callback ();
}
},100 );
}
Begin ();
}
Function average (_ array ){
Var total = 0;
For (var I = _ array. length; I --;){
Total + = _ array [I];
}
Return (total/_ array. length );
}
Timer (check1, 10, function (){
Timer (check2, 10 );
});

It can be seen that the read Speed of Uint8ClampedArray is significantly faster than that of Array (the longer the bar, the more time it takes ).

Test2: random read

The Code is as follows:
//......
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 [Math. floor (Math. random () * 5000000)];
}
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 );
}
Var temp;
Var time3 = (new Date (). getTime ();
For (var I = array2.length; I --;){
Temp = array2 [Math. floor (Math. random () * 5000000)];
}
Var time4 = (new Date (). getTime ();
Console. log (time4-time3 );
TimeArray2.push (time4-time3 );
}
//......

The Uint8ClampedArray read speed is faster than that of Array.

Test3: sequential write

The Code is as follows:
//......
Function check1 (){
Var array = new Uint8ClampedArray (5000000 );
Var time1 = (new Date (). getTime ();
For (var I = array. length; I --;){
Array [I] = Math. floor (Math. random () * 100 );
}
Var time2 = (new Date (). getTime ();
Console. log (time2-time1 );
TimeArray1.push (time2-time1 );
}
Function check2 (){
Var array2 = new Array (5000000 );
Var time3 = (new Date (). getTime ();
For (var I = array2.length; I --;){
Array2 [I] = Math. floor (Math. random () * 100 );
}
Var time4 = (new Date (). getTime ();
Console. log (time4-time3 );
TimeArray2.push (time4-time3 );
}
//......

Test4: copy operation (U8C to U8C and Array to U8C)

The Code is as follows:
//......
Function check1 (){
Var array = new Uint8ClampedArray (5000000 );
For (var I = array. length; I --;){
Array [I] = Math. floor (Math. random () * 100 );
}
Var temp;
Var array2 = new Uint8ClampedArray (5000000 );
Var time1 = (new Date (). getTime ();
Array2.set (array );
Var time2 = (new Date (). getTime ();
Console. log (time2-time1 );
TimeArray2.push (time2-time1 );
}
Function check2 (){
Var array = new Array (5000000 );
For (var I = array. length; I --;){
Array [I] = Math. floor (Math. random () * 100 );
}
Var temp;
Var array2 = new Uint8ClampedArray (5000000 );
Var time1 = (new Date (). getTime ();
Array2.set (array );
Var time2 = (new Date (). getTime ();
Console. log (time2-time1 );
TimeArray2.push (time2-time1 );
}
//......

It can be seen that copying U8C to U8C is much faster than copying Array to U8C.