分享 vivo 互联网技术干货与沙龙活动，推荐最新行业动态与热门会议。
分类： JavaScript
2020-10-14 09:37:37
本文首发于 vivo互联网技术 微信公众号
链接：
作者：Ivan
本文根据 JavaScript 规范入手，阐述了JS执行过程在考虑时效性和效率权衡中的演变，并通过从JS代码运行的基础机制事件队列入手，分析了JS不同任务类型（宏任务、微任务）的差别，通过这些差别给出了详细分析不同任务嵌套的复杂 JS 代码执行的分析流程。
在使用JavaScript编程时，需要用到大量的回调编程。回调，单纯的理解，其实就是一种设置的状态通知，当某个语句模块执行完后，进行一个通知到对应方法执行的动作。
最常见的setTimeout等定时器，AJAX请求等。这是由于JavaScript单线程设计导致的，作为脚本语言，在运行的时候，语言设计人员需要考虑的两件重要的事情，就是执行的实时性和效率。
实时性，就是指在代码执行过程中，代码执行的实效性，当前执行语句任务是否在当前的实效下发挥作用。效率，在这里指的是代码执行过程中，每个语句执行的造成后续执行的延迟率。
由于JavaScript单线程特性，想要在完成复杂的逻辑执行情况下而不阻塞后续执行，也就是保证效率，回调看似是不可避免的选择。
早期浏览器的实现和现在可能有许多不同，但是并不会影响我们用其来理解回调过程。
早期浏览器设计时，比如IE6，一般都让页面内相关内容，比如渲染、事件监听、网络请求、文件处理等，都运行于一个单独的线程。此时要引入JavaScript控制文件，那JavaScript也会运行在于页面相同的线程上。
当触发某个事件时，有单线程线性执行，这时不仅仅可能是线程中正在执行其他任务，使得当前事件不能立即执行，更可能是考虑到直接执行当前事件导致的线程阻塞影响执行效率的原因。这时事件触发的执行流程，比如函数等，将会进入回调的处理过程，而为了实现不同回调的实现，浏览器提供了一个消息队列。
当主线上下文内容都程执行完成后，会将消息队列中的回调逻辑一一取出，将其执行。这就是一个最简单的事件机制模型。
浏览器的事件回调，其实就是一种异步的回调机制。常见的异步过程有两种典型代表。一种是setTimeout定时器作为代表的，触发后直接进入事件队列等待执行；一种是XMLHTTPRequest代表的，触发后需要调用去另一个线程执行，执行完成后封装返回值进入事件队列等待。在这里并不进行深入讨论。
由此，我们得到了JavaScript设计的基础线程框架。而宏任务和微任务的差异实现正是为了解决特定问题而在此基础上衍生出来的。而在没有微任务的时代，JavaScript的执行中并没有所谓异步执行的概念，异步执行是在宿主环境中实现的，也就是浏览器提供了。直至实现了微任务，才可以认为JavaScript的代码执行存在了异步过程。
（由于目前广泛使用的JavaScript引擎是V8，在此我们已V8作为解释对象）
我们常在文章中看到，macroTask(宏任务)和microTask(微任务)的说法。但其实在MDN[链接]中查看的时候，macroTask(宏任务)这一说法对应于microTask(微任务)而言的，而统一区分于microTask其实就是普通的Task任务。在此我们可以粗略的认为普通的Task任务其实都是macroTask。
任务的定义：
A task is any JavaScript code which is scheduled to be run by the standard mechanisms such as initially starting to run a program, an event callback being run, or an interval or timeout being fired. These all get scheduled on the task queue.
(任何按标准机制调度进行执行的JavaScript代码，都是任务，比如执行一段程序、执行一个事件回调或interval/timeout触发，这些都在任务队列上被调度。)
微任务存在的区别定义：
First, each time a task exits, the event loop checks to see if the task is returning control to other JavaScript code. If not, it runs all of the microtasks in the microtask queue. The microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks.
Second, if a microtask adds more microtasks to the queue by calling queueMicrotask(), those newly-added microtasks execute before the next task is run.
(当一个任务存在，事件循环都会检查该任务是否正把控制权交给其他 JavaScript 代码。如果不交予执行，事件循环就会运行微任务队列中的所有微任务。接下来微任务循环会在事件循环的每次迭代中被处理多次，包括处理完事件和其他回调之后。其次，如果一个微任务通过调用 queueMicrotask(), 向队列中加入了更多的微任务，则那些新加入的微任务会早于下一个任务运行 。)
根据定义，可以简单地作出以下理解。
(宏)任务，其实就是标准JavaScript机制下的常规任务，或者简单的说，就是指消息队列中的等待被主线程执行的事件。在宏任务执行过程中，v8引擎都会建立新栈存储任务，宏任务中执行不同的函数调用，栈随执行变化，当该宏任务执行结束时，会清空当前的栈，接着主线程继续执行下一个宏任务。
微任务，看定义中与(宏)任务的区别其实比较复杂，但是根据定义就可以知道，其中很重要的一点是，微任务必须是一个异步的执行的任务，这个执行的时间需要在主函数执行之后，也就是微任务建立的函数执行后，而又需要在当前宏任务结束之前。
由此可以看出，微任务的出现其实就是语言设计中的一种实时性和效率的权衡体现。当宏任务执行时间太久，就会影响到后续任务的执行，而此时因为某些需求，编程人员需要让某些任务在宿主环境(比如浏览器)提供的事件循环下一轮执行前执行完毕，提高实时性，这就是微任务存在的意义。
常见的创建宏任务的方法有setTimeout定时器，而常见的属于微任务延伸出的技术有Promise、Generator、async/await等。而无论是宏任务还是微任务依赖的都是基础的执行栈和消息队列的机制而运行。根据定义，宏任务和微任务存在于不同的任务队列，而微任务的任务队列应该在宏任务执行栈完成前清空。
这正是分析和编写类似以下复杂逻辑代码所根据的基本原理，并且做到对事件循环的充分利用。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
function taskOne() {
console.log('task one ...')
setTimeout(() => {
Promise.resolve().then(() => {
|
