Chrome浏览器如何禁用标签页冻结，无需用户手动设置即可保持共享标签页正常运行

核心原因 #

你遇到的是现代浏览器默认的后台标签页资源节流机制：当标签页处于失焦、非可见状态超过一定时间后，浏览器会主动降低其执行优先级，限制甚至暂停JS定时器执行、DOM渲染更新，仅保留核心网络请求响应，以此降低设备功耗和内存占用。单屏共享时你操作主页面，共享的精简标签页会被判定为后台页面，就会触发该机制。
以下是无需用户手动修改浏览器设置的通用解决方案：

方案1：静音循环音频绕过冻结（兼容性最好） #

主流浏览器对正在播放音频的标签页会判定为「活跃状态」，不会触发后台冻结逻辑，你可以在精简展示页插入一个循环播放的静音空白音频即可，代码示例如下：

<audio loop muted autoplay style="display: none;">
  <source src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBSuBzvLZiTYIG2m98OScTgwOUarm7blmFgU7k9n1unEiBC13yO/eizEIHWq+8+OWT" type="audio/wav">
</audio>

上述base64是1秒长度的空白静音音频，不会产生任何声音，也不会占用过多资源。

方案2：调用屏幕唤醒锁API主动保活 #

使用W3C标准的Screen Wake Lock API，可以主动请求浏览器保持页面活跃，不会进入冻结状态，代码示例如下：

let wakeLock = null;
// 请求唤醒锁
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
  } catch (err) {
    console.log('唤醒锁请求失败:', err);
  }
};
// 页面可见时重新申请唤醒锁（锁会在页面隐藏时自动释放，需要重新申请）
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    requestWakeLock();
  }
});
// 页面加载完成后首次申请
window.addEventListener('load', requestWakeLock);

该方案兼容性覆盖Chrome 84+、Edge 84+、Safari 16.4+，覆盖绝大多数主流桌面浏览器。

方案3：跨标签页同步触发更新 #

如果你的精简页数据是从主页面同步而来，可以使用BroadcastChannel API实现跨标签页消息推送，主页面每次数据更新时给精简页发消息，触发精简页的DOM更新逻辑，避免因为定时器被节流导致的更新延迟：

// 主页面发送消息代码
const broadcastChannel = new BroadcastChannel('page_sync');
// 数据更新时调用
broadcastChannel.postMessage({
  type: 'update',
  data: yourNewData
});
// 精简页接收消息代码
const broadcastChannel = new BroadcastChannel('page_sync');
broadcastChannel.onmessage = (e) => {
  if (e.data.type === 'update') {
    // 直接执行DOM更新逻辑
    renderNewData(e.data.data);
  }
};

注意事项 #

• 以上方案仅在需要长期后台活跃的共享/投屏页面使用，不要全站全局开启，避免不必要的设备功耗增加
• 如果你的页面是嵌套在Electron等客户端外壳内，可以直接通过配置项关闭后台标签页节流，无需使用上述前端方案

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