js面试——eventLoop

什么是eventLoop？

event loop指的是一种运行机制，规定了JS引擎是如何运行代码的。

为什么会有eventLoop？

由于JS是单线程执行的，所以任务(代码)的执行需要进行排队。任务分为两种：同步和异步，针对异步任务，首先会被推到任务队列中，然后根据event loop机制进行执行

JS运行机制

以上为事件循环示例图：

    step1:主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；

    step2:主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）；

    step3:异步进程处理完毕（Ajax返回，DOM事件处理，Timer定时器等），将对应的异步任务推入异步队列中；

    step4:主线程全部执行完毕，查询任务队列，如果存在任务，则取出一个任务推入主线程处理（先进先出）；

    step5:重复step2，3，4，称为事件循环；

 

如上图所示：任务队列存在多个，同一个任务队列中，按队列顺序被主线程取走；不同的任务队列中，存在着优先级，优先级高的现获取

    step1:主线程读取JS代码，此时为同步环境，形成相应的堆和执行栈；

    step2:主线程遇到异步任务，指给对应的异步进程进行处理（WEB API）；

    step3:异步进程处理完毕（Ajax返回，DOM事件处理，Timer定时器等），将对应的异步任务推入异步队列中；

    step4:主线程查询任务队列，执行microtask queue，将其按序执行，全部执行完毕；

    step5:主线程查询任务队列，执行macrotask queue，将其按序执行，全部执行完毕；

    step6:重复step4，5；

 

宏任务

1. setTimeout、setInterval和setImmediate
2. I/O操作、UI渲染、script脚本执行
3. MessageChannel(Vue的nexttick有使用)

微任务

1. promise
2. MutationObserver
3. process.nextTick (Node)

笔试题

console.log('1');
async function async1() {
    console.log('2');
    await async2();
    console.log('3');
}
async function async2() {
    console.log('4');
}

process.nextTick(function() {
    console.log('5');
})

setTimeout(function() {
    console.log('6');
    process.nextTick(function() {
        console.log('7');
    })
    new Promise(function(resolve) {
        console.log('8');
        resolve();
    }).then(function() {
        console.log('9')
    })
})

async1();

new Promise(function(resolve) {
    console.log('10');
    resolve();
}).then(function() {
    console.log('11');
});
console.log('12');

console.log('1'); // 1

let s1 = setTimeout(function () {
    console.log('2'); // 4
    let p1 = new Promise(function (resolve) {
        console.log('3'); // 5
        resolve();
    }).then(function () {
        console.log('4') // 6
    })
})

new Promise(function (resolve) {
    console.log('5'); // 2
    resolve();
}).then(function () {
    console.log('6') // 3
})

let s2 = setTimeout(function () {
    console.log('7'); // 7
    let p2 = new Promise(function (resolve) {
        console.log('8'); // 8
        resolve();
    }).then(function () {
        console.log('9') // 9
    })
})

// output：1 5 6 2 3 4 7 8 9

文档参考：

promise、async和await之执行顺序的那点事

这一次，彻底弄懂 JavaScript 执行机制

面试题之Event Loop终极篇