JavaScript 异步、栈、事件循环、任务队列

时间 2019-11-05

标签 javascript 异步事件循环任务队列栏目 JavaScript 繁體版

原文原文链接

概览

咱们常常会听到引擎和runtime，它们的区别是什么呢？javascript

引擎：解释并编译代码，让它变成能交给机器运行的代码（runnable commands）。
runtime：就是运行环境，它提供一些对外接口供Js调用，以跟外界打交道，好比，浏览器环境、Node.js环境。不一样的runtime，会提供不一样的接口，好比，在 Node.js 环境中，咱们能够经过 require 来引入模块；而在浏览器中，咱们有 window、 DOM。

Js引擎是单线程的，如上图中，它负责维护任务队列，并经过 Event Loop 的机制，按顺序把任务放入栈中执行。而图中的异步处理模块，就是 runtime 提供的，拥有和Js引擎互不干扰的线程。接下来，咱们会细说图中的：栈和任务队列。html

栈

如今，咱们要运行下面这段代码：java

function bar() {
    console.log(1);
}

function foo() {
    console.log(2);
    far();
}

setTimeout(() => {
    console.log(3)
});

foo();

它在栈中的入栈、出栈过程，以下图：
node

任务队列

Js 中，有两类任务队列：宏任务队列（macro tasks）和微任务队列（micro tasks）。宏任务队列能够有多个，微任务队列只有一个。那么什么任务，会分到哪一个队列呢？git

宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.
微任务：process.nextTick, Promise, Object.observer, MutationObserver.

浏览器的 Event Loop

浏览器的 Event Loop 遵循的是 HTML5 标准，而 NodeJs 的 Event Loop 遵循的是 libuv。 区别较大，分开讲。github

咱们上面讲到，当stack空的时候，就会从任务队列中，取任务来执行。浏览器这边，共分3步：web

取一个宏任务来执行。执行完毕后，下一步。
取一个微任务来执行，执行完毕后，再取一个微任务来执行。直到微任务队列为空，执行下一步。
更新UI渲染。

Event Loop 会无限循环执行上面3步，这就是Event Loop的主要控制逻辑。其中，第3步（更新UI渲染）会根据浏览器的逻辑，决定要不要立刻执行更新。毕竟更新UI成本大，因此，通常都会比较长的时间间隔，执行一次更新。vim

从执行步骤来看，咱们发现微任务，受到了特殊待遇！咱们代码开始执行都是从script（全局任务）开始，因此，一旦咱们的全局任务（属于宏任务）执行完，就立刻执行完整个微任务队列。看个例子：segmentfault

console.log('script start');

// 微任务
Promise.resolve().then(() => {
    console.log('p 1');
});

// 宏任务
setTimeout(() => {
    console.log('setTimeout');
}, 0);

var s = new Date();
while(new Date() - s < 50); // 阻塞50ms

// 微任务
Promise.resolve().then(() => {
    console.log('p 2');
});

console.log('script ent');


/*** output ***/

// one macro task
script start
script ent

// all micro tasks
p 1
p 2

// one macro task again
setTimeout

上面之因此加50ms的阻塞，是由于 setTimeout 的 delayTime 最少是 4ms. 为了不认为 setTimeout 是由于4ms的延迟然后面才被执行的，咱们加了50ms阻塞。api

NodeJs 的 Event Loop

NodeJs 的运行是这样的：

初始化 Event Loop
执行您的主代码。这里一样，遇到异步处理，就会分配给对应的队列。直到主代码执行完毕。
执行主代码中出现的全部微任务：先执行完全部nextTick()，而后在执行其它全部微任务。
开始 Event Loop

NodeJs 的 Event Loop 分6个阶段执行：

┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

以上的6个阶段，具体处理的任务以下：

timers: 这个阶段执行setTimeout()和setInterval()设定的回调。
pending callbacks: 上一轮循环中有少数的 I/O callback 会被延迟到这一轮的这一阶段执行。
idle, prepare: 仅内部使用。
poll: 执行 I/O callback，在适当的条件下会阻塞在这个阶段
check: 执行setImmediate()设定的回调。
close callbacks: 执行好比socket.on('close', ...)的回调。

每一个阶段执行完毕后，都会执行全部微任务（先 nextTick，后其它），而后再进入下一个阶段。

JavaScript 异步、栈、事件循环、任务队列

概览

栈

任务队列

浏览器的 Event Loop

NodeJs 的 Event Loop

Links