React前端开发：如何获取JavaScript对象及非原始值变量的内存占用？

Chrome DevTools 具体操作（你可能没注意到的细节） #

• 内存快照（Heap Snapshot）：
  1. 打开DevTools（F12），切换到Memory标签
  2. 选择Heap snapshot，点击Take snapshot生成当前堆内存快照
  3. 快照加载完成后，在顶部搜索框输入你要查看的变量名（如果是全局变量或作用域内可访问的变量）
  4. 搜索结果里看下Retained Size列，这就是该对象被回收时能释放的总内存（包含它引用的所有子对象），Shallow Size是对象自身的内存大小（不含引用的对象）
• 实时内存分配追踪：
  1. 在Memory标签选择Allocation Sampling
  2. 点击Start后，操作你的应用触发目标变量的创建
  3. 停止录制后，在调用栈或对象列表中找到目标变量，查看其内存占用
• 控制台快速定位：
  在控制台输出变量后，右键点击变量结果，选择Reveal in Memory Inspector，直接跳转到内存面板查看该变量的详细内存数据

手动估算方法（应急用，精度有限） #

如果不想用DevTools，可以通过序列化后的大小粗略估算：

function getSerializedSize(obj) {
  return new Blob([JSON.stringify(obj)]).size;
}
// 使用示例
const testObj = { name: 'test', data: new Array(1000).fill('content') };
console.log(getSerializedSize(testObj));

注意：这个结果是对象序列化后的字节数，和实际内存占用有差异——JS对象在内存中会有额外的结构开销（比如隐藏类、属性描述符等），仅作参考。

注意事项 #

• 非原始值的内存占用重点看Retained Size，它能反映该对象实际占用的内存总量
• 如果变量被多个引用持有，Retained Size会包含所有关联对象的内存，需要先确保没有其他冗余引用
• 浏览器会自动优化内存，频繁创建销毁的小对象可能不会直接反映在快照中

内容的提问来源于stack exchange，提问作者Komal