乐趣区

关于javascript:前端-BUG-录-audio-意外的-pending-挂起状态

jiezi

最近公司始终在做众审平台相干的性能，大多数还都和音视频无关，前端究竟还是逃不过这一劫。

疯狂遇到 BUG，明天来说说其中一个：audio 加载时意外的长时间 Pending 问题。

BUG 场景

  1. vue 框架
  2. 挪动端（android 和 ios 的兼容也挺坑，尤其是低版本）
  3. 偶现（测试数据很难复现）
  4. 资源是 cdn，存在海内节点。（意味着不是海内用户拜访慢）

BUG 起因猜想

  1. cdn 回源慢，报错快。未监听报错。
    因为测试环境数据很难复现。线上数据比拟新，狐疑是首次应用回源导致。
    然而通过排查并不是，因为线上数据推到了第二天，还是存在问题。
    而且也监听了报错事件。

  2. 拜访达到限度，导致后续申请挂起 。
    首先咱们都晓得 chrome 同一域名并行加载资源的数量是 6 个。那么咱们来尝试复现一下这个问题。（确实能够复现）

    // 设置一个计数器，能够用控制台的过滤性能看日志。// count = 0;
// tag = `${Date.now()}-${Math.random()}-count${count++}`
tag = `${Date.now()}-${Math.random()}`

// 初始化一个 audio 标签
audio = new Audio()
// 设置资源地址
audio.src= "http://chuangshicdn.file.m.mvbox.cn/upload/1cfd8d964385aeb8d3b3051396146314_927674570_1.m4a?" + tag

// 获取 audio 所有事件，触发事件就打日志
audioEventList = [];
for(var i in audio) /^on/.test(i) && audioEventList.push(i)
audioEventList.forEach(v=>{audio[v] = console.log.bind(console, v, tag)
})

// 能够尝试播放音频，这样播放结束之后会持续加载。// audio.play()

    那么基于这个测试，我就有理由狐疑，vue 异样的更新了节点，导致 audio 被阻塞。 相似于 .lazy 异样状态的 input。https://www.lilnong.top/static/html/bug-vue-audio-pending-status.html 然而又没有胜利复现，淦。

问题总结

问题复现不稳固，所以只能盲猜。目前来看是修复了，计划用的是 reload

解决方案

  1. 刷新页面 location.reload()，基于咱们下面定位的问题，咱们能够刷新页面来躲避资源阻塞的问题。
  2. 因为默认的 audio 标签是会主动停止资源加载的。所以咱们能够把 audio 标签移出 Vue 环境。
  3. 资源加载超时时，提醒用户刷新页面。
  4. ajax 加载资源，而后做管制。然而须要跨域反对，而且加载也比较慢。为了好的体验还得上 AudioContext 有点太简单了。

微信公众号：前端 linong

欢送大家关注我的公众号。有疑难也能够加我的微信前端交换群。

退出移动版