Question

Performance associated with Arrays and Objects in JavaScript (especially Google V8) would be very interesting to document. I find no comprehensive article on this topic anywhere on the Internet.

I understand that some Objects use classes as their underlying data structure. If there are a lot of properties, it is sometimes treated as a hash table?

I also understand that Arrays are sometimes treated like C++ Arrays (i.e. fast random indexing, slow deletion and resizing). And, other times, they are treated more like Objects (fast indexing, fast insertion/removal, more memory). And, maybe sometimes they are stored as linked lists (i.e. slow random indexing, fast removal/insertion at the beginning/end)

What is the precise performance of Array/Object retrievals and manipulations in JavaScript? (specifically for Google V8)

More specifically, what it the performance impact of:

• Adding a property to an Object
• Removing a property from an Object
• Indexing a property in an Object
• Adding an item to an Array
• Removing an item from an Array
• Indexing an item in an Array
• Calling Array.pop()
• Calling Array.push()
• Calling Array.shift()
• Calling Array.unshift()
• Calling Array.slice()

Any articles or links for more details would be appreciated, as well. 🙂

EDIT: I am really wondering how JavaScript arrays and objects work under the hood. Also, in what context does the V8 engine “know” to “switch-over” to another data structure?

For example, suppose I create an array with…

var arr = [];
arr[10000000] = 20;
arr.push(21);

What’s really going on here?

Or… what about this…???

var arr = [];
//Add lots of items
for(var i = 0; i < 1000000; i++)
    arr[i] = Math.random();
//Now I use it like a queue...
for(var i = 0; i < arr.length; i++)
{
    var item = arr[i].shift();
    //Do something with item...
}

For conventional arrays, the performance would be terrible; whereas, if a LinkedList was used… not so bad.

Answer 1

I created a test suite, precisely to explore these issues (and more) (archived copy).

And in that sense, you can see the performance issues in this 50+ test case tester (it will take a long time).

Also as its name suggest, it explores the usage of using the native linked list nature of the DOM structure.

(Currently down, rebuilt in progress) More details on my blog regarding this.

The summary is as followed

• V8 Array is Fast, VERY FAST
• Array push / pop / shift is ~approx 20x+ faster than any object equivalent.
• Surprisingly Array.shift() is fast ~approx 6x slower than an array pop, but is ~approx 100x faster than an object attribute deletion.
• Amusingly, Array.push( data ); is faster than Array[nextIndex] = data by almost 20 (dynamic array) to 10 (fixed array) times over.
• Array.unshift(data) is slower as expected, and is ~approx 5x slower than a new property adding.
• Nulling the value array[index] = null is faster than deleting it delete array[index] (undefined) in an array by ~approx 4x++ faster.
• Surprisingly Nulling a value in an object is obj[attr] = null ~approx 2x slower than just deleting the attribute delete obj[attr]
• Unsurprisingly, mid array Array.splice(index,0,data) is slow, very slow.
• Surprisingly, Array.splice(index,1,data) has been optimized (no length change) and is 100x faster than just splice Array.splice(index,0,data)
• unsurprisingly, the divLinkedList is inferior to an array on all sectors, except dll.splice(index,1) removal (Where it broke the test system).
• BIGGEST SURPRISE of it all [as jjrv pointed out], V8 array writes are slightly faster than V8 reads =O

Note: These metrics applies only to large array/objects which v8 does not “entirely optimise out”. There can be very isolated optimised performance cases for array/object size less then an arbitrary size (24?). More details can be seen extensively across several google IO videos.

Note 2: These wonderful performance results are not shared across browsers, especially
*cough* IE. Also the test is huge, hence I yet to fully analyze and evaluate the results : please edit it in =)

Updated Note (dec 2012): Google representatives have videos on youtubes describing the inner workings of chrome itself (like when it switches from a linkedlist array to a fixed array, etc), and how to optimize them. See GDC 2012: From Console to Chrome for more.