一篇文章带你了解vue.js的事件循环机制

一、事件循环机制介绍       

JS是单线程的语言，浏览器和Node.js定义了各自的Event Loop（事件循环机制）则是用来解决异步问题。将程序分为“主线程（执行栈）”与“Event Loop线程”，“主线程”自上而下依次执行同步任务，“Event Loop线程”将异步任务推入宏任务队列与微任务队列去执行。

事件循环机制从整体上告诉了我们 JavaScript 代码的执行顺序 Event Loop 即事件循环，是指浏览器或Node 的一种解决javaScript 单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。“Event Loop线程”先执行宏任务队列，然后执行微任务队列，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。即继续先执行宏任务队列，再执行 微任务队列。

宏任务：

script(整体代码)/setTimeout/setInterval/setImmediate/ I/O / UI Rendering

微任务：

process.nextTick()/Promise/Async、Await(实际就是Promise)/MutationObserver(html5新特性)

setTimeout 和 setInterval 等都是任务源，真正进入任务队列的是他们分发的任务。

优先级

setTimeout = setInterval 一个队列setTimeout > setImmediate process.nextTick > Promise

二、经典事件循环面试题

1.在下面这段代码是面试中关于这类问题的经典考题，其中包含了同步、异步任务，几个输出的先后顺序是怎样的。

setTimeout(function(){
    console.log('1')
});
new Promise(function(resolve){
    console.log('2');
    resolve();
}).then(function(){
    console.log('3')
});
console.log('4');
// 2,4,3,1

首先进行任务划分，同步任务：new Promise()、console.log('4')；宏任务: setTimeout()；微任务：Promise().then()；Event Loop依次将同步任务推入执行栈并执行，当遇到宏任务或微任务时，推到宏任务或微任务队列中。先执行同步任务，同步队列执行完毕，会去微队列取任务，直到微队列清空，再去宏队列取任务执行。故此段程序执行顺序为：

new Promise()、console.log('4')、Promise().then()、setTimeout()。

 2.示例2

 答案输出为：async2 end => Promise => async1 end => promise1 => promise2 => setTimeout

3.示例3

        mounted(){
            this.test();
 
        },
        methods:{
            test(){
                console.log('script start');
 
                this.async1();
 
                setTimeout(function() {
                 console.log('setTimeout')
                }, 0);
 
                new Promise(resolve => {
                    console.log('Promise')
                    resolve()
                })
                .then(function() {
                console.log('promise1')
                })
                .then(function() {
                console.log('promise2')
                })
 
                console.log('script end')
            },
            async async1() {
                await this.async2()
                    console.log('async1 end')
            },
            async async2() {
              console.log('async2 end')
            },
        }

新版的chrome浏览器中不是如上打印的，因为chrome优化了,await变得更快了,输出为:

// script start => async2 end => Promise => script end => async1 end => promise1 => promise2

分析这段代码：

• 执行代码，输出script start。
• 执行async1(),会调用async2(),然后输出async2 end,此时将会保留async1函数的上下文，然后跳出async1函数。
• 遇到setTimeout，产生一个宏任务
• 执行Promise，输出Promise。遇到then，产生第一个微任务
• 继续执行代码，输出script end
• 代码逻辑执行完毕(当前宏任务执行完毕)，开始执行当前宏任务产生的微任务队列，输出promise1，该微任务遇到then，产生一个新的微任务 
• 执行产生的微任务，输出promise2,当前微任务队列执行完毕。执行权回到async1 
• 执行await,实际上会产生一个promise返回，即
• let promise_ = new Promise((resolve,reject){ resolve(undefined)})
• 执行完成，执行await后面的语句，输出async1 end 最后，执行下一个宏任务，即执行setTimeout，输出setTimeout
• 注意以上分析是旧版浏览器await执行慢导致async1在微任务执行后执行。

总结