[JS开发者应懂的33个概念]1. 事件循环

JS事件循环理解

在Github上看到一个关于JavaScript开发者应懂的33个概念，个人认为里面的内容还是挺常见的，因此打算根据其目录对JavaScript进行一次知识点的梳理。
附上其GitHub地址：
https://github.com/stephentian/33-js-concepts

本文目录如下：

关于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在浏览下的引擎执行，浏览器本身还会提供很多引擎之外的Web API，最终产生了事件循环、任务队列这些概念。

事件循环

• JS的任务分为两类：同步任务和异步任务

• 同步任务都在主线程上执行，形成一个执行栈

• 主线程以外，事件触发线程管理着一个任务队列，只要异步任务有了结果就会往任务队列中添加

• 当执行栈的同步任务执行完成后，系统就会依次读取任务队列中的事件到执行栈中执行

其中，这里的任务队列还分为宏任务（macrotask）和微任务（microtask）

宏任务包括：

整体代码script，setTimeout，setInterval

微任务包括：

Promise，process.nextTick

总结

简单总结事件循环的执行顺序：

1. 程序开始首先在调用栈中开始执行同步任务（个人理解：宏任务当中也包括了同步任务，所以可以理解为程序开始首先执行宏任务）。
2. 当执行过程中遇到了异步任务，此时就会将其放入任务队列（此时区分宏任务和微任务环境）当中，等待调用栈进入空闲状态。
3. 当调用栈执行完成当前宏任务后，就会将进入微任务的事件依次执行，直到微任务列表清空再次开启新一轮的宏任务。
4. 如此循环直到所有事件执行完毕

####举例

下面例子帮助理解：

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执行机制的角度出发，会发现还有很多地方还是懵懵懂懂的，但因为知识储备不扎实，仍然有很多地方无法理解，仍需要进一步学习。

参考资料

本文参考了多篇文章，参考资料如下：

1. 从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

   http://www.dailichun.com/2018/01/21/js_singlethread_eventloop.html

   （这篇文章分析的很好，对JS运行机制涉及的知识点都进行了分析、梳理，看完可以有一个整体的认知）

2. 这一次，彻底弄懂 JavaScript 执行机制

   https://juejin.im/post/59e85eebf265da430d571f89#heading-4

   （这篇文章主要讲解了JS的事件循环，例子是从这里摘取的，同时也在这里学习了如何分析整个事件循环的过程）

3. [译] JavaScript 如何工作：对引擎、运行时、调用堆栈的概述

   https://juejin.im/post/5a05b4576fb9a04519690d42#heading-2

   （这篇文章主要了解JS的一些常识性知识，之前一直不清楚JS引擎是怎么一回事）

4. 深入理解js事件循环机制（浏览器篇）

   http://lynnelv.github.io/js-event-loop-browser