事件循环Event Loop

javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎！(不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的)

事件循环是js实现异步的一种方法，也是js的执行机制。

首先浏览器会把主任务队列中的同步任务挨个全部执行完，然后再去等待任务队列中看哪个任务可以执行了，
然后把该执行的任务放到主任务队列中去执行，等这个任务执行完，
再去等待任务中看谁可以执行了，再把这个任务放到主任务队列中执行... 如此循环。
这种循环叫做事件循环（Event Loop）

#1.同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
#2.当指定的事情完成时，Event Table会将这个函数移入Event Queue。
#3.主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
#4.上述过程会不断重复，也就是常说的Event Loop(事件循环)。

主线程执行栈何时为空？
js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。~~~~

*     执行一个宏任务（栈中没有就从事件队列中获取）
*     执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
*     宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
*     当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
*     渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

(macro)task，可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）。
浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行，会在一个(macro)task执行结束后，在下一个(macro)task 执行开始前，对页面进行重新渲染，流程如下：

(macro)task->渲染->(macro)task->...

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）。

setTimeout(function(){
console.log('1')
});
new  Promise(function(resolve){
  console.log('2');
  resolve();
}).then(function(){
console.log('3')
});
console.log('4');//2  4  3  1

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

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

async function async1() {
    console.log('async1 start');
    let p = await async2();
    console.log(p);
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
    return new Promise(((resolve, reject) => {
        resolve(10);
    }))
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');

script start
async1 start
async2
promise1
script end
promise2
10
 async1 end
setTimeout