js事件循环(event loop)——宏任务，微任务

前言

1.进程和线程的关系
cpu:相当于一个工厂，他承担了所有的计算任务
进程：相当于一个车间(一个进程里边可以有多个线程)（有些进程只允许一个线程，有些进程可以允许多个线程）
线程：车间里边的工人（共享同一个车间）

2.为什么JavaScript是单线程？
js作为浏览器脚本语言。
js的主要用途是与用户互动，以及操作DOM。
js语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
TML5提出Web Worker(为js创造多线程环境)标准,允许js脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。
所以，这个新标准并没有改变js单线程的本质。

**3.事件循环**
同步任务：在主线程上排队执行的任务。
异步任务：不进入主线程、而进入"任务队列"，
事件循环：只要主线程空了，就会去读取"任务队列"，这个过程是循环不断的，称为Event Loop（事件循环）。
主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。

一.宏任务，微任务的概念

	宏任务：包括整体代码script，setTimeout，setInterval。
	微任务：promise.then()，MutationObserver，process.nextTick（执行栈的最后）。
	注意：Promise的回调是立即执行的，可以理解为是一个立即执行函数

二.宏任务，微任务的执行顺序

	1.宏任务（整体代码script作为第一个宏任务执行结束）->微任务（第一轮事件循环结束了）->宏任务（我们开始第二轮循环）->微任务
	2.会在一个task（宏任务）执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 （task->浏览器渲染->task->...）

三.不同浏览器的事件循环机制不同

 	有些浏览器会把promise的回调视作一个新的宏任务而不是微任务。
	因为promises 来自于ECMAScript 的标准而不是HTML标准。
	然而，普遍的观点是promise应该属于微任务。

四.例子

  1.
    console.log('script start');
    setTimeout(function () {
     
     console.log('setTimeout');
    }, 0);
    Promise.resolve()
     .then(function () {
     
      console.log('promise1');
     })
    .then(function () {
     
     console.log('promise2'); 
     })
    console.log('script end');
    正确答案：script start, script end, promise1, promise2, setTimeout

2.
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')
    })
})

正确答案：
第一次事件循环：1 7 6 8
第二次事件循环：2 4 3 5
第三次事件循环：9 11 10 12