浏览器标签切换时video DOM触发onstalled事件的原因及优化方案咨询

这个现象是浏览器对非活跃标签页的资源调度策略导致的：

• 主流Chromium、WebKit内核浏览器为了降低后台标签页的性能、带宽消耗，会主动降低非活跃页的网络请求优先级，未完成的媒体资源请求会被临时挂起或限流，当媒体数据加载中断超过浏览器内置阈值（通常是2-3秒）时，就会触发onstalled事件
• 你当前设置的preload = 'metadata'本身就属于低优先级预加载策略，被后台节流的概率会比preload='auto'更高

你当前的重试方案可以解决基础问题，但存在后台无效重试浪费带宽、重试逻辑无兜底的问题，更优的实现可以结合页面可见性API做逻辑优化：

• 用Page Visibility API监听标签页激活状态，仅在页面处于前台时执行重试逻辑，避免后台重试被浏览器限流做无用功
• 增加重试次数兜底，避免资源本身不可用的时候无限触发加载请求
• 重试前先判断视频的readyState状态，若已经完成加载则跳过重试逻辑

优化后代码示例 #

let dom = document.createElement('video');
dom.preload = 'auto'; // 调高预加载优先级，后台加载被限流的概率更低
dom.muted = true;
const MAX_RETRY = 3; // 最大重试次数兜底
let retryCount = 0;
let retryTimer = null;

dom.onloadedmetadata = function() {
  retryCount = 0; // 加载成功后重置重试计数
}
dom.onseeked = function() {
}

// 监听页面可见性变化，切回前台时主动检查加载状态
document.addEventListener('visibilitychange', () => {
  if (!document.hidden && dom.readyState < 2) { // 页面切前台且视频还没加载到元数据
    clearTimeout(retryTimer);
    if (retryCount < MAX_RETRY) {
      dom.load();
      retryCount++;
    }
  }
})

dom.onstalled = () => {
  clearTimeout(retryTimer);
  // 仅页面在前台、未超过最大重试次数时才执行重试
  if (!document.hidden && retryCount < MAX_RETRY) {
    retryTimer = setTimeout(() => {
      dom.load();
      retryCount++;
    }, 1000);
  }
}
dom.src = url;

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