APP音乐播放器遇到的问题

做这个项目遇到最大的问题，应该是在于做好播放器功能后，在CHROME浏览器不兼容的问题，即无法正常播放。

检查代码后发现是没问题的，实在无法解决的情况下去翻看了老师的博客，发现了问题所在。

介绍 Vue 的 nextTick 之前，我先简单介绍一下 JS 的运行机制：JS 执行是单线程的，它是基于事件循环的。对于事件循环的理解，阮老师有一篇文章写的很清楚，大致分为以下几个步骤：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度被调度。 消息队列中存放的是一个个的任务（task）。 规范中规定 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task 结束后，都要清空所有的 micro task。

在浏览器环境中，常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate；常见的 micro task 有 MutationObsever 和 Promise.then。

我们在有之前的知识背景，再理解 nextTick 的实现就不难了，这里有一段很关键的注释：在 Vue 2.4 之前的版本，nextTick 几乎都是基于 micro task 实现的，但由于 micro task 的执行优先级非常高，在某些场景下它甚至要比事件冒泡还要快，就会导致一些诡异的问题，如 issue #4521、#6690、#6566；但是如果全部都改成 macro task，对一些有重绘和动画的场景也会有性能影响，如 issue #6813。所以最终 nextTick 采取的策略是默认走 micro task，对于一些 DOM 交互事件，如 v-on 绑定的事件回调函数的处理，会强制走 macro task。

这个强制是怎么做的呢，原来在 Vue.js 在绑定 DOM 事件的时候，默认会给回调的 handler 函数调用 withMacroTask 方法做一层包装，它保证整个回调函数执行过程中，遇到数据状态的改变，这些改变都会被推到 macro task 中。

对于 macro task 的执行，Vue.js 优先检测是否支持原生 setImmediate，这是一个高版本 IE 和 Edge 才支持的特性，不支持的话再去检测是否支持原生的 MessageChannel，如果也不支持的话就会降级为 setTimeout 0。

而setImmediate是高版本的IE，Edge才支持的新特性，所以普通浏览器都会去使用MessageChannel

最终发现问题是在MessageChannel，导致浏览器不能正常播放，因此最终通过一种全局函数将MessageChannle和setImmediate降级为0，最终解决问题。

作者：黄轶
链接：https://juejin.im/post/5a1af88f5188254a701ec230
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。