最近公司一直在做大众点评平台相关的功能，大部分都是和音视频相关的，前端还是难逃这场劫难毕竟。疯狂遇到BUG，今天说说其中一个：audio加载时意外的longPending问题。BUG场景Vue框架移动端（android和ios兼容性也比较差，尤其是低版本）偶尔（测试数据难以复现）资源为CDN，有海外节点。（说明不是海外用户访问慢。）出现BUG的原因猜测是CDN回源慢，报错很快。不监视错误。因为测试环境数据很难复现。网上数据比较新，怀疑是第一次使用回源造成的。但是后来查了一下，并不是真的，因为线上数据推到第二天了，还是有问题。并且还监视错误事件。已达到访问限制，导致后续请求挂起。首先，我们都知道chrome中同一个域名并行加载资源的个数是6。那么我们来尝试重现这个问题。（确实可以复现）//设置一个计数器，可以使用控制台的过滤功能查看日志。//count=0;//tag=`${Date.now()}-${Math.random()}-count${count++}`tag=`${Date.now()}-${Math.random()}`//初始化一个音频标签audio=newAudio()//设置资源地址audio.src="http://chuangshicdn.file.m.mvbox.cn/upload/1cfd8d964385aeb8d3b3051396146314_927674570_1.m4a?"+tag//获取所有音频事件，并在事件触发时记录它们audioEventList=[];for(variinaudio)/^on/.test(i)&&audioEventList.push(i)audioEventList.forEach(v=>{audio[v]=console.log.bind(console,v,tag)})//可以尝试播放音频，这样播放完后会继续加载。//audio.play()然后根据这个测试，我有理由怀疑是vue更新节点异常，导致音频被阻塞。输入类似于.lazy异常状态。https://www.lilnong.top/static/html/bug-vue-audio-pending-status.html但是没有复现成功，甘。问题总结问题复现不稳定，只能瞎猜。目前，已修复。解决方法是使用reload解决方案刷新页面location.reload()。根据我们上面定位到的问题，我们可以通过刷新页面来避免资源阻塞的问题。因为默认的audio标签会自动停止资源加载。所以我们可以把audio标签移出Vue环境。当资源加载超时时，提示用户刷新页面。Ajax加载资源然后控制。但是需要跨域支持，加载比较慢。要获得良好的体验，拥有AudioContext有点太复杂了。微信公众号：前端立农欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。
