事件循环机制

初认识：

javaScript事件循环进制是一个用于处理异步事件的回调函数的机制。是JavaScript实现异步编程的核心。

1. 用于管理任务队列和调用栈，以及在适当的时候执行回调函数。
2. 可以监听消息队列中的事件，并根据事件处理的优先级顺序来依次执行相应的回调函数。

事件循环机制允许JavaScript在等待某些任务（异步任务：通常需要一定时间才能完成）完成的同时，可以执行其他任务，避免了阻塞，解决了单线程并发性的问题。

JavaScript事件循环是为了解决JavaScript的单线程并发性问题，实现单线程非阻塞。javaScript是一个单线程，同一时间只能执行一件事情。这样单一的特性会导致JavaScript在处理长时间运行的操作的时候出现阻塞，阻塞主要还是异步任务的问题。

基础：

• 同步任务：只有前一个任务执行完成之后，才能执行后一个任务。Promise()的参数，在async函数中的await右边的代码都是作为同步代码执行的。
• 异步任务：在执行这个任务的同时，可以执行别的任务，异步任务都是耗时的。不进入主线程，进入“任务队列"的任务，当主线程的任务运行完了之后，才会从“任务队列”取出，放入主线程执行。

微任务（microtask）：

• promise，只有Promise.then()的回调函数才会放入微任务中
• async (async函数中的await右边的代码是同步代码)
• await
• process.nextTick(node)
• mutationObserve

宏任务（macrotask）：

• script
• setTimeout
• setInterval
• setImmediate
• I/O
• UI render

执行顺序（优先级）：同步任务 -> 微任务 -> 宏任务。不断重复这个过程。（JS引擎指向代码是从上往下执行）

宏任务中的微任务执行顺序：宏任务执行完之后，微任务就一个接一个的执行。

在一轮循环中，会先执行一个宏任务，然后把微任务队列中的所有任务全部执行。然后在下一轮循环中，继续这样执行。

事件循环：

参考信息：并发模型与事件循环 - JavaScript | MDN (mozilla.org)

可视化展示：

事件循环组成：

参考资料：事件循环机制-执行栈、调用栈 - 渣渣逆天 - 博客园 (cnblogs.com)

一看就懂的事件循环机制(event loop) - 掘金 (juejin.cn)

调用栈（Stack）：

调用栈用于存储在代码执行阶段创建的所有执行上下文。

js有且只有一个调用栈，因为js在某个时刻只能做一件事。

调用栈的目的是为了帮助 JS编译器 用于追踪函数被调用的顺序的一种机制。

演示：

const second = () => {
  console.log('Hello there!')
}
const first = () => {
  console.log('Hi there!')
  second();
  console.log('The End')
}
first()

堆（heap）:

保存的地址。

对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

队列（Queue）：

保存事件对应的回调函数，在事件执行时，被弹出。

一个 JavaScript 运行时包含了一个待处理消息的消息队列。每一个消息都关联着一个用以处理这个消息的回调函数。

在 事件循环 期间的某个时刻，会从最先进入队列的消息开始处理队列中的消息。被处理的消息会被移出队列，并作为输入参数来调用与之关联的函数。正如前面所提到的，调用一个函数总是会为其创造一个新的栈帧。

函数的处理会一直进行到栈再次为空为止；然后事件循环将会处理队列中的下一个消息（如果还有的话）。

Web API：

浏览器提供了多种异步的Web API，如DOM，times（计时器），AJAX等。

当我们调用一个 Web API 时，如 setTimeout，setTimeout函数会被 push 调用栈顶然后执行，但是 setTimeout 的回调函数不会立即被 push 到调用栈顶，而是起一个计时器任务。当这个计时器结束时，该回调函数会被塞到任务队列（CallBack Queue）中。这个队列中的回调函数的调用就是由事件循环机制来控制的。

理解: 调用任务时，并不会马上进入任务队列，而是先调用web提供的api，等待执行的结果才放进去任务队列

事件循环效果展示视频：一个动画搞清前端js事件循环，面试再也不慌了_哔哩哔哩_bilibili

 

举栗子🌰：

参考视频：面试官：说一说事件循环？_哔哩哔哩_bilibili

栗子1：

console.log('script start');
async function async1(){// 微任务
    await async2();// 同步任务
    console.log('async1 end');
}
async function async2(){// 同步任务
    console.log('async2 end');
}
async1()
setTimeout(function(){// 宏任务
    console.log('setTimeout1');// 同步任务
    new Promise(res => res())
    .then(()=>{
        console.log('promise in timer1');
    })
    .then(()=>{
        console.log('promise in timer2');
    })
},0)
setTimeout(function(){// 宏任务
    console.log('setTimeout2');
},0)
new Promise(resolve => {// 微任务
    console.log('promise1');// 同步任务
    resolve()
    console.log('promise2');
})
    .then(function(){
        console.log('promise3');
    })
    .then(function(){
        console.log('promise4');
    })
console.log('script end');

// 结果
script start
async2 end
promise1  
promise2  
script end
async1 end
promise3  
promise4  
setTimeout1
promise in timer1
promise in timer2
setTimeout2

栗子2：

new Promise(resolve=>{
    console.log('promise1');
    resolve()
    console.log('promise2');
})
    .then(function(){
        console.log('promise3');
        setTimeout(function(){
            console.log('setTimeout3');
        },0)
    })
    .then(function(){
        console.log('promise4');
        setTimeout(function(){
            console.log('setTimeout4');
        },0)
    })
    .then(function(){
        console.log('promise5');
        setTimeout(function(){
            console.log('setTimeout5');
        },0)
    })

// 结果
promise1
promise2
promise3
promise4
promise5
setTimeout3
setTimeout4
setTimeout5