資訊專欄INFORMATION COLUMN
摘要：原文譯者因為我原作者的代碼使用的很大的內(nèi)存，所以我看了一下字符串對象數(shù)字和數(shù)組分別占用了多少內(nèi)存。位是字節(jié)，但是每個數(shù)字平均占用了字節(jié)。同樣，將每個空數(shù)組的大小顯示為字節(jié)，每個空對象的大小為字節(jié)。另外，并不是所有的數(shù)組在內(nèi)部都是相同的。
原文：How much memory do JavaScript arrays take up in Chrome?
譯者：justjavac
因為我（原作者）的代碼使用的很大的內(nèi)存，所以我看了一下字符串、對象、數(shù)字和數(shù)組分別占用了多少內(nèi)存。
結(jié)果如下：
我覺得這些數(shù)據(jù)最大的挑戰(zhàn)是，空數(shù)組或者空列表占用的內(nèi)存太小了。
因此我創(chuàng)建了大量空列表，而不是每次重新使用相同的空列表。
| - | 總大小 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 |
我不完全理解這些結(jié)果。它們依賴于 JavaScript 引擎的內(nèi)部結(jié)構(gòu)。
空字段的大小是有道理的。每一項正好占用 8 個字節(jié)。（整個數(shù)組實際上占用了 8,000,048 個字節(jié)，因此有 48 個字節(jié)是數(shù)組本身的開銷。）
但是，數(shù)字的數(shù)組卻不符合我的期望。JavaScript 使用雙精度（64 位）浮點數(shù)。64 位是 8 字節(jié)，但是每個數(shù)字平均占用了 9.7 字節(jié)。
同樣，Chrome 將每個空數(shù)組的大小顯示為 32 字節(jié)，每個空對象的大小為 56 字節(jié)。然而，整個數(shù)組的平均大小分別為 39.8 和 62.7。
我猜測之所以造成這個差異，一部分來自于 V8 存儲數(shù)組項的元數(shù)據(jù)（例如類型信息），并且 Chrome 為數(shù)組提供的空間比實際最低要求的空間要多一些。另外，并不是所有的數(shù)組在 V8 內(nèi)部都是相同的。2011 年的這篇博文（value representation in javascript implementations）也很不錯。
（譯注：以后有時間再寫一篇關(guān)于 V8 數(shù)組內(nèi)部存儲原理的文章，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 中使用內(nèi)存分析器（Profiler），可以使用此 CodePen 或從 Github 獲取代碼。
It’s also interesting to see what the table looks like with only item in each array:
| - | 數(shù)組總大小 |
|---|---|
| Empty Field | 56 |
| Boolean | 184 |
| Number | 184 |
| String | 216 |
| Array | 216 |
| Empty Object | 240 |
譯文完。
補充一些相關(guān)知識點，關(guān)于 Chrome 內(nèi)存分析器（Profiler）的使用。
當我們使用內(nèi)存分析器時，要先創(chuàng)建一個純凈的環(huán)境，可以在新建標簽頁時選擇隱身模式或者訪客模式。再高級點的用法就是自己新建一個 Chrome 桌面快捷方式并配置相關(guān)的命令行參數(shù)。
如果你查看了之前的文章，文中提到“打開 Profiles 面板”時，你可能在你的 Chrome 中找不到這個面板，因為 Profiles 已經(jīng)改名了，現(xiàn)在是 Memory 面板。
在 Memory 面板中，選擇 Take Heap Snapshot，可以制作一個堆內(nèi)存快照。Google 開發(fā)者中心有一篇非常不錯的文章（有中文版），“如何記錄堆快照”：https://developers.google.com...
歡迎關(guān)注我的公眾號，關(guān)注前端文章：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84061.html
摘要：五總結(jié)和應對方案安全性分析是否安全主要由數(shù)據(jù)源決定，如果數(shù)據(jù)源不安全，只是提供了一種攻擊方法而已。方案嚴格管控數(shù)據(jù)源。方案低頻使用時影響不大，不要高頻使用，建議尋找替代方案。方案了解直接調(diào)用和間接調(diào)用的區(qū)別，遇到問題時不要懵逼即可。 為什么要少用eval? eval是 js 中一個強大的方法。都說eval == evil等于true，這篇文章將研討eval的幾個缺點和使用注意事項。 目...
摘要：對于每個前端程序員來講都有一個終極理想，那就是搞懂引擎是如何工作的。性能經(jīng)過了兩次飛躍第次飛躍是年發(fā)布，第次則是年的。從去年底開始連載源碼分析，記錄一下自己學習源碼的點點滴滴。月星期六晚點和大家一起聊聊引擎前端程序員應該懂點知識講堂。 對于每個前端程序員來講都有一個終極理想，那就是搞懂 javascript 引擎是如何工作的。 從我的網(wǎng)絡(luò) ID（justjavac）可以看出來，當我開始...
摘要：前端日報精選聽說你沒來總結(jié)個人使用過的移動端布局方法新特性簡介用寫組件坦然面對應對前端疲勞中文深入理解筆記函數(shù)前端架構(gòu)經(jīng)驗分享系列教程之創(chuàng)建頁面元素龍云全棧系列教程之定位頁面元素龍云全棧第期與表單驗證技術(shù)周刊期知乎 2017-07-17 前端日報 精選 聽說你沒來 JSConf 2017?總結(jié)個人使用過的移動端布局方法 - Rni-L - SegmentFaultNode.js v8....
摘要：介紹瀏覽器的具有自動垃圾回收機制，也就是說，執(zhí)行環(huán)境會負責管理代碼執(zhí)行過程中使用的內(nèi)存。中的內(nèi)存泄漏問題程序的內(nèi)存溢出后，會使某一段函數(shù)體永遠失效取決于當時的代碼運行到哪一個函數(shù)，通常表現(xiàn)為程序突然卡死或程序出現(xiàn)異常。 showImg(https://segmentfault.com/img/remote/1460000018932880?w=4400&h=3080); 1. 介紹 瀏...
摘要：摘要是如何回收內(nèi)存的深入淺出系列深入淺出第課箭頭函數(shù)中的究竟是什么鬼深入淺出第課函數(shù)是一等公民是什么意思呢深入淺出第課什么是垃圾回收算法最近垃圾回收這個話題非?；穑蠹也荒茈S隨便便的扔垃圾了，還得先分類，這樣方便對垃圾進行回收再利用。 摘要： JS是如何回收內(nèi)存的？ 《JavaScript深入淺出》系列： JavaScript深入淺出第1課：箭頭函數(shù)中的this究竟是什么鬼？ Jav...
閱讀 3209·2021-11-22 09:34
閱讀 3735·2021-08-31 09:45
閱讀 3980·2019-08-30 13:57
閱讀 1755·2019-08-29 15:11
閱讀 1749·2019-08-28 18:04
閱讀 3307·2019-08-28 17:59
閱讀 1644·2019-08-26 13:35
閱讀 2263·2019-08-26 10:12
