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

X_AirDu 发布于2019-08-22 11:08 / 312人阅读

摘要：引擎是单线程的，如上图中，它负责维护任务队列，并通过的机制，按顺序把任务放入栈中执行。接下来，我们会细说图中的栈和任务队列。直到微任务队列为空，执行下一步。上一轮循环中有少数的会被延迟到这一轮的这一阶段执行。

概览

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

引擎：解释并编译代码，让它变成能交给机器运行的代码（runnable commands）。

runtime：就是运行环境，它提供一些对外接口供Js调用，以跟外界打交道，比如，浏览器环境、Node.js环境。不同的runtime，会提供不同的接口，比如，在 Node.js 环境中，我们可以通过 require 来引入模块；而在浏览器中，我们有 window、 DOM。

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

栈

现在，我们要运行下面这段代码：

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

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

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

foo();

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

任务队列

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

宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.

微任务：process.nextTick, Promise, Object.observer, MutationObserver.

浏览器的 Event Loop

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

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

取一个宏任务来执行。执行完毕后，下一步。

取一个微任务来执行，执行完毕后，再取一个微任务来执行。直到微任务队列为空，执行下一步。

更新UI渲染。

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

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

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阻塞。

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，后其它），然后再进入下一个阶段。

Links

Event loops

NodeJs 的 Event Loop 官方文档

并发模型与事件循环

Philip Roberts: Help, I’m stuck in an event-loop.

Promise的队列与setTimeout的队列有何关联？

JavaScript：彻底理解同步、异步和事件循环(Event Loop)

从event loop规范探究javaScript异步及浏览器更新渲染时机

JavaScript 运行机制详解：再谈Event Loop - 阮一峰的网络日志

Tasks, microtasks, queues and schedules

WindowOrWorkerGlobalScope.setTimeout()

What is the difference between JavaScript Engine and JavaScript Runtime Environment

idc机房托管混合云异步任务队列 task任务栈 java 栈队列 asynctask异步任务

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91862.html

JavaScript运行机制和事件循环

摘要：主线程不断重复上面的三步，此过程也就是常说的事件循环。所以主线程代码执行时间过长，会阻塞事件循环的执行。参考资料这一次，彻底弄懂执行机制任务队列的顺序机制事件循环搞懂异步事件轮询与中的事件循环 1. 说明读过本文章后，您能知道： JavaScript代码在浏览器中的执行机制和事件循环面试中经常遇到的代码输出顺序问题首先通过一段代码来验证你是否了解代码输出顺序，如果你不知道输出...

Ververica 2019-08-23 14:42 评论0 收藏0
总结：JavaScript异步、事件循环与消息队列、微任务与宏任务

摘要：单线程异步非阻塞然后，这又牵扯到了事件循环消息队列，还有微任务宏任务这些。此步的位置不确定某个时刻后，定时器触发线程通知事件触发线程，事件触发线程将回调函数加入消息队列队尾，等待引擎线程执行。前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说：要是用一句话来形容 JavaScript，我可能会这样： Java...

qianfeng 2019-08-23 13:00 评论0 收藏0
理解异步JavaScript

摘要：当函数结束，将会被从调用栈移出。事件循环事件循环的责任就是查看调用栈并确定调用栈是否为空。事件循环会再次检查调用栈是否为空，如果为空的话，它会把事件回调压入栈中，然后回调函数则被执行。写在文章前这篇文章是翻译自Sukhjinder Arora的Understanding Asynchronous JavaScript。这篇文章描述了异步和同步JavaScript是如何在运行环境中，...

ixlei 2019-08-23 13:58 评论0 收藏0
大话javascript 4期：事件循环（2）

摘要：只要指定过回调函数，这些事件发生时就会进入任务队列，等待主线程读取。三主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。一、任务队列同步任务与异步任务的由来单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候C...

李昌杰 2019-08-23 16:27 评论0 收藏0
JavaScript事件循环

摘要：事件循环当主线程中的任务执行完毕后，会从任务队列中获取任务一个个的放在栈中执行去执行，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。写在前面说起javascript（以下简称js）这门语言，相信大家已经非常熟悉了，不管是前端开发还是后端开发几乎无时无刻都要跟它打交道。虽说开发者每天几乎都要操作js，但是你真的确定你掌握了js的运行机制吗！下面我们就来聊聊这话题。 Ja...

Corwien 2019-08-22 16:18 评论0 收藏0
Javascript系列之javascript机制

摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...

13651657101 2019-08-22 15:50 评论0 收藏0