预备知识
由于js使用的是双精度64位存储,而且不区分具体类型。所以所有基本数据类型 undefined,null,boolean,number,string 均是64位存储
由于计算机显示的单位一般使用byte字节,
- 1byte = 8位 。
- 8byte = 64位。
所以js中 无论是字符串还是整数,浮点数都是按 8byte存储。 下面暂用的空间是一样的
var a = "1000"
var b = 1
a和b占用的空间都是一样 8byte。 可真的是这样吗?
谷歌浏览器performance调试
- 控制台查看内存
- jsHeapSizeLimit:内存大小限制
- totalJSHeapSize:可使用的内存大小
- usedJSHeapSize:JS对象(包括V8引擎内部对象)占用的内存
- 实时监控
通过f12,在开发工具 ... -> 更多工具 -> 性能监视器
测试一下
1. 新建一个空的html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
</script>
</head>
<body>
</body>
</html>
2. f12 打开开发者工具-内存
点击拍摄快照
通过下拉可以选择不同的数据类型信息
先查看统计信息
好家伙,空页面都加载了一堆东西。
这里看到js数组默认使用了 62KB。
我们来测试下在页面新增数组
3. 新增测试数据
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var A__test_arr = new Array(1000).fill(1)
</script>
</head>
<body>
</body>
</html>
在内存调试区域,重新"拍摄快照"。
多了4kb,这到底在哪里出现呢?
4.在控制下拉查看具体信息
这个有多个window信息,我们只关心自己调试的页面window,目前使用的是127.0.0.1这个window
找到变量A__test_arr ,最后一列显示保留大小,这里应该就是系统分配给数组对象的所有空间,这里单位是byte。所以 4024byte /1024 = 3.9kb 约等于4kb。这里就是新增的内存空间。
5.试试不同的数据和长度
new Array(1000).fill('a')
new Array(1000).fill('9999')
new Array(1000).fill(true)
数组大小基本没有太大变化
这里的到的大小差不多 为 4044,证明不同的基本数据类型,不影响数组大小。
6.疑惑1 总长度与理论不符
由于new Array(1000).fill(1) ,再参考一下 js 无论什么类型存储都是8btye,
则1000 * 8byte = 8000byte ,但是调试显示 只有4024byte。
7.疑惑2 使用有小数位的浮点数据
new Array(1000).fill(1.1)
js数组合计为 8024 ,即 8024 * 1024 = 7.8kb
比其他类型多出差不多4kb。