Video.js文本轨道（WebVTT/VTT）内存泄漏问题求助

针对你遇到的切换视频后VTTCue和TextTrack实例残留导致内存泄漏的问题，可按以下步骤彻底清理资源：

1. 彻底清理文本轨道及关联Cue #

不要只调用官方的移除方法，需手动清空Cue并解除所有引用：

• 遍历播放器的所有文本轨道，先清空轨道的Cue集合：track.cues.clear()，这比逐个删除Cue更彻底，能快速切断Cue与轨道的绑定。
• 调用播放器的removeRemoteTextTrack(track)（远程轨道）或removeTextTrack(track)方法，确保轨道从播放器实例中移除。
• 将你代码中所有持有该轨道的变量设为null，避免闭包、全局变量或模块级引用持有实例。

2. 移除事件监听器 #

检查是否给轨道或Cue绑定了事件（如cuechange），在清理前必须移除：

// 示例：移除cuechange事件监听器
track.removeEventListener('cuechange', yourCueChangeHandler);

事件监听器会隐式持有实例引用，不移除会导致GC无法回收。

3. 清理Video.js内部残留引用 #

部分Video.js版本会在内部缓存轨道数据，可手动清理：

• 检查播放器的tech_对象（底层技术实现），如果存在textTracks_数组，直接清空：

  if (player.tech_?.textTracks_) {
    player.tech_.textTracks_ = [];
  }
  

• 若轨道实例有dispose()方法，调用它释放内部资源：track.dispose()。

4. 创造GC回收条件 #

浏览器GC无法强制触发，但可通过解除所有引用、减少内存占用帮助GC更快回收：

• 避免用全局变量存储轨道、Cue或播放器实例，尽量使用局部作用域。
• 切换视频后，可延迟执行一段无意义的内存操作，增加GC触发概率：

  setTimeout(() => {
    let temp = new Array(1000).fill(0);
    temp = null;
  }, 1000);
  

• 注意：window.gc()仅在Chrome开发者工具开启实验性选项后可用，生产环境不能依赖。

5. 排查泄漏根源（用DevTools） #

用Chrome DevTools的内存快照功能定位问题：

1. 切换视频前拍一次内存快照。
2. 切换视频并执行清理后，再拍一次快照。
3. 对比两次快照，查找残留的VTTCue/TextTrack实例，查看它们的引用链，确定是哪个对象（如事件监听器、全局变量）在持有引用，针对性修复。

6. 升级Video.js版本 #

旧版本Video.js存在文本轨道的内存泄漏bug，升级到最新稳定版可能直接解决问题。

完整清理示例代码 #

function cleanupTextTracks(player) {
  const tracks = Array.from(player.textTracks());
  
  tracks.forEach(track => {
    // 移除事件监听器（根据你的实际绑定调整）
    track.removeEventListener('cuechange', onCueChange);
    
    // 清空Cue集合
    if (track.cues?.clear) {
      track.cues.clear();
    }
    
    // 从播放器移除轨道
    if (track.remote) {
      player.removeRemoteTextTrack(track);
    } else {
      player.removeTextTrack(track);
    }
    
    // 解除引用
    track = null;
  });
  
  // 清理内部缓存
  if (player.tech_?.textTracks_) {
    player.tech_.textTracks_ = [];
  }
}

// 切换视频时调用
cleanupTextTracks(player);
// 然后加载新视频和新文本轨道

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