hls.js 线上内存泄漏完整排查，直播页面长时间驻留问题实战

一、直播页面长时间驻留内存泄漏业务痛点

很多监控大屏、直播后台、网页直播间业务，用户会将页面长时间打开驻留，数小时不刷新页面。线上会出现一类隐性问题：页面内存持续单向上涨，随着时间推移页面越来越卡顿，严重时浏览器标签直接崩溃。

很多开发排查内存上涨，第一反应怀疑 hls.js 本身库 BUG，但大量实际案例表明，绝大多数内存泄漏根源来自业务层实例管理不当，而非库本身缺陷。常见错误做法：关闭播放器弹窗、切换路由，仅仅执行video.pause()暂停视频，没有完整销毁 hls 实例。MSE 媒体源对象、定时器、网络请求、事件监听没有释放，废弃实例堆积在浏览器内存中。

还有一类场景：直播 M3U8 清单不做分片窗口限制，清单无限膨胀；或者后台标签页没有做拉流暂停，页面切后台之后依旧疯狂下载分片，分片缓存持续堆积，内存持续走高。

这类泄漏问题在简单短时间测试完全复现不出来，需要页面持续驻留几十分钟、反复开关播放器之后才逐步显现，本地简单冒烟测试完全无法发现。

排查 hls.js 内存相关疑难问题，我会使用 m3u8live.cn 网页调试工具作为基准参照，确认同一条 M3U8 流，在干净无业务干扰环境下内存增长是否正常，以此区分泄漏是业务代码问题，还是流媒体源本身问题。

二、hls.js 页面内存上涨典型根因

1. 组件销毁仅 pause 暂停，没有完整 destroy 销毁实例

现象：反复打开关闭直播弹窗，Chrome 任务管理器内存只涨不跌。 根因：只调用 video.pause ()，没有执行hls.stopLoad()、hls.detachMedia()、hls.destroy()，定时器、XHR 请求、MSE 对象、事件监听依旧驻留内存。

2. 多个播放器共用全局 hls 实例变量

现象：关闭 A 播放器，把全局实例赋值新流之后，旧的 MSE 资源没有释放，产生游离引用，GC 无法回收内存。 根因：多个视频组件复用同一个全局 Hls 对象，没有使用局部独立实例。

3. 直播 M3U8 清单分片窗口无限扩大

现象：长时间播放直播，M3U8 清单持续累积成千上万条分片记录，hls.js 维护大量分片元数据，内存不断上涨。 根因：切片服务hls_list_size没有设置合理数值，清单不淘汰旧分片，清单文本无限膨胀。

4. 页面切后台，没有停止分片拉流

现象：浏览器标签切后台，页面不可见，依旧持续下载 TS 分片，分片缓冲不断堆积内存。 根因：没有监听visibilitychange页面可见事件，后台没有调用 stopLoad 暂停拉流。

5. 业务层持续保存 hls 事件回调引用，阻止 GC 回收

现象：已经 destroy 的实例，业务日志埋点、事件回调依旧持有实例引用，浏览器垃圾回收无法释放对象内存。

三、内存泄漏标准化排查流程

第一步，将待测直播 M3U8 流放到网页调试工具，长时间播放，观察 Chrome 内存面板。

• 如果干净基准页面内存增长平稳，无异常持续暴涨：说明 M3U8 流本身无问题，内存泄漏来自业务项目代码逻辑；
• 如果基准页面也出现异常暴涨，则排查切片服务 M3U8 清单窗口配置。

第二步，业务环境下，复现操作流程：反复打开关闭播放器，使用 Chrome Memory 面板做 Heap‑Snapshot 堆快照，对比操作前后内存快照，寻找 Detached‑DOM、未释放 hls 实例对象。

第三步，核对播放器销毁完整执行链路，确认是否完整执行 stopLoad‑detachMedia‑destroy，实例变量置 null，清除事件监听。

第四步，直播业务查看 M3U8 原始索引，确认hls_list_size窗口分片数量是否做限制，防止清单无限膨胀。

第五步，测试页面切后台行为，确认页面隐藏之后分片网络请求是否停止。

四、开发最佳实践

五、总结

直播页面长时间驻留产生的内存泄漏，绝大多数并非 hls.js 底层库 BUG，而是业务层实例生命周期管理不当造成。短时间功能测试完全无法暴露这类隐性隐患。借助网页调试工具做基准对照，可以快速区分内存上涨来自业务代码还是流媒体源配置。严格规范实例创建、暂停、完整销毁流程，做好后台页面拉流管控，限制直播清单分片窗口，能够有效规避线上页面内存持续上涨、标签崩溃问题。