[JS系列]关于JavaScript事件循环的简单理解
关于JavaScript
JS是一门单线程语言，它有一个调用栈（Call Stack）—— 后进先出，当函数执行时，函数会先进入到调用栈当中；JS会根据调用栈的次序，一步步往下执行代码，直到调用栈清空。举个简单的例子：
function first() {
console.log('first')
second()
}
function second() {
console.log('second')
}
first()
console.log('Hi JavaScript')
此时，JS的调用栈情况如下：
调用栈情况
程序开始，调用栈为空，程序自上而下开始执行，当遇到函数时，则会将其放进调用栈并进入函数内继续执行，若在函数内部遇到其他函数，也会进行同样的操作，只到函数执行完成后，则会退出调用栈，继续执行当前函数直到结束。
而我们需要一个环境可以运行JS代码，这时候就需要JS引擎，JS引擎有很多，当前我们听的最多的就是Google开发的V8引擎了，下面是一个实现了JavaScript引擎的流行项目列表：
-
V8 — 开源，由 Google 开发，用 C ++ 编写
-
Rhino — 由 Mozilla 基金会管理，开源，完全用 Java 开发
-
SpiderMonkey — 是第一个支持 Netscape Navigator 的 JavaScript 引擎，目前正供 Firefox 使用
-
JavaScriptCore — 开源，由苹果公司为 Safari 开发
-
KJS — KDE 的引擎，最初由 Harri Porten 为 KDE 项目中的 Konqueror 网页浏览器开发
-
Chakra (JScript9) — Internet Explorer
-
Chakra (JavaScript) — Microsoft Edge
-
Nashorn, 作为 OpenJDK 的一部分，由 Oracle Java 语言和工具组编写
-
JerryScript — 物联网的轻量级引擎
JavaScript引擎
它主要由两部分组成：
-
内存堆：这是内存分配的地方
-
调用栈：这是你的代码执行时的地方
JS引擎组成
平常我们运行的JS代码就是运行在JS引擎当中，它其中的运行环境如下图所示：
事件循环
因此，JS在引擎下执行并不像上述例子这么简单，代码自上而下执行就完事了。JS在浏览下的引擎执行，浏览器本身还会提供很多引擎之外的Web API，最终产生了事件循环、任务队列这些概念。
事件循环
-
JS的任务分为两类：同步任务和异步任务
-
同步任务都在主线程上执行，形成一个
执行栈 -
主线程以外，
事件触发线程管理着一个任务队列，只要异步任务有了结果就会往任务队列中添加 -
当执行栈的同步任务执行完成后，系统就会依次读取任务队列中的事件到执行栈中执行
其中，这里的任务队列还分为宏任务（macrotask）和微任务（microtask）
宏任务包括：
整体代码script，setTimeout，setInterval
微任务包括：
Promise，process.nextTick
总结
简单总结事件循环的执行顺序：
-
程序开始首先在调用栈中开始执行同步任务（个人理解：宏任务当中也包括了同步任务，所以可以理解为程序开始首先执行宏任务）。
-
当执行过程中遇到了异步任务，此时就会将其放入任务队列（此时区分宏任务和微任务环境）当中，等待调用栈进入空闲状态。
-
当调用栈执行完成当前宏任务后，就会将进入微任务的事件依次执行，直到微任务列表清空再次开启新一轮的宏任务。
-
如此循环直到所有事件执行完毕
举例
下面例子帮助理解：
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
我们来看这个例子的执行过程：
-
首先，程序开始执行整体script代码（此时可以看作一个宏任务环境），代码从上到下依次执行。
-
遇到console.log('1')，输出1，``new Promise`属于同步任务，其then属于异步任务
-
然后，代码依次遇到
setTimeout、process.nextTick、new Promise.then、setTimeout，我们依次对它们进行‘分类'：这里的宏任务是两个setTimeout
微任务依次是process.nextTick、promise.then操作
因此，第一轮宏任务结束下来输出：1 7 6 8
-
接下来是新的一轮宏任务，既第一次出现的setTimeout，分析思路仍然和上述一样，依次对其'分类'，结果就会一目了然。
这里只是针对JS的事件循环进行了分析，也只是JS执行机制的一部分，但从JS执行机制的角度出发，会发现还有很多地方还是懵懵懂懂的，但因为知识储备不扎实，仍然有很多地方无法理解，仍需要进一步学习。
参考资料
本文参考了多篇文章，参考资料如下：
-
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html
（这篇文章分析的很好，对JS运行机制涉及的知识点都进行了分析、梳理，看完可以有一个整体的认知）
-
这一次，彻底弄懂 JavaScript 执行机制
https://juejin.im/post/59e85eebf265da430d571f89#heading-4
（这篇文章主要讲解了JS的事件循环，例子是从这里摘取的，同时也在这里学习了如何分析整个事件循环的过程）
-
[译] JavaScript 如何工作：对引擎、运行时、调用堆栈的概述
https://juejin.im/post/5a05b4576fb9a04519690d42#heading-2
（这篇文章主要了解JS的一些常识性知识，之前一直不清楚JS引擎是怎么一回事）
-
深入理解js事件循环机制（浏览器篇）
