js 8byte存一条基本数据?

305 阅读2分钟

预备知识

由于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调试

  1. 控制台查看内存
  • jsHeapSizeLimit:内存大小限制
  • totalJSHeapSize:可使用的内存大小
  • usedJSHeapSize:JS对象(包括V8引擎内部对象)占用的内存
  1. 实时监控 通过f12,在开发工具 ... -> 更多工具 -> 性能监视器 image.png

测试一下

1. 新建一个空的html

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
  </script> 
</head>
<body>
</body>
</html>

2. f12 打开开发者工具-内存

点击拍摄快照 image.png

通过下拉可以选择不同的数据类型信息 image.png

先查看统计信息

image.png 好家伙,空页面都加载了一堆东西。

这里看到js数组默认使用了 62KB。

我们来测试下在页面新增数组

3. 新增测试数据

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    var A__test_arr = new Array(1000).fill(1) 
  </script> 
</head>
<body>
</body>
</html>

在内存调试区域,重新"拍摄快照"。

image.png 多了4kb,这到底在哪里出现呢?

4.在控制下拉查看具体信息

这个有多个window信息,我们只关心自己调试的页面window,目前使用的是127.0.0.1这个window image.png

image.png

找到变量A__test_arr ,最后一列显示保留大小,这里应该就是系统分配给数组对象的所有空间,这里单位是byte。所以 4024byte /1024 = 3.9kb 约等于4kb。这里就是新增的内存空间。

5.试试不同的数据和长度

new Array(1000).fill('a') image.png

new Array(1000).fill('9999') image.png

new Array(1000).fill(true) image.png

数组大小基本没有太大变化 image.png 这里的到的大小差不多 为 4044,证明不同的基本数据类型,不影响数组大小。

6.疑惑1 总长度与理论不符

由于new Array(1000).fill(1) ,再参考一下 js 无论什么类型存储都是8btye,

则1000 * 8byte = 8000byte ,但是调试显示 只有4024byte。

7.疑惑2 使用有小数位的浮点数据

new Array(1000).fill(1.1) image.png image.png

js数组合计为 8024 ,即 8024 * 1024 = 7.8kb

比其他类型多出差不多4kb。

待续...