在 Chrome 中 JavaScript 数组到底占用了多少内存？

原文：How much memory do JavaScript arrays take up in Chrome?
译者：justjavac

由于我（原做者）的代码使用的很大的内存，因此我看了一下字符串、对象、数字和数组分别占用了多少内存。

结果以下：

我以为这些数据最大的挑战是，空数组或者空列表占用的内存过小了。

所以我建立了大量空列表，而不是每次从新使用相同的空列表。

-	总大小 MB	每一项的大小 Byte
Empty Fields	7.63	8.00
Booleans	9.27	9.72
Numbers	9.27	9.72
Identical Strings	9.27	9.72
Arrays	39.79	41.72
Empty Objects	62.68	65.72

我不彻底理解这些结果。它们依赖于 JavaScript 引擎的内部结构。

空字段的大小是有道理的。每一项正好占用 8 个字节。（整个数组实际上占用了 8,000,048 个字节，所以有 48 个字节是数组自己的开销。）

可是，数字的数组却不符合个人指望。JavaScript 使用双精度（64 位）浮点数。64 位是 8 字节，可是每一个数字平均占用了 9.7 字节。

一样，Chrome 将每一个空数组的大小显示为 32 字节，每一个空对象的大小为 56 字节。然而，整个数组的平均大小分别为 39.8 和 62.7。

我猜想之因此形成这个差别，一部分来自于 V8 存储数组项的元数据（例如类型信息），而且 Chrome 为数组提供的空间比实际最低要求的空间要多一些。另外，并非全部的数组在 V8 内部都是相同的。2011 年的这篇博文（value representation in javascript implementations）也很不错。

（译注：之后有时间再写一篇关于 V8 数组内部存储原理的文章，by justjavac）

// Inheritance hierarchy:
// - Object
//   - Smi          (immediate small integer)
//   - HeapObject   (superclass for everything allocated in the heap)
//     - JSReceiver  (suitable for property access)
//       - JSObject
//         - JSArray
//         - JSArrayBuffer
//         - JSArrayBufferView
//           - JSTypedArray

若是要在 Chrome 中使用内存分析器（Profiler），能够使用此 CodePen 或从 Github 获取代码。

It’s also interesting to see what the table looks like with only item in each array:

-	数组总大小
Empty Field	56
Boolean	184
Number	184
String	216
Array	216
Empty Object	240

译文完。

---

补充一些相关知识点，关于 Chrome 内存分析器（Profiler）的使用。

当咱们使用内存分析器时，要先建立一个纯净的环境，能够在新建标签页时选择隐身模式或者访客模式。再高级点的用法就是本身新建一个 Chrome 桌面快捷方式并配置相关的命令行参数。

若是你查看了以前的文章，文中提到“打开 Profiles 面板”时，你可能在你的 Chrome 中找不到这个面板，由于 Profiles 已经更名了，如今是 Memory 面板。

在 Memory 面板中，选择 Take Heap Snapshot，能够制做一个堆内存快照。Google 开发者中心有一篇很是不错的文章（有中文版），“如何记录堆快照”：https://developers.google.com...

---

欢迎关注个人公众号，关注前端文章：