在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:

目前我正在创建一个基于Web的(= JavaScript)应用程序,它使用了很多“点”(=小的,固定大小的向量)。基本上有两种表现方式:

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)

从程序员的角度来看,这两者都很容易处理(对象变体更具可读性,特别是因为我主要处理2D数据,很少使用3D而很难使用4D - 但是从来没有更多。它总是适合x,y,z和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...

我的目标浏览器是FireFox和基于Webkit的浏览器(Chromium,Safari),但在IE和Opera下获得很好的(=快速)体验并没有什么坏处......

3 个解决方案

#1

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] 在JavaScript中处理点/小向量的最有效方法是什么？

数组的创建速度更快,但如果你考虑访问时间,那就相反了。另请注意,构造函数表单可以快速创建和访问。它在现代实现中具有最好的两个单词new Vector(x,y) - [Test]

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

浏览器测试:Chrome 10,Firefox 3.6,Firefox Beta 4.0b9,IE 9 Preview 7,Opera 11

#2

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

我的预感是Arrays会给你更好的表现。(!)

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.

也就是说,在Array示例中,代码的可读性已经远远低于Object示例中的可读性。收益可能很小,所以我建议你做一些基本的基准测试和背面的数学计算,以便在权衡中加上实数。

For starters, you could

首先,你可以

Start a timer

启动计时器

Construct 1 thousand random [X,Y] Arrays

构造1千个随机[X,Y]数组

Access their fields 1 million times.

访问他们的领域100万次。

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

(!) - 为什么基准测试如此有用的一个很好的例子:数组确实更适合创建,但是对象更适合访问,这可能非常重要(取决于您的需要)。 galambalazs为这个案例写了一个很好的测试:http://jsperf.com/object-vs-array

#3

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

感谢所有的答案和输入。非常有趣的是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'])

数组应该按数字而不是字符串索引(arr [0] vs. arr ['0'])

Performance between the Object and the Array form differs mostly by implementation not by type.

Object和Array表单之间的性能主要不同于实现而不是类型。

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.

在Chromium上,Arrays将使用Object的一半内存 - 但我们谈论的是40 MB和80 MB的100万个实例 - 每个40到80个字节。

The memory consumption of other JavaScript implementations is not known - but it'll most probably also differ as much as the performance.

其他JavaScript实现的内存消耗尚不清楚 - 但它很可能也与性能差异很大。

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.

如果它主要用于存储数据并且工作量很小(比如我当前的项目),那么Object方式就是最佳选择。 mouse.x和mouse.y简单地显示了开发人员的意图。

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.

在大多数面向数学的应用程序中,使用矢量数学(如坐标变换(尤其是3D)),最好的方法是数组情况,因为像矩阵乘法这样的东西对开发人员来说看起来更原生,并显示他的意图。

#1