前言
JavaScript是一门单线程的非阻塞脚本语言，同一时刻只允许一个代码段执行。在单线程的机制下，执行异步任务时，在等待结果返回的这个时间段，后面的代码就无法执行了。
JS在执行代码时，遇到异步任务之后还有同步任务的场景时，它并不会等待异步任务执行完，而是先执行同步任务，那么JS是如何做到这一点的呢？
本篇文章将详细讲解上述问题，欢迎各位感兴趣的开发者阅读本文。
事件循环
单线程
讲事件循环之前，我们先来理解下为什么JS不设计成多线程的。
我们做个假设，如果JS是多线程的，因为JS有DOM API可以操作DOM，此时如果有两个线程在操作同一个DOM，线程1删除了这个dom节点，线程2要操作这个dom，就会产生矛盾，到底以哪个线程为主。
为了避免这种情况的出现，JS就被设计成了单线程 。
宏任务与微任务
JS引擎把所有任务分为两类：宏任务、微任务。
宏任务有：
script整体代码- setTimeout、setInterval
- I/O
- UI渲染
- postMessage
- MessageChannel
- requestAnimationFrame
- setImmediate(Node.js 环境)
微任务有：
- new Promise.then()
- MutaionObserver
- process.nextTick(Node.js 环境)
执行规则
文章一开头我们了解到了单线程的弊端，JS是通过事件循环机制（EventLoop）来解决这一弊端的，接下来我们来看下EventLoop的执行规则：
- 所有代码作为宏任务进入主线程执行栈，开始执行
- 执行过程中，同步代码会立即执行，宏任务进入宏任务队列，微任务进入微任务队列
- 当前宏任务执行完成出队，读取微任务队列，有则执行，直至全部执行完毕
- 执行浏览器ui进程渲染
- 检查是否有webworker任务，有则执行
- 本轮宏任务执行完成，回到第2步，继续执行，直至宏任务与微任务队列全部清空
举例说明
我们了解完它的执行规则后，接下来我们举个例子来说明下，如下所示：
console.log("1"); // 1 同步代码：立即执行 [1] setTimeout(function() { console.log("2"); // 3 同步代码执行执行 输出2 process.nextTick(function() { console.log("3"); // 4 进入微任务队列 [3] }); new Promise(function(resolve) { console.log("4"); // 3 同步代码执行执行 输出4 resolve(); }).then(function() { console.log("5"); // 4 进入微任务队列 [3, 5] }); }); process.nextTick(function() { console.log("6"); // 2 进入微任务队列 [6] }); new Promise(function(resolve) { console.log("7"); // 1 宏任务：立即执行 [1, 7] resolve(); }).then(function() { console.log("8"); // 2 进入微任务队列 [6, 8] }); setTimeout(function() { console.log("9"); // 5 宏任务：立即执行 [9] process.nextTick(function() { console.log("10"); // 6 进入微任务队列 [10] }); new Promise(function(resolve) { console.log("11"); // 5 宏任务：立即执行 [9, 11] resolve(); }).then(function() { console.log("12"); // 6 进入微任务队列 [10, 12] }); }); // 执行顺序：1 7 6 8 2 4 3 5 9 11 10 12
process.nextTick()为node中的方法，你可以把它理解为与promise一样的微任务，promise的executor函数中的同步代码会立即执行。
我们来分析下上述代码的执行顺序，如下图所示：
image.png
运行结果如下所示：
image.png
当你把上述示例代码啃透后，那么你也就理解js的事件循环机制了。
当然，你可能没有那么快就啃透这个例子，这种概念性的东西，掌握它最好的办法就是：将示例代码放到编辑器里，对照着事件循环的执行规则，一行一行的去读代码，大脑过一遍，猜测运行结果，然后再去执行代码判断执行结果是否与你猜的一致。
最后，举一反三，去网上找一些事件循环的面试题多加练习，慢慢的你就把这个知识点啃透了，Good Luck！
代码地址
本文为《JS原理学习》系列的第5篇文章，本系列的完整路线请移步：JS原理学习 (1) 》学习路线规划
本系列文章的所有示例代码，请移步：js-learning
写在最后
至此，文章就分享完毕了。
我是神奇的程序员，一位前端开发工程师。
如果你对我感兴趣，请移步我的个人网站（www.kaisir.cn），进一步了解。
- 公众号无法外链，如果文中有链接，可点击下方阅读原文查看😊
