CODEWITHSUNDEEP
javascriptarraysobjectperformance
Chris
Chris

Reputation: 3405

What is the most efficient way to handle points / small vectors in JavaScript?

Currently I'm creating an web based (= JavaScript) application thata is using a lot of "points" (= small, fixed size vectors). There are basically two obvious ways of representing them:

var pointA = [ xValue, yValue ];

and

var pointB = { x: xValue, y: yValue };

So translating my point a bit would look like:

var pointAtrans = [ pointA[0] + 3, pointA[1] + 4 ];
var pointBtrans = { x: pointB.x + 3, pointB.y + 4 };

Both are easy to handle from a programmer point of view (the object variant is a bit more readable, especially as I'm mostly dealing with 2D data, seldom with 3D and hardly with 4D - but never more. It'll allways fit into x,y,z and w)

But my question is now:
What is the most efficient way from the language perspective - theoretically and in real implementations?
What are the memory requirements?
What are the setup costs of an array vs. an object?
...

My target browsers are FireFox and the Webkit based ones (Chromium, Safari), but it wouldn't hurt to have a great (= fast) experience under IE and Opera as well...

Upvotes: 7

Views: 3707

Answers (3)

gblazex
gblazex

Reputation: 50137

Arrays are faster to create, but if you consider access time it's the other way around. Also note, that constructor form is fast to create and access. It has the best of both words in modern implementations new Vector(x, y) - [Test] alt text

Browsers tested: Chrome 10, Firefox 3.6, Firefox Beta 4.0b9, IE 9 Preview 7, Opera 11

Upvotes: 6

Chris
Chris

Reputation: 3405

Thanks for all the answers and the input. Very interesting were the results of the test written by galamalazs: http://jsperf.com/object-vs-array/2

Taking all aspects together we'll get:

  • Arrays should be indexed by number and not by string (arr[0] vs. arr['0'])
  • Performance between the Object and the Array form differs mostly by implementation not by type.
  • There is no winner, it changes from implementation to implementation
  • Future implementations of the browsers known today might also change who's winning - in either way
  • On Chromium the Arrays will use half the memory of the Object - but we are talking about 40 MB and 80 MB for one million instances - that is 40 to 80 bytes each.
  • The memory consumption of other JavaScript implementations is not known - but it'll most probably also differ as much as the performance.

So in the end both options are sensible and only the code readability will make the decision!

If it's mostly for storing data with trivial work (like in my current project) the Object way is the way to go. An mouse.x and mouse.y trivially shows the developer intend.

In mostly mathematically oriented applications with vector maths like coordinate transformations (especially going to 3D) the best way would be the Array case as things like matrix multiplications would look more native to the developer and show his intent.

Upvotes: 2

Kyle Wild
Kyle Wild

Reputation: 8915

My hunch is that Arrays will give you better performance.(!)

That said, the code is already significantly less readable in your Array example than in your Object example. The gains are likely slight, so I suggest you do some basic benchmarking and back-of-the-napkin math to put a real number on the tradeoff.

For starters, you could

  • Start a timer
  • Construct 1 thousand random [X,Y] Arrays
  • Access their fields 1 million times.
  • Repeat with Objects and compare.

(!) - A good example of why benchmarking is so useful: Arrays are indeed better for creation, but Objects are better for access, which could be very important (depending on your needs). galambalazs has written a great test for this case: http://jsperf.com/object-vs-array

Upvotes: 2

Related Questions