HomeSearch

JavaScript Int32Array Examples

Create and update an efficient integer array with the ArrayBuffer and Int32Array types.

Int32Array.

A program needs millions of small integers in an array. With a typed array, we can efficiently store these values. Each element requires its exact number of bytes.

For JavaScript,

the typical array is a high-level type. An ArrayBuffer and a "view" upon it like Int32Array is a low-level array.

Example program.

Let us get started. To use an efficient byte array, we first create an ArrayBuffer. We specify the exact number of bytes (not elements) we want in the constructor.

Then: We create a "view" upon the ArrayBuffer. Here we use an Int32Array to have 4-byte elements in our array.

Assign: We can assign elements to the Int32Array and read them back. In this way it is like any other array.

JavaScript program that uses ArrayBuffer, Int32Array // Create a buffer of 40 bytes. var buffer = new ArrayBuffer(4 * 10); // Use Int32Array on this buffer. var array = new Int32Array(buffer); // Assign elements. for (var i = 0; i < array.length; i++) { array[i] = i; } array[0] = 300; // Read from Int32Array. for (var i = 0; i < array.length; i++) { console.log("INT32ARRAY ELEMENT: " + array[i]); } Output INT32ARRAY ELEMENT: 300 INT32ARRAY ELEMENT: 1 INT32ARRAY ELEMENT: 2 INT32ARRAY ELEMENT: 3 INT32ARRAY ELEMENT: 4 INT32ARRAY ELEMENT: 5 INT32ARRAY ELEMENT: 6 INT32ARRAY ELEMENT: 7 INT32ARRAY ELEMENT: 8 INT32ARRAY ELEMENT: 9

Array literals.

A typed array can be initialized from an array literal. We pass the array directly to the Int32Array constructor. Other constructors like Int8Array also work.

Tip: For performance, it is best to test your program before using Int32Array around array literals. There is a conversion cost here.

And: Sometimes using an array literal directly is faster in browsers. If the array is small, there is little potential benefit.

JavaScript program that uses array literals with typed arrays // Use array literal to create Int32Array. var values = new Int32Array([10, 8000000, 8]); for (var i = 0; i < values.length; i++) { console.log("INT32ARRAY ELEMENT: " + values[i]); } // Use array literal to create Int8Array. var valuesSmall = new Int8Array([0, 20, 1, 0]); for (var i = 0; i < valuesSmall.length; i++) { console.log("INT8ARRAY ELEMENT: " + valuesSmall[i]); } Output INT32ARRAY ELEMENT: 10 INT32ARRAY ELEMENT: 8000000 INT32ARRAY ELEMENT: 8 INT8ARRAY ELEMENT: 0 INT8ARRAY ELEMENT: 20 INT8ARRAY ELEMENT: 1 INT8ARRAY ELEMENT: 0

Memory usage.

Suppose we want to manipulate 10 million integers. With an Int32Array we save memory over an Array. I tested two programs with large arrays.

Program 1: This program uses a 40 million byte ArrayBuffer. It then uses 10 million Int32 values in the array.

Program 2: This program uses a 10 million object array and uses integers in each slot. The programs' memory is measured.

Result: The Int32 array program (1) uses about 7 MB less RAM when measured in Process Explorer on Windows.

JavaScript program that uses 10 million elements, Int32Array // Create buffer of 40 million bytes. var buffer = new ArrayBuffer(40000000); // Use Int32Array. var array = new Int32Array(buffer); // Use array. for (var i = 0; i < array.length; i++) { array[i] = i; } // Test length. document.title = array.length; JavaScript program that uses 10 million elements, Array // Create new array of 10 million elements. var array = new Array(10000000); // Use array. for (var i = 0; i < array.length; i++) { array[i] = i; } // Test length. document.title = array.length; Output 58.3 MB ArrayBuffer, Int32Array 65.3 MB Array

Performance, modify elements.

Suppose you have a JavaScript application that reads and writes ints in a giant array many times. Would ArrayBuffer and Int32Array be faster here?

Program 1: This program creates an Int32Array of 1 million elements and then reads and writes into each element 1000 times.

Program 2: This version uses a normal JavaScript array. The JavaScript runtime (V8) must handle the int types on its own.

Array

Results: We find that there is a small performance advantage to using Int32Array for many reads and writes from an array.

JavaScript program that benchmarks Int32Array var x1 = performance.now(); var size = 1000000; var buffer = new ArrayBuffer(4 * size); var array = new Int32Array(buffer); // Version 1: modify values in Int32Array. for (var z = 0; z < 1000; z++) { for (var i = 0; i < size; i++) { array[i] = array[i] + 2; } } var x2 = performance.now(); document.title = (x2 - x1); JavaScript program that benchmarks Array var x1 = performance.now(); var size = 1000000; var array = new Array(size); // Version 2: modify values in Array. for (var z = 0; z < 1000; z++) { for (var i = 0; i < size; i++) { array[i] = array[i] + 2; } } var x2 = performance.now(); document.title = (x2 - x1); Output 2017.195 ms Int32Array 2081.645 ms Array

Some notes.

Many constructs in JavaScript do not need low-level structures. But for an array with millions of elements, a typed array can make a program use much less memory.

And: With improved locality of reference, it will execute much faster. Each element is more compact.

A review.

With typed arrays, JavaScript begins to support complex mathematical or numerical applications. Many numbers can be used in a program.
Home
Dot Net Perls
© 2007-2019 Sam Allen. All rights reserved. Written by Sam Allen, info@dotnetperls.com.