Promise为什么比setTimeout先执行?

2,329

基本概念

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

进程与线程

进程(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

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,及其相关的一系列概念。

如有问题,欢迎指正。