如何在Firefox和Safari中获取JS堆内存的使用量与限制？

针对你需要在堆内存过高时避免执行计算的需求，以下是不同浏览器环境下的可行方案：

1. 标准API：performance.measureMemory()（有限支持） #

这是W3C正在推进的标准化内存测量API，目前Chrome 89+、Edge 89+正式支持，Firefox和Safari处于开发阶段。

• 用法示例：

async function fetchMemoryUsage() {
  try {
    const memoryData = await performance.measureMemory();
    console.log('当前已使用堆内存:', memoryData.bytesUsed);
  } catch (error) {
    console.error('获取内存数据失败:', error);
  }
}

• 限制：必须在跨域隔离环境中使用（需服务器设置Cross-Origin-Opener-Policy: same-origin和Cross-Origin-Embedder-Policy: require-corp响应头），否则会抛出权限错误。该API仅返回已使用内存，无法获取堆内存上限。

2. 近似估算方案（通用跨浏览器） #

如果不需要精确数值，可通过以下方式估算内存压力：

• 估算单个对象内存占用：通过批量创建相同结构对象，对比内存变化来计算单个对象的近似大小，结合WeakRef和FinalizationRegistry跟踪对象回收：

function getApproxObjectSize(targetObj) {
  const sizeRegistry = new FinalizationRegistry(size => {
    console.log('目标对象近似内存大小:', size);
  });
  const weakRef = new WeakRef(targetObj);

  const baseline = performance.memory?.usedJSHeapSize || 0;
  const tempArr = [];
  // 创建10000个相同结构的对象
  for (let i = 0; i < 10000; i++) {
    tempArr.push({...targetObj});
  }
  const postCreation = performance.memory?.usedJSHeapSize || 0;
  const approxSize = (postCreation - baseline) / 10000;

  sizeRegistry.register(targetObj, approxSize);
  tempArr.length = 0; // 清理临时数组
  return approxSize;
}

• 估算全局内存阈值：页面加载后逐步创建对象，直到浏览器触发memorywarning事件，记录此时的内存使用量作为自定义阈值。

3. 直接监听内存警告事件 #

无需获取精确内存值，直接监听浏览器的内存警告事件，触发时停止计算：

window.addEventListener('memorywarning', () => {
  console.log('内存压力过高，暂停计算');
  // 执行你的暂停/清理逻辑
});

• 说明：该事件在移动端浏览器（Chrome、Firefox等）支持较好，桌面端支持有限。桌面端可结合Chrome/Edge的performance.memory做补充判断：

function shouldAvoidComputation() {
  // Chrome/Edge下判断内存占用超过80%
  if (performance.memory) {
    return performance.memory.usedJSHeapSize / performance.memory.totalJSHeapSize > 0.8;
  }
  // 其他浏览器默认返回false，或结合耗时判断
  return false;
}

4. Firefox/Safari的降级方案 #

• Firefox无公开的JS内存API，但可通过监控操作耗时间接判断内存压力：用performance.mark()标记操作开始/结束，通过performance.measure()计算耗时，如果耗时突然飙升，大概率是内存过高导致GC频繁触发。
• Safari同样无公开内存API，可依赖memorywarning事件（移动端支持）或耗时监控的方式。

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