totalJSHeapSize与usedJSHeapSize的区别及含义解析

指标定义与示例解析 #

先明确三个核心指标的含义，重点拆解你疑惑的totalJSHeapSize和usedJSHeapSize：

• jsHeapSizeLimit：浏览器为当前页面JS上下文设定的堆内存最大上限，示例中约4GB是浏览器的限制值，并非你的笔记本总可用内存——浏览器会为每个页面单独划定内存上限，防止单个页面占用过多系统资源。

• totalJSHeapSize：浏览器已经为当前JS引擎分配完成的堆内存总量。JS引擎会提前向浏览器申请一块内存区域备用，避免频繁向系统申请内存带来的性能损耗，所以这部分内存包含已使用区域和预留空闲区域。示例中该值约294MB。

• usedJSHeapSize：当前JS代码实际在使用的堆内存大小，也就是存储着活跃对象（比如正在运行的函数、未被销毁的变量、当前渲染用到的DOM关联对象等）的内存区域。示例中该值约255MB。

用通俗类比区分两者 #

把JS堆内存比作一个电商仓库：

• jsHeapSizeLimit是仓库允许扩建的最大总面积；
• totalJSHeapSize是目前已经建好的仓库总面积（包含堆满货物的区域和空着的备用区域）；
• usedJSHeapSize是当前堆满货物（活跃对象）的区域面积。

示例中两者的差值约39MB，就是仓库里的空闲备用区域——当你创建新对象（入库新货物）时，JS引擎会优先从这部分空闲内存分配；如果空闲区域不足，引擎会先触发垃圾回收（清理过期货物、释放空间），若仍不够，才会向浏览器申请扩大totalJSHeapSize，直到触及jsHeapSizeLimit，此时再分配内存就会触发内存溢出错误。

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