通过 Chrome Devtools 的 Memory 工具证明 string 的内存分配方式

发布时间：2025-11-05 13:06:44 来源：创站工坊 作者：系统运维

JS 的通过字符串是怎么分配内存的?

可能大家都知道，字符串存在字符串常量池中，具证被栈或堆上的内存变量引用。如果变量的分配方式值是字符串字面量，则在栈上的通过变量直接引用字符串常量池中的字符串;如果是字符串是 new String 创建的，则会在堆上创建 String 对象，具证指向字符串常量池中的内存字符串，栈上变量指向堆中的分配方式 String 对象。

这个结论是通过对的么?

今天我们用 Chrome Devtools 的 Memory 工具证明下：

Memory 工具证明 String 的内存分配方式

我们准备这样一段代码：

3s 的时候创建了一个 10000 个元素的数组 arr，数组元素是具证字符串常量 "guang"。

5s 的内存时候创建了一个 10000 个元素的数组 arr2，数组元素是WordPress模板分配方式 new String("guang")。

按照理论来说，通过arr 中的具证元素是直接引用字符串常量池的字符串，arr2 中的内存则是引用堆上的 String 对象，String 对象再引用字符串常量池的字符串。

我们用 Memory 工具来验证下。

Chrome Devtools 提供了 Memory 工具用于分析内存中的对象：

一共有三种内存分析工具：

我们想要看到按照时间线的实时分配情况，所以用第二种工具：TimeLine。

加载页面，点击录制，右边就会实时展示内存分配情况：

我们录到 6s 点击停止。

可以看到有两条竖线，分别代表了两次内存分配。

点击第一次内存分配，可以看到详情：

可以看到，这个时间点创建了 string 和 array 两种对象：

"guang" 这个 string 的内存地址是 @169541。

Array 的元素指向的云服务器也都是 @169541

这就验证了字符串常量池的存在，以及字符串字面量直接指向常量池中的字符串。

再来看下第二种内存分配方式：

可以看到，创建了 String 的对象、array 变量(system 是 JS 引擎内部分配的一些对象，不用关心)：

String 对象引用了字符串常量池中的 @169541 的字符串 "guang"

而 Array 中的元素则是指向了不同的 String 对象的地址：

这再一次验证了字符串常量池的存在，以及 String 对象是在堆上分配内存，然后指向字符串常量池的字符串。

证明完毕，确实如前面的结论所说：字符串存储在字符串常量池中，字符串字面量直接指向常量池的字符串地址，String 对象会先在堆上分配空间，然后指向字符串常量池的字符串地址。

我们从始至终只创建了一次 "guang" 这个字符串，字符串常量池的源码库好处显而易见了：

而且，还可以得出一个结论，创建 String 对象的方式内存开销大很多，建议用字符串字面量的方式：

从图中可以直观的对比出两种方式的占用内存的差别。

文中的测试代码上传到了 github: https://github.com/QuarkGluonPlasma/chrome-devtools-exercise

总结

Chrome Devtools 提供了 Memory 工具用于分析内存，包括 Snapshot、TimeLine、Sample 三种工具，我们用其中的 TimeLine 工具实时分析了字符串的内存分配，证明了字符串常量池的存在，以及字符串字面量、new String 两种创建字符串方式的内存上的差别。

建议尽量用字符串字面量，少用 new String 的方式创建字符串，在占据的内存大小上还是有差距的。

证明过程中，我们也可以直观的感受到字符串常量池的巨大好处。

相关文章