如何让SharedWorker运行在独立进程以突破浏览器内存限制？

我正在开发一款需在浏览器中加载超大数据集的Web应用，同时还需在SharedWorker中加载大量数据。当前Chrome等浏览器对单个进程/标签页的内存使用限制约为8GB。我的应用使用多个窗口（对应电脑的每个屏幕），且均通过noopener属性打开以确保使用独立进程，使每个窗口可单独使用8GB内存而非跨页共享限制。

现在我希望SharedWorker也能如此，但目前它会与启动它的页面共享内存限制。我找到的唯一解决方案是打开一个带noopener属性的弹窗，在其中启动SharedWorker后关闭弹窗，但这种方式对用户干扰极大。我尝试过使用sandboxed iframe，但一旦添加allow-same-origin指令，iframe就会与父窗口共享进程。请问是否有其他解决方案？

1. 隐藏式独立进程窗口启动SharedWorker #

通过打开一个视觉上完全不可见的窗口（而非弹窗），利用noopener让它运行在独立进程中，再在该窗口内启动SharedWorker，完全避免对用户的干扰。

实现要点： #

• 必须在用户交互事件（如按钮点击）中触发窗口打开，避免被浏览器弹窗拦截
• 将窗口设置为极小尺寸并定位到屏幕外，确保用户无感知
• 在隐藏窗口中建立SharedWorker与主应用的消息转发通道

代码示例： #

主应用中的触发代码：

// 绑定到用户点击事件执行，规避弹窗拦截
document.getElementById('init-worker').addEventListener('click', () => {
  // 打开隐藏的独立进程窗口
  const hiddenWin = window.open(
    '/worker-boot.html',
    '_blank',
    'noopener,width=1,height=1,left=-1000,top=-1000'
  );

  hiddenWin.onload = () => {
    // 通知隐藏窗口启动SharedWorker
    hiddenWin.postMessage('start-worker');
  };

  // 接收SharedWorker转发的数据
  window.addEventListener('message', (e) => {
    if (e.data.type === 'worker-data') {
      console.log('Received large dataset:', e.data.payload);
    }
  });

  // 封装向SharedWorker发送消息的方法
  window.sendToWorker = (data) => {
    hiddenWin.postMessage({ type: 'app-msg', payload: data });
  };
});

/worker-boot.html中的代理代码：

<!DOCTYPE html>
<html>
<body>
<script>
let workerPort;

self.addEventListener('message', (e) => {
  if (e.data === 'start-worker') {
    // 在独立进程中启动SharedWorker
    const worker = new SharedWorker('/data-worker.js');
    workerPort = worker.port;

    // 转发SharedWorker消息到主应用
    workerPort.onmessage = (msg) => {
      window.opener.postMessage({ type: 'worker-data', payload: msg.data }, '*');
    };
    workerPort.start();
  } else if (e.data.type === 'app-msg') {
    // 转发主应用消息到SharedWorker
    workerPort.postMessage(e.data.payload);
  }
});

// 防止窗口意外关闭导致SharedWorker终止
window.addEventListener('beforeunload', (e) => {
  e.preventDefault();
  e.returnValue = '';
});
</script>
</body>
</html>

/data-worker.js中的SharedWorker核心代码：

const connections = [];

self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);

  port.onmessage = (msg) => {
    // 模拟加载超大数据集
    const largeData = new Array(10000000).fill('processed-data');
    port.postMessage({ status: 'loaded', data: largeData });
  };

  port.start();
};

2. 使用Service Worker替代SharedWorker（场景适配时） #

Service Worker在Chrome中运行在独立的专用进程，不受主页面的内存限制，适合以数据缓存、后台加载为核心需求的场景。

核心优势： #

• 独立进程运行，不占用主页面内存配额
• 支持离线缓存、后台同步等特性
• 可通过Broadcast Channel API与多个页面通信

注意事项： #

• Service Worker是事件驱动的，闲置时会被浏览器终止，需依赖Cache Storage或IndexedDB持久化数据
• 无法像SharedWorker一样保持长期实时连接，需通过消息广播实现页面间同步

3. 调整浏览器内存限制（仅开发/私有部署场景） #

如果应用仅面向内部用户或开发环境，可以通过Chrome启动参数修改单个进程的内存上限：

chrome.exe --max-old-space-size=16384

该参数将V8引擎的内存上限设置为16GB，但不适用于公开发布的应用，因为需要用户手动配置浏览器。

• 隐藏窗口必须在用户交互触发的事件中打开，否则会被浏览器弹窗拦截机制阻止
• 需确保SharedWorker的作用域设置正确，让多个主页面能连接到同一个独立进程中的实例
• 隐藏窗口可在不需要时通过window.close()主动关闭，释放资源

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