JS执行机制、同步和异步、宏观任务和微观任务

1. JS 是单线程

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。
比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。应该先进行添加，之后再删除。

 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

问题：

以下代码执行的结果是什么？

 console.log(1);   // 先打印1setTimeout(function () {console.log(3); // 1s钟之后打印3}, 1000);console.log(2);
// 如果是单线程，这个代码只有在打印3之后，才打印2。 时间比较久，需要等待上个定时器执行完成
// 如果是多线程，就会打印1，直接打印2，再去打印3 （实际打印：1,2,3）

那么单线程，多线程是什么呢？继续往下走：

2. 同步任务和异步任务

单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法：我们要烧水煮饭，等水开了（10分钟之后），再去切菜，炒菜。

异步

你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。比如做饭的异步做法，我们在烧水的同时，利用这10分钟，去切菜，炒菜。

JS中所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。

理解：

同步，不是两件事情同时去做，而是先做一件事情，然后再做另一件事情。他是单线程，一个人依次做多件事情

异步，是两件事情同时去做，他是多线程，多个人同时做多个事情

同步任务，异步任务

再来看一个问题：

console.log(1);setTimeout(function() {console.log(3);}, 0);
console.log(2);
// 结果还是1,2,3
// 为啥呢？继续往下走：

我们来看一下同步任务和异步任务：

了解完这一块之后，我们知道了刚刚的问题代码中，setTimeout的回调函数，是异步任务，放到任务队列了，但是为啥后执行呢？继续往下走：

3. JS执行机制

3.1 执行顺序

先执行执行栈中的同步任务。
异步任务（回调函数）放入任务队列中。（但是不执行回调函数）
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

如图：

3.2 事件循环

问题：

console.log(1);
document.onclick = function () {console.log('click');
}
console.log(2);
setTimeout(function () {console.log(3)
}, 3000)

分析过程：

此代码中有两个异步任务，我们先给同步代码和异步代码分开：
当主线代码执行完了之后，1,2打印完了。
3s之后，定时任务时间到了，就将fn放到异步任务的任务队列中了：
然后执行异步任务的打印3。最终出现1,2,3。
如果setTimeout的回调函数的任务执行完成，异步任务队列就为空了。
如果此时点击了document，onclick的回调函数就放到异步任务了
然后执行，最终出现1,2,3，click
执行完了，异步任务又会清空
最后有个注意事项，主线程代码执行完成之后，会反复去异步任务中看是否有任务需要执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

事件循环综合图：

3.3 代码思考题

 console.log(1);document.onclick = function() {console.log('click');}setTimeout(function() {console.log(3)}, 3000)console.log(2);

4.宏观任务和微观任务

4.1 宏观任务：

宿主发起的任务为宏观任务，如script(整体代码)、setTimeout、setInterval、setImmediate、I/O、ajax、UI交互事件、postMessage、MessageChannel

4.2 微观任务：

JavaScript引擎发起的任务为微观任务，如Promise.then、MutationObserver、process.nextTick(Node.js 环境)的意思就是定义出一个动作，并且让这个动作在下一个事件轮询的时间点上执行

如何分析异步执行的顺序

首先我们分析有多少个宏任务；
在每个宏任务中，分析有多少个微任务；
根据调用次序，确定宏任务中的微任务执行次序；
根据宏任务的触发规则和调用次序，确定宏任务的执行次序；
确定整个顺序;

如下代码解析：

<script type="text/javascript">
console.log('1');setTimeout(function() {console.log('2');process.nextTick(function() {console.log('3');})new Promise(function(resolve) {console.log('4');resolve();}).then(function() {console.log('5')})
})
process.nextTick(function() {console.log('6');
})
new Promise(function(resolve) {console.log('7');resolve();
}).then(function() {console.log('8')
})setTimeout(function() {console.log('9');process.nextTick(function() {console.log('10');})new Promise(function(resolve) {console.log('11');resolve();}).then(function() {console.log('12')})
})`
</script>

第一个宏观任务:

第一个宏观任务script 作为整体进入主线程遇到console.log(‘1’) 输出1
遇到setTimeout,宏观任务（现在第一个宏观任务script还没有执行完毕会分配到宏观任务中暂时还不会执行）
遇到下面的process.nextTick 分配到微观任务中
遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中 5.此时的微观任务表中：process.nextTick，Promise.then 则执行结果为 6 8
第一个宏观任务执行结果 : 1 7 6 8

第二个宏观任务:

第二个宏观任务是第一个setTimeout
跟script的执行顺序是一样的碰到console.log(‘2’) 执行2 process.nextTick会分配到微观任务 Promise会立即执行然后.then分配到微观任务
输出结果：2 4 3 5

第三个宏观任务:

第三个宏观任务就是第二个setTimeout 和第二个宏观任务执行顺序一样
输出结果 9 11 10 12