前端面试之事件循环

什么是事件循环

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

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

  • 同步任务:立即执行的任务,同步任务一直会直接进入到主线程中执行
  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时任务等等

    从上面可以看到,同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列中读取相应的任务,推入主线程执行。上面的过程不断重复就叫事件循环

宏任务和微任务

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

微任务

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

常见的微任务有:

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

常见的宏任务有:

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

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

按照这个顺序,它的执行机制是:

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

看一下的一个示例:

javascript 复制代码
console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)
javascript 复制代码
/**
 * 遇到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 对象,下面的两种方法是等效的

javascript 复制代码
function f() {
    return Promise.resolve('TEST');
}

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

await

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

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

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

javascript 复制代码
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的各个场景的执行顺序有了大致的了解

请看以下的代码:

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

分析过程

javascript 复制代码
/**
 * 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
**/
相关推荐
unknown不想说话47455几秒前
什么是Module Federation2
前端
岁月宁静2 分钟前
AI 聊天消息长列表性能优化:后端分页 + 前端虚拟滚动
前端·vue.js·人工智能
TZOF3 分钟前
TypeScript的对象如何进行类型声明
前端·后端·typescript
一只叁木Meow3 分钟前
DOM元素尺寸属性详解:offset、client、scroll
前端
原则猫3 分钟前
单例模式工程运用
前端·设计模式
degree5204 分钟前
使用 Web Vitals 量化网页性能:从 LCP、FID 到 CLS 实战优化
前端
水晶浮游4 分钟前
💥 半夜3点被拉群骂?学会Sentry监控后,现在都是后端背锅了
前端
Olrookie4 分钟前
若依前后端分离版学习笔记(十九)——导入,导出实现流程及图片,文件组件
前端·vue.js·笔记
浩男孩18 分钟前
🍀终于向常量组件下手了,使用TypeScript 基于 TDesign二次封装常量组件 🚀🚀
前端·vue.js
玲小珑20 分钟前
LangChain.js 完全开发手册(十三)AI Agent 生态系统与工具集成
前端·langchain·ai编程