Promise为何比setTimeout先执行？

基本概念

为便于理解，在进入正题以前，不得不说如下一些基本的概念。

进程与线程

进程（process）

• 是操做系统结构的基础；

• 是系统进行资源分配和调度的基本单位;

• 在linux系统中可使用ps-ef来查询进程列表（以下图）。比进程更小的单位叫作线程。

  

线程（thread）

• 是操做系统可以进行运算调度的最小单位；

• 它被包含在进程之中，是进程中的实际运做单位；一个进程能够并发多个线程，每条线程并行执行不一样的任务。

并发（concurrency）

• 一个处理器同时处理多个任务。

并行（parallelism）

• 多个处理器或多核处理器同时处理多个任务。

单线程

• 单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。

同步与异步

同步（synchronous）

• 调用一旦开始，调用者必须等到该调用结束才能执行下一步操做。

异步（asynchronous）

• 方法一旦调用，就会当即返回，调用者即可进行下一步操做。

JS运行机制

执行栈

• 是一个存储函数调用的栈结构，遵循先进后出的原则。

主线程

• 如今正在执行执行栈中的哪一个事件。

Event Loop

以上咱们讲到了进程与线程，同步与异步，执行栈，主线程等，那么JS究竟是怎么运行的呢？

先来供上一个常见面试题，写出如下代码的执行结果

console.log('start')

    setTimeout(() => {
        console.log('setTimeout')
    }, 0)
    
    new Promise(resolve => {
        console.log('promise')
        resolve()
    }).then(() => {
        console.log('then1')
    }).then(() => {
        console.log('then2');
    })
    
    console.log('end')
复制代码

结果以下图：

为何setTimeout最后输出呢？？？

JS代码的执行其实就是往执行栈中放入函数。那么遇到异步代码的时候该怎么办呢？其实当遇到异步代码时，会被挂起并在须要执行的时候加入到任务队列。一旦执行栈为空，Event Loop 就会从任务队列中拿出须要执行的代码并放入执行栈中执行。

JS引擎常驻于内存中，等待宿主将JS代码或函数传递给它，也就是等待宿主环境分配宏观任务，反复等待 - 执行即为事件循环。

Event Loop中，每一次循环称为tick，每一次tick的任务以下：

• 执行栈选择最早进入队列的宏任务（通常都是script）,执行其同步代码直至结束；
• 检查是否存在微任务，有则会执行至微任务队列为空；
• 若有必要会渲染页面；
• 开始下一轮tick，执行宏任务中的异步代码（setTimeout的回调等）。

宏任务与微任务

宏任务（macrotask）

• 宿主（Node、浏览器）发起的任务；
• 在ES6规范中，将其称为task；
• script、setTimeout、setInterval、I/O、UI rendering、postMessage、MessageChannel、setImmediate

微任务（microtask）

• JS引擎发起的任务；
• 在ES6规范中，将其称为jobs；
• Promise、MutaionObserver、process.nextTick

参考

掘金技术小册（前端面试之道）第七小节

Js 的事件循环(Event Loop)机制以及实例讲解

小结

本文主要介绍了JS运行机制，即Event Loop，及其相关的一系列概念。

若有问题，欢迎指正。