浏览器标签页后台休眠，HLS 直播页面切后台回来卡顿恢复逻辑实战

一、网页直播切后台休眠的业务痛点

做网页 HLS 直播业务，很多同学遇到一个很常见的线上反馈：用户把浏览器标签页切到后台、手机锁屏，过一段时间切回直播间，直播画面卡住不动，需要手动刷新页面才能恢复播放。

很多新手第一反应怀疑 M3U8 分片或者 CDN 出问题，反复排查服务端，但流本身是完全正常。根源来自现代浏览器的省电策略：当标签页处于后台隐藏状态，浏览器会对页面做节流处理，定时器、网络请求、JS 执行都会被大幅限制。hls.js 用来刷新直播 M3U8 清单的轮询逻辑被挂起，不再拉取新分片，直播就停滞。

这里有一个很大误区：很多人只简单监听visibilitychange事件，页面隐藏就调用 video.pause ()，页面显示直接调用 video.play ()。这套简单写法在点播尚可，但放到直播业务会出问题。直播不能简单暂停，因为后台服务端还在持续产生新分片，切回前台之后播放器时间已经落后一大截。调试页面后台休眠带来的直播卡顿，我会使用 m3u8live.cn，手动切换标签页可见 / 隐藏状态，复现切后台之后直播停滞现象。

二、后台休眠高频踩坑现象

坑 1：页面切后台直接 pause 暂停视频，切回前台直接 play

直播切后台 pause 之后，播放器停止拉取分片，后台直播持续往前走。切回前台 play，播放器尝试从很久之前旧时间继续播放，大量分片已经过期被清理，出现 404、花屏。

坑 2：完全不处理 visibilitychange 事件，任由浏览器后台节流

页面切后台，浏览器定时器被冻结，M3U8 清单不再刷新，画面静止，音频也会停止。用户切回前台，播放器还停留在过去时间点，不会自动追赶实时直播时间。

坑 3：只监听 visibilitychange，忽略移动端锁屏场景

手机浏览器锁屏，document.visibilityState 同样会变为 hidden，很多业务只测试切换标签页，忽略锁屏场景，真机复现故障。

坑 4：切回前台直接销毁重建整个 hls 实例，用户体验很差

部分业务图省事，页面重新可见就 destroy 再 new Hls，会出现明显黑屏闪烁，打断用户体验。

坑 5：DVR 时移直播与纯实时直播一套相同恢复逻辑

普通实时直播切回应该追赶最新时间；DVR 支持回看，要保留用户之前的回看进度，两套业务不能同一套处理逻辑。

三、业务区分：实时直播 vs DVR 时移直播处理思路

四、开发实操要点

五、排查简单步骤

第一步，待测直播 M3U8 粘贴网页调试工具，切换标签页后台，停留几十秒切回前台，复现卡顿停滞。 第二步，F12 网络面板观察，后台状态 M3U8 清单是否还在持续刷新。 第三步，确认业务区分实时直播和 DVR 回看场景，恢复逻辑不混淆。

六、总结

浏览器标签页后台、手机锁屏会触发浏览器省电节流，直播 M3U8 清单轮询会被冻结，画面停滞。直播业务不能照搬点播简单 pause/play 逻辑。纯实时直播后台 stopLoad，切回前台恢复加载并跳转到最新直播时间；DVR 时移直播要区分用户是看实时还是回看历史，保留回看进度。借助网页调试工具模拟页面可见状态切换，验证直播后台休眠恢复逻辑，解决线上用户切后台回来直播卡住的问题。