同步较大ArrayBuffer触发栈溢出错误，求可行解决办法

问题根源 #

报错代码String.fromCharCode.apply(null, largeUint8Array)会把数组所有元素作为参数传递给apply，当数组元素数量过多（比如100KB图片对应10万+元素），会超出JavaScript引擎的调用栈上限，触发RangeError: Maximum call stack size exceeded。

解决方案 #

1. 替换分块处理的base64编码函数 #

修改原有的b64encode函数，将大ArrayBuffer拆分成小块逐一编码，避免一次性传递过多参数：

function b64encode(buffer) {
  const uint8 = ArrayBuffer.isView(buffer) ? buffer : new Uint8Array(buffer);
  let base64Str = '';
  // 选用32KB作为分块大小，平衡性能与栈内存占用
  const chunkSize = 32768;

  for (let i = 0; i < uint8.length; i += chunkSize) {
    const chunk = uint8.subarray(i, Math.min(i + chunkSize, uint8.length));
    base64Str += btoa(String.fromCharCode.apply(null, chunk));
  }
  return base64Str;
}

要让Dexie-Cloud使用这个自定义函数，需要覆盖Typeson中ArrayBuffer的默认转换器：

import { typeson } from 'dexie-cloud';

// 移除默认的ArrayBuffer处理逻辑
typeson.remove('ArrayBuffer');
// 注册自定义转换器
typeson.register({
  ArrayBuffer: {
    test (x) {
      return x instanceof ArrayBuffer;
    },
    replace (buffer) {
      // 保留原有的b64LexEncode处理逻辑
      return b64LexEncode(b64encode(buffer));
    },
    revive (str) {
      // 解码逻辑沿用原有实现即可
      const binary = atob(b64LexDecode(str));
      const buffer = new ArrayBuffer(binary.length);
      const uint8 = new Uint8Array(buffer);
      for (let i = 0; i < binary.length; i++) {
        uint8[i] = binary.charCodeAt(i);
      }
      return buffer;
    }
  }
});

2. 更优方案：避免在Dexie-Cloud中存储大二进制数据 #

Dexie-Cloud的同步机制更适配结构化数据，大文件（如原图）建议存储到专门的云存储服务（如AWS S3、Firebase Storage），仅在Dexie数据库中存储文件的URL或引用ID。这种方式既能彻底规避同步时的栈溢出问题，也能提升数据库的同步效率。

验证 #

替换函数后，测试100-150KB的原图同步，确认不再出现栈溢出错误，同步流程正常完成。

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