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

Ajian 发布于2019-08-20 18:04 / 2572人阅读

摘要：原文译者因为我原作者的代码使用的很大的内存，所以我看了一下字符串对象数字和数组分别占用了多少内存。位是字节，但是每个数字平均占用了字节。同样，将每个空数组的大小显示为字节，每个空对象的大小为字节。另外，并不是所有的数组在内部都是相同的。

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

欢迎关注我的公众号，关注前端文章：

云服务器混合云服务器内存占用多少阿里云服务器占用多少内存数组c语言中内存分配 java接口在内存中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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