JS的执行顺序和事件循环

JS执行顺序

一个网页的主线程一定是单线程的，DOM事件不存在同时触发运行，一定是有先后顺序的。JS代码是从上到下同步执行的。

👉重点：点击按钮的同时触发画面其他项目的onblur事件（先执行onblur事件的同步方法，然后执行点击事件的同步方法，并不是两个函数同时执行的，一定是有先后顺序的）

 

---

JS事件循环

一轮事件循环只取一个宏任务，宏任务中的同步代码执行完后，就依次从前往后执行微任务队列中的微任务

👉重点：只有已完成的异步任务才会被加入到微任务队列中等待执行！！！

事件循环执行的具体过程

1. 代码执行初期，调用栈为空，宏任务队列中只有script这个宏任务，微任务队列为空
2. 将script这个宏任务放入调用栈中，执行同步代码
3. 遇到微任务，就将微任务加到微任务队列中，遇到宏任务，就将宏任务加到宏任务队列中，遇到函数调用的，就将该函数加到调用栈中，执行该函数中的同步代码，遇到微任务或者是宏任务，就将它们加到对应的任务队列中
4. 等调用栈中的同步代码执行完成后，查看微任务队列中是否有微任务，有则从微任务队列头部开始逐一执行微任务中的同步代码，如果该微任务中有宏任务，则将宏任务加到宏任务队列的末尾，如果微任务中微任务，则将微任务加到微任务队列尾部中，并在此次事件循环中执行完
5. 微任务队列中的任务都执行完后，继续下一轮事件循环，从宏任务头部取出第一个任务，执行同步代码，之后重复3和4步

vue.nextTick的原理

vue nextTick其实就是将dom更新后的操作当成微任务加到dom更新微任务的后面，保证其执行的顺序，再不行就使用setTimeout宏任务代替，在下一轮事件循环中执行，这也是为什么Promise.then的优先级比setTimeout高