锁屏后浏览器标签页里的JavaScript还会继续执行吗？

Question

锁屏后浏览器标签页里的 JavaScript 还会继续执行吗？这是前端性能与资源管理中的高频误区。答案是：**多数情况下会“降频”甚至“暂停”，但并非完全停止**。现代浏览器（Chrome、Edge、Firefox）在系统锁屏或标签页进入后台时，会主动限制定时器精度（如 `setTimeout`/`setInterval` 最小间隔被拉长至 1000ms）、暂停 `requestAnimationFrame`、冻结 Web Workers（取决于实现），并降低音频/视频解码优先级。若页面正运行长任务、Promise 微任务或未被 GC 的闭包，JS 引擎线程仍可能短暂运行，但受操作系统休眠策略影响——若设备进入 S3/S4 深度睡眠，CPU 停摆，所有 JS 自然中断。开发者常误以为 `visibilitychange` 或 `pagehide` 事件能完全替代锁屏检测，实则二者触发时机不同（锁屏未必触发 `pagehide`）。正确做法是监听 `document.hidden` + `navigator.onLine` + `pageshow/pagehide` 组合，并对轮询、心跳、动画等逻辑做主动节流或暂停。

Answer 1

```html

一、现象层：锁屏后 JS 是否“还在跑”？——直观观测与常见误判

开发者常通过 console.log(Date.now()) 在 setInterval(() => {}, 100) 中验证，锁屏后日志骤减或停更，便断言“JS 停了”。但这是表象：Chrome DevTools 的 Performance 面板可捕获锁屏瞬间的主线程活动——JS 引擎线程并未退出，而是被浏览器内核主动节流。例如，原定每 100ms 触发的定时器，在锁屏后实际间隔跃升至 ≥1000ms（符合 HTML5 规范中对后台标签页的最小定时器精度约束）。

二、机制层：浏览器如何协同 OS 实施运行时调控？

• 定时器降频：Chrome/Edge/Firefox 对后台/锁屏标签页统一执行 setTimeout/setInterval 最小间隔钳制（1000ms），此为强制策略，不可绕过；
• 渲染管线冻结：requestAnimationFrame 调用被静默丢弃，document.hidden === true 时帧回调不再触发；
• Worker 状态分异：Chrome 中 Web Worker 在锁屏后仍可执行计算任务（如加密哈希），但 Firefox 会暂停其事件循环；
• 资源优先级重调度：音视频解码线程降为最低优先级，GPU 上下文可能被回收，Canvas 2D 渲染上下文进入非活跃状态。

三、系统层：OS 休眠深度决定 JS 生存边界

休眠状态	CPU 状态	JS 执行可能性	典型触发条件
S1/S2（待机）	部分核心供电，内存保持	✅ 定时器降频后仍可执行微任务	笔记本合盖未设休眠
S3（挂起到内存）	CPU 断电，RAM 供电维持	❌ 主线程完全冻结，唤醒后从断点恢复	Windows 快速启动默认模式
S4（休眠到磁盘）	CPU/内存全断电	❌ 进程彻底终止，JS 引擎实例销毁	用户手动选择“休眠”

四、事件语义辨析：为什么 visibilitychange ≠ 锁屏检测？

关键差异在于事件触发时机与语义范畴：

// ✅ 正确组合监听（含锁屏兼容）
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    throttleHeartbeat('pause');
    pauseAnimations();
  } else {
    throttleHeartbeat('resume');
  }
});
window.addEventListener('pagehide', (e) => {
  if (e.persisted) console.log('页面将被 bfcache 缓存');
});
// ⚠️ 注意：锁屏时 document.hidden 可能延迟 300–2000ms 才变为 true（尤其 macOS + Chrome）

五、工程实践：面向锁屏场景的健壮性架构设计

1. 使用 Page Visibility API 作为第一道防线（document.hidden）；
2. 叠加 navigator.onLine 检测网络连通性突变（锁屏常伴随 WiFi 断开）；
3. 监听 pageshow/pagehide 捕获页面生命周期切换；
4. 对长轮询、WebSocket 心跳、Canvas 动画等模块实现 AutoThrottleManager；
5. 在 Service Worker 中托管离线心跳逻辑（规避主页面冻结限制）。

六、诊断工具链：精准定位锁屏行为影响面

graph LR
A[锁屏事件发生] --> B{浏览器是否已冻结 JS？}
B -->|Chrome DevTools Performance| C[查看 Main Thread “Idle” 区域占比]
B -->|Memory Heap Snapshot| D[检查闭包引用是否阻止 GC]
B -->|Network Tab| E[观察 fetch 请求是否超时或被取消]
C --> F[确认定时器是否被节流至 1000ms+]
D --> G[识别未释放的 EventListener 或 Promise 链]

七、反模式警示：高频错误实践与后果

• 仅依赖 blur 事件：标签页失焦 ≠ 锁屏（如 Alt+Tab 切换）；
• 忽略微任务队列：Promise.then() 和 queueMicrotask() 在锁屏前入队的任务仍会执行，导致状态不一致；
• 硬编码轮询间隔：未根据 document.hidden 动态调整，造成后台电量浪费；
• 假设所有浏览器行为一致：Safari 对 Web Worker 锁屏处理更激进，需单独适配。

```