When to use Float32Array instead of Array in JavaScript
JavascriptArraysJavascript Problem Overview
When does it make sense to use a Float32Array
instead of a standard JavaScript Array
for browser applications?
This performance test shows Float32Array
to be, in general, slower - and if I understand correctly a standard Array
stores numbers as 64bit - so there is no advantage in precision.
Aside from any possible performance hit, Float32Array
also has the disadvantage of readability - having to use a constructor:
a = new Float32Array(2);
a[0] = 3.5;
a[1] = 4.5;
instead an array literal
a = [3.5, 4.5];
I'm asking this because I'm using the library glMatrix which defaults to Float32Array
- and wondering if there's any reason I shouldn't force it to use Array
instead which will allow me to use array literals.
Javascript Solutions
Solution 1 - Javascript
I emailed the developer of glMatrix
and my answer below includes his comments (points 2 & 3):
-
Creating a new object is generally quicker with
Array
thanFloat32Array
. The gain is significant for small arrays, but is less (environment dependent) with larger arrays. -
Accessing data from a
TypedArray
(eg.Float32Array
) is often faster than from a normal array, which means that most array operations (aside from creating a new object) are faster with TypedArrays. -
As also stated by @emidander,
glMatrix
was developed primarily for WebGL, which requires that vectors and matrices be passed asFloat32Array
. So, for a WebGL application, the potentially costly conversion fromArray
toFloat32Array
would need to be included in any performance measurement.
So, not surprisingly, the best choice is application dependent:
-
If arrays are generally small, and/or number of operations on them is low so that the constructor time is a significant proportion of the array's lifespan, use
Array
. -
If code readability is as important as performance, then use
Array
(i.e. use[]
, instead of a constructor). -
If arrays are very large and/or are used for many operations, then use a TypedArray.
-
For WebGL applications (or other applications that would otherwise require a type conversion), use
Float32Array
(or otherTypedArray
).
Solution 2 - Javascript
I would assume that the glMatrix library uses Float32Array because it is primarily used in WebGL-applications, where matrices are represented as Float32Arrays (http://www.khronos.org/registry/webgl/specs/1.0/#5.14.10).
Solution 3 - Javascript
In today browsers implementation, using Float32Array has impact in both writibility and performance if compared against vanilla Arrays. It seems that even gl-matrix authors agreed that the library need to be refactored to remove Float32Array dependency: https://github.com/toji/gl-matrix/issues/359