You probably know by now that JavaScript is getting a lot of upgrades at the moment. One of the upgrades that WebGL is bringing along for the ride is JavaScript Typed Arrays.
A JavaScript Typed Array is very quick! It exists as a fixed block of memory that can be accessed with JavaScript, where as a regular JS Array is inherently very slow, being a hash lookup. There are a few different kinds of JS Typed Array like Float32Array, Int8Array, and they are designed to work quickly with binary data for use with WebGL. But you can use them for anything.
Read more about JavaScript Typed Arrays here: JS Typed Arrays on MDC
Note:
A JavaScript Typed Array will only let you store “one type” of variable within it, you can not mix strings and floats. A JavaScript Typed array will not allow you to change the size of the array after instantiation.
Regular vs. Typed
Here are the results of a simple test between a regular JavaScript array, and a Float32Array in Firefox4 Beta1 in milliseconds per operation on an array with a length of 100-million indices. The test was run on Win7 64Bit, 4GB Ram, Dual-Core 1.30Ghz Intel U7300. I ran this test about 8 times and used the lowest numbers for each, so it should probably be noted that the Regular JS Array Write test frequently goes above 10 seconds and causes the slow-script dialog.
| Operation | Regular Array | Float32Array |
|---|---|---|
| Write | 8947 | 1455 |
| Read | 1948 | 1109 |
| Loop-Copy | > 10,000 ms | 1969 |
| Slice-Copy | 1125 | 503 |
The Scripts
These are the two scripts I ran to get the results above. You can run these tests on your browser now by clicking here: 1) JavaScript Typed Array Test, 2) Regular JavaScript Array Test. (You will need more than 2Gb of ram to test these.)
// Float32Array var ary32 = new Float32Array(100000000); var start = +new Date(); for(var i=0, l=ary32.length; i < l; i++){ ary32[i] = 0.1234567890123456; } alert( "Write: " + ( + new Date() - start ) ); // 1455ms var val = 0; var start = +new Date(); for(var i=0, l=ary32.length; i < l; i++){ val = ary32[i]; } alert( "Read: " + ( +new Date() - start ) ); // 1109ms var start = +new Date(); var ary32Copy = new Float32Array(ary32.length); for(var i=0, l=ary32.length; i < l; i++){ ary32Copy[i] = ary32[i]; } alert( "Loop Copy: " + ( + new Date() - start ) ); // 1969ms var start = +new Date(); var ary32SliceCopy = new Float32Array(ary32.slice(0, ary32.length)); alert( "Slice Copy: " + ( + new Date() - start ) ); // 503ms
// Regular JavaScript Array var ary = new Array(100000000); var start = +new Date(); for(var i=0, l=ary.length; i < l; i++){ ary[i] = 0.1234567890123456; } alert( "Write: " + ( + new Date() - start ) ); // 8947 var val = 0; var start = +new Date(); for(var i=0, l=ary.length; i < l; i++){ val = ary[i]; } alert( "Read: " + ( +new Date() - start ) ); // 1948 var start = +new Date(); var aryCopy = new Array(ary.length); for(var i=0, l=ary.length; i < l; i++){ aryCopy[i] = ary[i]; } alert( "Loop Copy: " + ( + new Date() - start ) ); // SCRIPT STOPS WITHOUT ERROR MESSAGE!! var start = +new Date(); var arySliceCopy = new Array(ary.slice(0, ary.length)); alert( "Slice Copy: " + ( + new Date() - start ) ); //1125
4 Comments
I don’t understand why Mozilla says “follow the standard” and why you don’t follow the ECMAScript spec. How can we use something that is only in Firefox (or in IE, or in WebKit). I’m feeling like I was back in 1998 when I were writing 2 versions of code : one for Netscape, one for IE.
@FPiat:
typed array is supposed to be a standard: https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.html
and Float32Array will exist in all the navigator, not just firefox
@FPiat there are many good reasons for Firefox to do it. In the first place, a part of Firefox itself is written in Javascript, XUL and CSS, by giving themselves this kind of array they can build a faster Firefox interface. Also, many extension authors can leverage this performance benefit. And finally, the W3C is slow on things, some browsers often starting doing things for themselves and sometimes this becomes a standard later. .innerHTML for example was IE only for some time, then every browser implemented it and years later it became a standard.
Somewhat confused by your response; you said:
“I don’t understand why ***> Mozilla < *** says 'follow the standard' and why ***> you <*** don’t follow the ECMAScript spec.’
When you say “you” it sounds like you are saying that I am not following ECMAScript spec, when all I am doing is using functions that are available to JavaScript in the Beta version of a web-browser (Firefox4). I have nothing to do with any specs or implementations, I am not a Mozilla developer. I just think it’s awesome that I can write faster code.
Perhaps you meant to say:
‘I don’t understand why Mozilla says “follow the standard” and why *Mozilla* don’t follow the ECMAScript spec.’ ???
..in which case…
Perhaps it would be pedagogical for you to outline the sections of the ECMAScript you believe are being ignored by Mozilla?
One Trackback
[...] MacDonald recently posted http://weblog.bocoup.com/javascript-typed-arrays – which is an interesting look at the benchmarkable speed differences between FireFox [...]