浅谈浏览器JS事件循环机制

什么是JS事件循环机制？

JavaScript 引擎是单线程的，那么我们在一些页面的请求方法中，如果遇到了一些异步方法，比如setTimeout,promise等延迟，需要消耗一定时间该方法才会调用完毕的情况下，为什么我们的页面在单线程的情况还不会出现卡壳的现象呢？原因是JS的事件循环机制，它可以实现JS的多线程。

JS事件循环机制的组成

调用栈

所有的方法都会进入这个调用栈，普通方法执行完毕后会跳出调用栈，特殊方法比如setTimeout，回调函数里面的方法会进入到消息队列，promise里面的方法会进入到微任务队列。

等调用栈里面的普通方法全部调用完毕后，如果微任务里面有方法则执行完毕，执行完毕后再执行消息队列。注意new Promise()里面的方法是普通方法。

消息队列

特殊方法比如setTimeout,setInterval,I/O操作里面的方法会进入此中。

微任务队列

特殊方法比如promise().then()，mutation,observer里面的方法会进入此中。

 

 举例说明

参考这个网址：

https://www.bilibili.com/video/BV1kf4y1U7Ln