JavaScript数组性能 [英] Javascript Array Performance
问题描述
我已经检查每一个问题，文章关于这一点，我能找到，但没有真正回答它。我让这听起来好像我只有一个问题，还有更多的人。
I have checked each and every question and article about this, that I could find, but nothing really answers it. I make it sound as if I have just one question, there's more of them.
也许我应该先解释什么，我试图做的，我在JavaScript中完全建立一个文件管理器，文件管理器从后端（PHP，枝）接收的文件，它然后将它们存储在文件夹，每个文件夹的数组有它自己的文件，文件夹是一个数组，而文件中的每个文件夹的同时，这些文件也显示在页面上的一组，并且用户可以选择，复制，剪切，粘贴（等操作），他们（我依然写这些操作，因为这里存在一个问题）。CAD文件页面上有一个分配给他们的数据的id，这样我可以对他们的文件管理器和后端之间轻松操作，而且因为我知道的每一个和每个ID文件，我想我可以完全消除通过文件的阵列中搜索特定文件的穿越，如果我只能创建，将采取一个文件作为索引的ID阵列，因为这是JavaScript的，我能做到这一点！但也有一些问题吧。
Maybe I should first explain what I am trying to do, I am building a File Manager entirely in JavaScript, the File Manager receives files from Backend (PHP, Twig), it then stores them in an array of Folder, each Folder has its own Files, Folders is an Array, and Files in each Folder is an Array as well, these Files are also shown on the page, and the user can select, copy, cut, paste ( other operations ) them ( I am still writing these operations, because here lies the problem ).
Files on page have data-id assigned to them, so that I can easily operate on them between File Manager and the Backend, and because I know the ID of every and each file, I think I could completely eliminate traversing through Arrays of Files in search of a particular File, if I could only create an Array that would take the ID of a File as an Index, and because this is JavaScript, I can do that! but there are some problems with it.
试图使用一个对象完成这个任务是行不通的，因为它只是比阵列（现在，我理解的方式较慢，在速度上的差异，即使在数以百万计，没有那么大，但为什么不尝试挖极致的表现，是吧？）
Trying to use an Object for this task just does not work, because it is just way slower than Array ( now, I understand, that the differences in speed, even if in millions, are not that big, but why not try to dig for ultimate performance, right ? )
因此，这里是一个问题清单，我似乎无法找到一个可靠的答案：
So here is a list of questions, that I cannot seem to find a reliable answer to:
- 为什么在Chrome对象如此之快，比Firefox的对象？
- 为什么访问Chrome上一个未定义的索引这么多慢？
- 为什么阵列在Firefox如此之快，比在Chrome？
- 我知道为什么浏览器失去与更高的指标性能（100K它把数组到一个列表，我想，这是对SO链接到源在另外一个问题回答），但Firefox逐渐失去性能，如果它traveresed较高的指标依次即使直接访问，这是为什么？
- 为什么是Array extermely慢时，只有一个在它的元素，但该元素是在非常高的索引？
有可能是一些其他问题我也有，但现在我不认为他们。
There are probably some more questions I have, but I cannot think of them right now.
最快的配置，我发现，支持ID作为索引以及它们之间的孔，以及在高指数出发，使用，保存要存储数据的数组和另一个数组，这只是持有指数，所以，当你与ID 10搜索对象时，你触摸指数阵列，而不是数据的阵列。结果
你可以看到在 http://jsperf.com/array-management-performance/2这样的一个例子。
The fastest configuration I found, that supports IDs as indexes and holes between them, as well as starting at a high index, is using an Array that holds the data you want to store, and another array, that just holds the indexes, so that when you are searching for an object with ID 10, you touch the index Array, instead of the Array with data.
You can see an example of this in http://jsperf.com/array-management-performance/2.
编辑：
如果你想看到的性能下降，请检讨这jsperf，改变minId和maxId一些大numebers。
If you want to see the performance degradation, please "review" this jsperf and change minId and maxId to some big numebers.
下面是一些统计：
对象
自定义阅读：火狐165.173万OPS /秒|铬351.699万OPS /秒结果
阅读未定义：火狐98.582亿操作/秒| Chrome的54.666亿操作/秒结果
写关闭：火狐7.599亿操作/秒|铬291.244万OPS /秒结果
写远：火狐5.599亿操作/秒| Chrome的93.733亿操作/秒结果
写覆盖：火狐7.599亿操作/秒|铬291.244万OPS /秒搜索
Read Defined: Firefox 165.173 mln ops/sec | Chrome 351.699 mln ops/sec
Read Undefined: Firefox 98.582 mln ops/sec | Chrome 54.666 mln ops/sec
Write Close: Firefox 7.599 mln ops/sec | Chrome 291.244 mln ops/sec
Write Far: Firefox 5.599 mln ops/sec | Chrome 93.733 mln ops/sec
Write Overwrite: Firefox 7.599 mln ops/sec | Chrome 291.244 mln ops/sec
阵列
自定义阅读：火狐681.206万OPS /秒|铬401.522万OPS /秒结果
阅读未定义：火狐681.206万OPS /秒| Chrome的62.827亿操作/秒结果
写关闭：火狐400.234万OPS /秒|铬121.519万OPS /秒结果
写远：火狐348.560万OPS /秒|铬121.519万OPS /秒结果
写覆盖：火狐400.234万OPS /秒|铬234.337万OPS /秒搜索
Read Defined: Firefox 681.206 mln ops/sec | Chrome 401.522 mln ops/sec
Read Undefined: Firefox 681.206 mln ops/sec | Chrome 62.827 mln ops/sec
Write Close: Firefox 400.234 mln ops/sec | Chrome 121.519 mln ops/sec
Write Far: Firefox 348.560 mln ops/sec | Chrome 121.519 mln ops/sec
Write Overwrite: Firefox 400.234 mln ops/sec | Chrome 234.337 mln ops/sec
P.S。你知道吗，上面写着定义是移动在Chrome速度更快，比在Chrome在桌面上？
P.S. Did you know, that Read Defined is faster on Chrome on Mobile, than on Chrome on Desktop ?
我jsperf-ED的每一个问题，我这里有，所以无论是我的/别人的测试编写不当，或者这是一些非常时髦的东西。
I jsperf-ed every single question I have here, so either my/others' tests were incorrectly written, or this is some really funky stuff.
http://jsperf.com/array-management-performance/2 < BR>
http://jsperf.com/array-in-the-middle-of-nowhere 结果
http://jsperf.com/object-holey-performance-better 结果
http://jsperf.com/object-performance-better 结果
http://jsperf.com/array-vs-object-mine-v2/5 搜索结果
http://jsperf.com/array-management-performance/2
http://jsperf.com/array-in-the-middle-of-nowhere
http://jsperf.com/object-holey-performance-better
http://jsperf.com/object-performance-better
http://jsperf.com/array-vs-object-mine-v2/5
PS2，我知道，那阵列测试之一是实际测试对象，而另一个对象测试实际测试阵列，请不要指出这一点，我知道，我写了这个，这个错误是因为jsperf很不好做了，我是想比较快查了很多不同的设置。
P.S.2 I know, that one of the Array tests is actually testing Object, and another Object test is actually testing Array, please do not point that out, I am aware, I wrote this, the error is because jsperf is very poorly made, and I was trying to relatively quickly check a lot of different settings.
P.S.3我很抱歉，其中一些测试都是真的很乱，我没想到，我真的需要向他们展示给任何人，但我仍然认为有足够。
P.S.3 I am sorry, that some of these tests are really messy, I did not think, I would actually need to show them to anyone, but I still think there are sufficient.
编辑：（解答，希望能够重开的问题，使我可以回答吧）
( Answer, hopefully to re-open the question, so that I can answer it )
在这里，我去回答我们所有的（我的）问题。现在，我看了一遍我的问题，而有答案，我可以看到我的问题无法容易回答，或者一切真的，没有挖掘到每个浏览器的源代码。
Here I go with an answer to all of our (my) problems. Now that I read my questions again, while having the answer, I can see how my questions could not be answered easily, or at all really, without digging into the sources of each browser.
我自己还是不知道为1，2，3，4甚至5确切的答案，但是这是正确的答案，是由于实现差异，它是那样简单，很明显，我有这里没有回到只是写，我有一个解决方案，我在这个问题上显示出的问题。
I myself still do not know the exact answers to 1, 2, 3, 4 or even 5, but the answer that is correct, is "Because of implementation differences", it is as simple as that, obviously, I have not returned here to write just that, I have a solution to the problem I am showing in this question.
简化问题：
你有一个集ID，被分配到数据，最有可能从数据库中。
你想在JS数组的数据，这样就可以使用它很容易，但你不想失去性能，同时把100K元素融入一个JS数组。一个人怎么放N个元素到JS数组不失读/写性能？ （我没有测试写的，因为它不是对我很重要）。
Simplified Problem: You have a set of IDs, that are assigned to data, most likely from the DB. You want that data in an array in JS, so that You can work with it very easily, but You DO NOT WANT to lose performance, while putting 100k elements into a JS array. How does one put N elements into an array in JS without losing read/write performance ? (I did not test write, because it is not that important to me).
解决方案和说明：
在研究这个问题，我已经检查潜在的解决方案mutlitude，像花键，傅立叶变换，哈希表，二进制搜索，并在地图/哈希表一拧，实际表现非常出色，但不是不够好，对我的口味（它也将与尺寸的增加）执行差。
Solution and Explanation: While studying this problem, I have checked a mutlitude of potential solutions, like splines, fourier transformations, hash tables, binary search, and a twist on map/hash tables, that actually performed VERY well, but not well enough for my taste ( it would also perform worse with the increase in size ).
最后的解决办法似乎死浅显，但不知何故，（我猜我哑）我花了10天弄清楚，它完美地扩展，并获得任何元素是非常快的O（1）。
The final solution seems dead simple and obvious, but somehow ( I guess I'm dumb ) it took me 10 days to figure out, it scales perfectly, and access to any element is extremely fast O(1).
要能写这个解决方案，我用JS引擎，这个属性的 http://jsperf.com/array-of-arrays-with-high-indexes/2 ，这似乎是获得第1000个元素是超级快（即使是在数组的数组），并且由于我知道我的数据是无符号整数，我可以从一维整数容易映射到3D，让FastArray可容纳高达上亿元的元素。
To be able to write this solution, I use this property of JS engines http://jsperf.com/array-of-arrays-with-high-indexes/2 , it would seem, that access to first 1000 elements IS SUPER FAST ( even in arrays of arrays ), and because I know my data is unsigned integers, I can easily map the integers from 1D to 3D, so that FastArray can hold up to a Billion elements.
您可以在这里看到在行动这个解决方案： http://jsperf.com/map-检查-V2 / 5 - 第一个测试是缓慢的，因为我读了一个简单的数组样本数据，这是很慢...编辑：这似乎不是这样的话，我真的不知道是什么原因造成的，我觉得jsperf是种吓坏了，因为跑只是测试良率pretty了良好的效果，很不可思议。
You can see this solution in action right here: http://jsperf.com/map-check-v2/5 -- The first test is slow, because I read the sample data from a simple array, and that is very slow ... This does not seem to be the case, I really do not know what is causing it, I think jsperf is kind of freaking out, because running just that test yields pretty good results, very weird.
一个更清洁的实施是在这里 https://github.com/ImJustAskingDude/JavascriptFastArray 了很多到每一页我阅读，引用揣摩了这一点。
A cleaner implementation is here https://github.com/ImJustAskingDude/JavascriptFastArray with a lot of references to the every page I read, to try to figure this out.
P.S.4版主。请重新打开了这个问题，让人们寻找终极阵列性能可以看到一个漂亮的回答实际这个答案。
谢谢你。
P.S.4 Moderators. please re-open this question, so that people searching for Ultimate Array Performance can see this answer in a nice actual Answer. Thanks.
P.S.5我不知道为什么，我想有我的最后code错误，这使得Chrome的相对较差，这可能是很容易解决的。
P.S.5 I do not know why, I guess there is a bug in my final code, that makes Chrome perform relatively poorly, which is probably easily fixable.
推荐答案
首先，JS引擎对每个浏览器的不同，这样他们就不会在任何情况下也同样执行。
First of all, JS engines are different on every browser, so they don't perform equally on every case.
另外，你必须要记住，在JavaScript数组都是对象也一样，唯一的区别是，他们有整数作为模拟指数的键值。
Also, you have to take in mind that arrays in JavaScript are Objects too, the only difference is that they have integers as their key values to simulate the indexes.
当您在对象将与所有充满未定义值，所以JS引擎有其他的空间来创建一个高指数创建只有一个元素的数组遍历整个结构找到你的价值。
When you create an array with just one element at a high index the Object will be created with all the other "spaces" filled with undefined values so the JS engine have to traverse the whole structure to find your value.
由于@RobG说，本地阵列方法，如减少，地图和的forEach 将在此情况下，更好地履行了不少。
As @RobG says, the native array methods like reduce, map, and forEach will perform a lot better in this case.
您也可以使用函数库，如 Ramda 或的 Lodash ，以帮助您遍历和扁平化查询结果。
Also you can use functional libraries like Ramda or Lodash to help you traverse and flatten your queries results.
这篇关于JavaScript数组性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
