在 Chrome 中 JavaScript 數組到底占用了多少內存？

Ajian 發布于2019-08-20 18:04 / 2749人閱讀

摘要：原文譯者因為我原作者的代碼使用的很大的內存，所以我看了一下字符串對象數字和數組分別占用了多少內存。位是字節，但是每個數字平均占用了字節。同樣，將每個空數組的大小顯示為字節，每個空對象的大小為字節。另外，并不是所有的數組在內部都是相同的。

原文：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...

歡迎關注我的公眾號，關注前端文章：

GPU云服務器云服務器服務器內存占用多少阿里云服務器占用多少內存數組c語言中內存分配 java接口在內存中

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84061.html

eval到底哪里不好?

摘要：五總結和應對方案安全性分析是否安全主要由數據源決定，如果數據源不安全，只是提供了一種攻擊方法而已。方案嚴格管控數據源。方案低頻使用時影響不大，不要高頻使用，建議尋找替代方案。方案了解直接調用和間接調用的區別，遇到問題時不要懵逼即可。為什么要少用eval? eval是 js 中一個強大的方法。都說eval == evil等于true，這篇文章將研討eval的幾個缺點和使用注意事項。目...

elva 2019-08-23 16:52 評論0 收藏0
V8引擎深入研究目錄貼

摘要：對于每個前端程序員來講都有一個終極理想，那就是搞懂引擎是如何工作的。性能經過了兩次飛躍第次飛躍是年發布，第次則是年的。從去年底開始連載源碼分析，記錄一下自己學習源碼的點點滴滴。月星期六晚點和大家一起聊聊引擎前端程序員應該懂點知識講堂。對于每個前端程序員來講都有一個終極理想，那就是搞懂 javascript 引擎是如何工作的。從我的網絡 ID（justjavac）可以看出來，當我開始...

blastz 2019-08-21 11:31 評論0 收藏0
2017-07-17 前端日報

摘要：前端日報精選聽說你沒來總結個人使用過的移動端布局方法新特性簡介用寫組件坦然面對應對前端疲勞中文深入理解筆記函數前端架構經驗分享系列教程之創建頁面元素龍云全棧系列教程之定位頁面元素龍云全棧第期與表單驗證技術周刊期知乎 2017-07-17 前端日報精選聽說你沒來 JSConf 2017?總結個人使用過的移動端布局方法 - Rni-L - SegmentFaultNode.js v8....

caiyongji 2019-08-20 18:04 評論0 收藏0
JS中的垃圾回收與內存泄漏

摘要：介紹瀏覽器的具有自動垃圾回收機制，也就是說，執行環境會負責管理代碼執行過程中使用的內存。中的內存泄漏問題程序的內存溢出后，會使某一段函數體永遠失效取決于當時的代碼運行到哪一個函數，通常表現為程序突然卡死或程序出現異常。 showImg(https://segmentfault.com/img/remote/1460000018932880?w=4400&h=3080); 1. 介紹瀏...

xiaolinbang 2019-08-21 18:42 評論0 收藏0
JavaScript深入淺出第3課：什么是垃圾回收算法？

摘要：摘要是如何回收內存的深入淺出系列深入淺出第課箭頭函數中的究竟是什么鬼深入淺出第課函數是一等公民是什么意思呢深入淺出第課什么是垃圾回收算法最近垃圾回收這個話題非常火，大家不能隨隨便便的扔垃圾了，還得先分類，這樣方便對垃圾進行回收再利用。摘要： JS是如何回收內存的？《JavaScript深入淺出》系列： JavaScript深入淺出第1課：箭頭函數中的this究竟是什么鬼？ Jav...

AaronYuan 2019-08-23 18:28 評論0 收藏0