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

---

歡迎關注個人公衆號，關注前端文章：