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

1. JS 是单线程

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

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

问题：

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

 console.log(1);   // 先打印1
 
 setTimeout(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 执行顺序

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

如图：

3.2 事件循环

问题：

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

分析过程：

1. 此代码中有两个异步任务，我们先给同步代码和异步代码分开：
   

2. 当主线代码执行完了之后，1,2打印完了。

3. 3s之后，定时任务时间到了，就将fn放到异步任务的任务队列中了：
   

4. 然后执行异步任务的打印3。最终出现1,2,3。

5. 如果setTimeout的回调函数的任务执行完成，异步任务队列就为空了。

6. 如果此时点击了document，onclick的回调函数就放到异步任务了
   

7. 然后执行，最终出现1,2,3，click

8. 执行完了，异步任务又会清空

9. 最后有个注意事项，主线程代码执行完成之后，会反复去异步任务中看是否有任务需要执行
   
   由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ 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>

第一个宏观任务:

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

第二个宏观任务:

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

第三个宏观任务:

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