前端面试之事件循环

什么是事件循环

首先, JavaScript是一门单线程的语言,意味着同一时间内只能做一件事,这并不意味着单线程就是阻塞,而是实现单线程非阻塞的方法就是事件循环

在JavaScript中,所欲任务都可以分为:

  • 同步任务:立即执行的任务,同步任务一直会直接进入到主线程中执行
  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时任务等等
    前端面试之事件循环_第1张图片
    从上面可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列中读取相应的任务,推入主线程执行。上面的过程不断重复就叫事件循环

宏任务和微任务

异步任务还可以细分为微任务和宏任务

微任务

一个需要异步执行的函数,执行时机主函数执行结束之后,当前宏任务执行之前

常见的微任务有:

  • Promise.then
  • MutationObserver(监听指定DOM的变化)
  • Process.nextTick(Node.js)

常见的宏任务有:

  • setTimeout/setInterval
  • postMessage、MessageChannel
  • UI rendering/UI事件(下轮事件循环执行之前)
  • Script(外层的同步代码)
  • setImmediate、I/O(Node.js)

宏任务更像在系统层面上执行的任务,微任务更像在代码层面执行的任务

前端面试之事件循环_第2张图片
按照这个顺序,它的执行机制是:

  • 执行一个宏任务,如果遇到一个微任务就将它放到微任务的事件队列中
  • 当前宏任务执行完成后,会查看微任务的事件队列,然后将里面的所有微任务依次执行完成

看一下的一个示例:

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)
/**
 * 遇到console.log(1) 直接打印
 * setTimeout 是宏任务 放到宏任务队列里面
 * Promise 中的代码是直接打印的 所以执行console.log('new Promise')
 * then 是微任务 放到微任务队列中
 * console.log(3) 这直接打印
 * 开始执行异步任务
 * 首先执行微任务 then 中的代码 打印then
 * 执行完微任务执行宏任务setTimeout中的代码 打印2 
 **/

打印的结果是:1 new Promise 3 then 2

async 与 await

async 是异步的意思,await可以理解为async wait,可以理解async就是用来声明一个异步方法,而await是用来等待异步方法执行

async
async 修饰的函数返回的是一个 Promise 对象,下面的两种方法是等效的

function f() {
    return Promise.resolve('TEST');
}

// asyncF is equivalent to f!
async function asyncF() {
    return 'TEST';
}

await
正常情况下,await 命令后面是一个 Promise 对象,返回该对象结果,如果不是Promise对象,就直接返回对应的值

async function f(){
    // 等同于
    // return 123
    return await 123
}
f().then(v => console.log(v)) // 123

不管await后面跟着的是什么,await都会阻塞后面的代码

async function fn1 (){
    console.log(1)
    await fn2()
    console.log(2) // 阻塞
}

async function fn2 (){
    console.log('fn2')
}

console.log(3)
fn1()

上面的例子中,await 会阻塞下面的代码运行,先执行async外面的同步代码,同步代码执行完成后,再回到async函数中执行await之后的代码,也就是阻塞的代码

所以上述输出结果为:3 1 fn2 2

流程分析

通过对上面的了解,我们对JavaScript的各个场景的执行顺序有了大致的了解

请看以下的代码:

async function async1() {
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2')
}
console.log('script start')
setTimeout(function () {
    console.log('settimeout')
})
async1()
new Promise(function (resolve) {
    console.log('promise1')
    resolve()
}).then(function () {
    console.log('promise2')
})
console.log('script end')

结果是:script start -> async1 start -> async2 -> promise1 -> script end -> async1 end -> promise2 -> settimeout

分析过程

/**
 * 1.遇到async1,async2函数定义不用执行,
 * 2.执行 console.log('script start') -> 输出:script start
 * 3.setTimeout 是宏任务 放到宏任务里面
 * 4.执行async1()
 * 5.进入执行async1 里执行 console.log('async1 start')  -> 输出:async1 start
 * 6.遇到await 执行 async2,然后阻塞await后面的代码
 * 7.进入执行async2 里执行 console.log('async2')  -> 输出:async2
 * 8.遇到Promise 执行 console.log('promise1') -> 输出:promise1
 * 9.执行console.log('script end') -> 输出:script end
 * 10.开始执行异步任务
 * 11.执行微任务await后面的代码 console.log('async1 end')  -> 输出:async1 end
 * 12.执行微任务then里面的代码 console.log('promise2')  -> 输出:promise2
 * 13.执行宏任务setTimeout里面的代码 console.log('settimeout')  -> 输出:settimeout
**/

你可能感兴趣的:(前端面试,前端,面试)