使用大型ArrayBuffer时浏览器内存占用异常过高问题排查

问题场景 #

写了一段使用大型ArrayBuffer的浏览器代码，预期创建指定大小的缓冲区（比如output_data_size=128时对应128MB），但运行时发现浏览器内存每次直接暴涨5GB，一开始没找到泄漏点，后来定位到是这句代码搞的鬼：

paragraph_element.innerHTML = "lots of debug text" + data;

把data数组从拼接语句里移除后，内存占用就恢复正常了。

测试代码如下：

const data = new Uint8Array(
    await get_new_data(output_data_size)
);

async function get_new_data(output_data_size) {
    const output_byte_count = Math.ceil(1024*1024*output_data_size);
    let results_buffer = new ArrayBuffer(output_byte_count);
    return results_buffer;
}

原因分析 #

当你把Uint8Array（ArrayBuffer的视图对象）和字符串做拼接操作时，JavaScript会自动把整个数组转换成字符串形式。对于128MB的二进制数组来说，每个字节会被转换成对应的数字字符串（比如0转成"0"，255转成"255"），转换后的字符串体积会远超原二进制数据的大小——更关键的是，浏览器在处理这种超大字符串的拼接、渲染过程中，会产生大量临时内存开销，最终导致内存占用暴增到远超预期的程度。

解决方法 #

• 调试时不要直接把大型ArrayBuffer/类型数组拼接到innerHTML里，改成只打印数组的基本信息（比如长度）或者局部片段（比如前10个元素）：

  // 示例：只打印长度和前几个元素
  paragraph_element.innerHTML = `数据长度：${data.length}，前10个元素：${data.slice(0,10)}`;
  

• 如果确实需要展示完整的二进制数据，建议转成Base64格式（体积会压缩到原大小的约1.33倍），或者采用分块加载、可视化的方式展示，避免一次性转换整个大数组为字符串。

内容的提问来源于stack exchange，提问作者n-l-i