频繁改写大字符串引发浏览器内存溢出，求原因及解决方法

为什么多次replace会导致内存爆炸？ #

JavaScript的字符串是不可变的，每次调用replace都会生成一个全新的字符串副本。旧的字符串只有在完全没有引用时才会被垃圾回收（GC）处理，但在你连续循环/递归替换的过程中，V8（Chrome的JS引擎）的GC会因频繁内存分配延迟执行，导致大量旧字符串副本堆积在内存中，最终触发溢出。另外，递归写法会在调用栈中保留上下文，间接延长了旧字符串的引用生命周期，进一步阻碍GC回收。

高效替代方案 #

方案1：一次性正则替换（保留行号） #

不需要逐次循环替换，用正则一次性匹配所有注释，计算注释行数后替换为对应空行，全程只生成一个新字符串副本：

private runTest = (): void => {
  // 匹配多行注释，非贪婪模式避免跨注释匹配
  this._source = this._source.replace(/\/\*([\s\S]*?)\*\//g, (match) => {
    // 计算注释包含的行数
    const lineCount = match.split('\n').length;
    // 返回对应数量的空行，保持原内容的行位置
    return '\n'.repeat(lineCount);
  });
  console.log('runTest finished');
  console.log(this._source);
}

方案2：拆分-处理-拼接（流式操作） #

如果正则无法应对复杂注释场景（比如注释内嵌套/*），可以将字符串拆分为数组，处理后再拼接，大幅减少中间字符串数量：

private runTest = (): void => {
  const parts = this._source.split('/*');
  const result: string[] = [parts[0]];
  
  for (let i = 1; i < parts.length; i++) {
    const part = parts[i];
    const endIndex = part.indexOf('*/');
    if (endIndex === -1) {
      result.push(part);
      continue;
    }
    // 提取注释内容并计算行数
    const commentContent = part.slice(0, endIndex);
    const lineCount = commentContent.split('\n').length;
    // 替换为空行，拼接注释后的剩余内容
    result.push('\n'.repeat(lineCount), part.slice(endIndex + 2));
  }
  
  this._source = result.join('');
  console.log('runTest finished');
  console.log(this._source);
}

方案3：替换递归为普通循环 #

递归会累积调用栈，延长旧字符串的引用周期，改用循环更轻量：

private runTest = (): void => {
  let index: number;
  while ((index = this._source.indexOf('/*')) !== -1) {
    // 这里示例为简单移除/*，实际需替换空行可结合行数计算
    this._source = this._source.substring(0, index) + this._source.substring(index + 2);
  }
  console.log('runTest finished');
  console.log(this._source);
}

额外优化建议 #

• 分批处理并让出事件循环：如果必须逐次处理，每完成一定次数就暂停一下，给GC留出回收时间：

  private async runTestBatch(): Promise<void> {
    let count = 0;
    let index: number;
    while ((index = this._source.indexOf('/*')) !== -1) {
      this._source = this._source.substring(0, index) + this._source.substring(index + 2);
      count++;
      // 每处理100次让出事件循环
      if (count % 100 === 0) {
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    }
    console.log('runTest finished');
  }
  

• Chrome在内存紧张时GC触发延迟，若脚本持续执行会阻碍GC工作，上述分批处理能有效缓解这一问题。

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