如何检测浏览器是否支持freeze与resume生命周期事件？

首先纠正你代码里的一个小问题：监听这些事件时，事件名不需要加on前缀，正确写法是监听freeze和resume，加on会导致无法触发回调。

下面是两种可靠的检测方法：

方法1：检查document的事件属性 #

支持该API的浏览器会在document对象上暴露onfreeze和onresume属性，直接判断即可：

function supportsFreezeResumeEvents() {
  return 'onfreeze' in document && 'onresume' in document;
}

// 使用示例
if (supportsFreezeResumeEvents()) {
  document.addEventListener('freeze', () => {
    console.log('页面已进入冻结状态');
  });
  document.addEventListener('resume', () => {
    console.log('页面已从冻结状态恢复');
  });
} else {
  // 降级处理，比如用visibilitychange事件替代
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      console.log('页面不可见（替代冻结逻辑）');
    } else {
      console.log('页面恢复可见（替代恢复逻辑）');
    }
  });
}

方法2：通过Event构造函数验证 #

尝试实例化freeze和resume事件，支持的浏览器能成功创建，不支持的会抛出错误：

function supportsFreezeResume() {
  try {
    new Event('freeze');
    new Event('resume');
    return true;
  } catch (err) {
    return false;
  }
}

额外提示 #

目前只有Chromium内核的浏览器（比如Chrome、Edge）支持这两个事件，Safari和Firefox暂未实现，检测后记得为不支持的浏览器提供兼容逻辑，避免功能缺失。

内容的提问来源于stack exchange，提问作者Chuck Le Butt