js运行机制-事件循环EventLoop

js运行机制-事件循环EventLoop

先来看看一段js代码：

console.log('script begin')
setTimeout(() => {
    console.log('setTimeout')
},0)

new Promise((resolve) => {
    console.log('promise begin')
    for(let i = 0; i < 1000; i++) {
        i == 999 && resolve()
    }
}).then(() => {
    console.log('promise then')
})

console.log('script end')

在node命令行里执行这段js代码，输出的状况为script begin-promise begin——script end——promise then——setTimeout，为何会这样呢？咱们先来了解几个概念.

js单线程如何理解

js单线程意思就是同一时间只能作一件事，按照前后顺序执行.那么，为何JavaScript不能有多个线程呢？这样能提升效率啊.

JavaScript的单线程，与它的用途有关。做为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操做DOM。这决定了它只能是单线程，不然会带来很复杂的同步问题。好比，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另外一个线程删除了这个节点，这时浏览器应该以哪一个线程为准？

因此，为了不复杂性，从一诞生，JavaScript就是单线程。

主线程和任务队列

单线程就意味着，全部任务须要排队。全部任务能够分红两种，一种是同步任务（synchronous），另外一种是异步任务（asynchronous）。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务能够执行了，该任务才会进入主线程执行。

下图是主线程和任务队列的示意图：

宏任务和微任务

了解完主线程，还要了解一下任务，任务有宏任务（MacroTask）和微任务（MicroTask）之分。

宏任务主要有：script代码段、setTimeout、setInterval、Promise的构造函数、setImmediate、I/O等.

微任务主要有：process.nextTick和Promise的回调这两种状况.

若是宏任务在本轮Event Loop中执行，则微任务在本轮Event Loop的全部宏任务结束后执行（Event Loop下面会讲到）。下面为宏任务和微任务的执行示意图：

Event Loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，因此整个的这种运行机制又称为Event Loop（事件循环）

咱们再回头看看开始的一段代码：

首先任务进入执行栈，除了setTimeout，其余的进入主线程执行，setTimeout则进入任务队列； 而后主线程里面的任务又有宏任务和微任务，先执行宏任务，微任务在全部宏任务结束后执行； 因此先输出script begin-promise begin——script end——promise then； 最后主线程读任务队列的异步任务，最后输出setTimeout