[英]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). 目前我正在创建一个基于Web的(= JavaScript)应用程序,它使用了很多“点”(=小的,固定大小的向量)。 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) 从程序员的角度来看,这两者都很容易处理(对象变体更具可读性,特别是因为我主要处理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下获得一个很棒的(快速)体验并不会有什么坏处......
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 ] 它在现代实现中具有最好的两个单词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
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. 也就是说,在您的Array示例中,代码的可读性明显低于Object示例中的可读性。 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 对于初学者,你可以
Arrays
构造1千个随机[X,Y] Arrays
Objects
and compare. 重复Objects
并进行比较。 (!) - 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
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: 综合各方面,我们将得到:
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. 如果它主要用于存储数据并且工作量很小(比如我当前的项目),那么Object方式就是最佳选择。 An mouse.x
and mouse.y
trivially shows the developer intend. 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)),最好的方法是数组情况,因为像矩阵乘法这样的东西对开发人员来说看起来更原生,并显示他的意图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.