JavaScript Typed Arrays

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.

OperationRegular ArrayFloat32Array
Write89471455
Read19481109
Loop-Copy> 10,000 ms1969
Slice-Copy1125503

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

Comments

We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

  1. @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.

  2. Somewhat confused by your response; you said:

    \”I don\u2019t understand why ***> Mozilla <*** says ‘follow the standard’ and why ***> you <*** don\u2019t 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\u2019t understand why Mozilla says \u201cfollow the standard\u201d and why *Mozilla* don\u2019t 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?

Contact Us

We'd love to hear from you. Get in touch!

Mail

P.O. Box 961436
Boston, MA 02196