Well, it is actually an object, for example, we can create an array like this:
var array = new Array(10);
The power and omnipotence of Javascript arrays bring us convenience. But generally speaking:
All-round things can be used in various environments, but they are not necessarily suitable for various environments.
TypedArray is precisely what happened to solve the problem that arrays do too many things in Javascript.
originTypedArray is a common fixed-length buffer type that allows reading of 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 create TypedArray using the following method:
// Create an 8-byte ArrayBuffer
var b = new ArrayBuffer(8);
// Create a reference of b, type Int32, the starting position is 0, and the end position is the end of the buffer
var v1 = new Int32Array(b);
// Create a reference of b, the type is Uint8, the starting position is 2, and the end position is the end of the buffer
var v2 = new Uint8Array(b, 2);
// Create a reference of b, type Int16, the starting position is 2, and the total length is 2
var v3 = new Int16Array(b, 2, 2);
The buffered and created reference layout is:
| variable | index | |||||||
|---|---|---|---|---|---|---|---|---|
| Number of 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 means that the 0th element of the v1 array of type Int32 is the 0-3 bytes of type ArrayBuffer, and so on.
ConstructorAbove we create TypedArray through ArrayBuffer, and in fact, TypedArray provides 3 constructors to create its instance.
TypedArray(unsigned long length)
Create a new TypedArray with length being its fixed length.
TypedArray(TypedArray array)
TypedArray(type[] array)
Create a new TypedArray, each element is initialized according to the array, and the element is converted accordingly.
TypedArray(ArrayBuffer buffer, optional unsigned long byteOffset, optional unsigned long length)
Create a new TypedArray as a reference to the buffer, byteOffset as its starting offset and length as its length.
So we usually create TypedArray in the following way:
var array = new Uint8Array(10);
or:
var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
Data operationTypedArray provides four methods: setter, getter, set and subarray for data operations.
Returns the element of the specified index.
setter void set(unsigned long index, type value)Sets the element of the specified index to the specified value.
void set ( TypedArray array, optional unsigned long offset)void set ( type [] array, optional unsigned long offset)Set the value according to the array, offset is the offset position.
TypedArray subarray (long begin, optional long end)Returns a new TypedArray with the start bit begin and the end bit end.
For example, reading elements can be used : var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);alert(array[4]); //5 Setting elements can be used : var array = new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);alert(array[4]); //5array[4] = 12;alert(array[4]); //12 Get a copy and 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 | describe | Web IDL Type | Type C |
|---|---|---|---|---|
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 |
Those who have played canvas may feel familiar.
Because the array used in ImageData to store image data is of type Uint8ClampedArray.
For example:
var context = document.createElement(canvas).getContext(2d);var imageData = context.createImageData(100, 100);console.log(imageData.data); It is displayed in FireBug as :Why use TypedArrayUint8ClampedArray { 0=0, 1=0, 2=0, more...}
We know that numbers in Javascript are 64-bit floating point numbers. For a binary image (each pixel is stored as an 8-bit unsigned integer), if you want to use its data in a Javascript array, it is equivalent to using 8 times the memory of the image to store the data of a picture, which is obviously unscientific. TypedArray can help us only use 1/8 of the original memory to store image data.
Or for WebSocket, it is also a more expensive way to transfer with base64, and switching to binary transfer may be a better way.
Of course, TypedArray has more benefits, such as having better performance. Let's do some small tests to verify this.
The browsers participating in the test are :Test1: Sequential reading speed readingFireFox 17.0.1 and Chrome 23.0.1271.97m
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 reading speed of Uint8ClampedArray is significantly faster than that of Array (the longer the bar, the more time it takes).
Test2: Random read//…
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 reads faster than Array.
Test3: Sequential writing//…
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)//…
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 U8C copying to U8C is much faster than Array copying to U8C.