JavaScript 中对象/数组的性能如何?(专门针对 Google V8) [英] What is the performance of Objects/Arrays in JavaScript? (specifically for Google V8)

问题描述

与 JavaScript(尤其是 Google V8)中的数组和对象相关的性能记录将非常有趣.我在 Internet 上的任何地方都找不到关于此主题的综合文章.

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?

我也理解数组有时被视为 C++ 数组(即快速随机索引、缓慢删除和调整大小).并且，其他时候，它们更像是对象(快速索引、快速插入/删除、更多内存).并且，也许有时它们被存储为链表(即缓慢的随机索引，在开始/结束时快速删除/插入)

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)

JavaScript 中数组/对象检索和操作的精确性能是什么?(特别是针对 Google V8)

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:

• 向对象添加属性
• 从对象中删除属性
• 索引对象中的属性
• 向数组添加项目
• 从数组中删除项目
• 索引数组中的项目
• 调用 Array.pop()
• 调用 Array.push()
• 调用 Array.shift()
• 调用 Array.unshift()
• 调用 Array.slice()

任何文章或更多详细信息的链接也将不胜感激.:)

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

我真的很想知道 JavaScript 数组和对象是如何在幕后工作的.此外，V8 引擎在什么上下文知道"要切换"到另一种数据结构?

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);

这里到底发生了什么?

或者……这个呢……???

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...
}

对于传统的数组，性能会很糟糕；而如果使用了 LinkedList ......还不错.

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

推荐答案

我创建了 一个测试套件，正是为了探索这些问题(以及更多) (存档副本).

从这个意义上说，您可以在这个 50 多个测试用例测试人员中看到性能问题(这将需要很长时间).

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

正如它的名字所暗示的那样，它探索了使用 DOM 结构的原生链表特性的用法.

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

(目前已关闭，正在重建)关于我的博客的更多详细信息.

总结如下

• V8 阵列很快，非常快
• 数组推送/弹出/移位比任何等效对象快约 20 倍以上.
• 令人惊讶的是，Array.shift() 速度比数组弹出速度快约 6 倍，但比对象属性删除快约 100 倍.
• 有趣的是，Array.push(data); 比 Array[nextIndex] = data 快了近 20(动态数组)到 10(固定数组)倍.
• Array.unshift(data) 比预期的要慢，并且比添加新属性慢约 5 倍.
• 清零值 array[index] = null 比删除它快约 4x++ 快约 4x++ 在数组中delete array[index](未定义).莉>
• 出人意料的是，将对象中的值设为 Null 是 obj[attr] = null ~ 大约比删除属性慢 2 倍 delete obj[attr]
• 不出所料，中间数组 Array.splice(index,0,data) 很慢，非常慢.
• 令人惊讶的是，Array.splice(index,1,data) 已经过优化(没有长度变化)并且比单纯的 splice Array.splice(index,0,data) 快 100 倍
• 不出所料，divLinkedList 在所有扇区上都不如数组，除了 dll.splice(index,1) 删除(它破坏了测试系统的地方).
• 最大的惊喜 [正如 jjrv 指出的那样]，V8 阵列写入比 V8 读取略快 =O

• 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

注意:这些指标仅适用于 v8 没有完全优化"的大型数组/对象.对于小于任意大小(24?)的数组/对象大小，可能存在非常孤立的优化性能情况.更多细节可以在多个谷歌 IO 视频中广泛看到.

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.

注意 2:这些出色的性能结果不会跨浏览器共享，尤其是*咳嗽* IE.测试也很庞大，因此我还没有完全分析和评估结果:请在 =)

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 =)

更新说明(2012 年 12 月): Google 代表在 youtube 上有视频，描述了 chrome 本身的内部工作原理(例如当它从链表数组切换到固定数组时等)，以及如何优化它们.有关更多信息，请参阅 GDC 2012:从控制台到 Chrome.

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.

这篇关于JavaScript 中对象/数组的性能如何?(专门针对 Google V8)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！