本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我
1、关于javascript
javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。所以一切javascript版的"多线程"都是用单线程模拟出来的，一切javascript多线程都是纸老虎
2、概念
1. 宏任务：当前调用栈中执行的代码成为宏任务。（主代码块，定时器等等）。
2. 微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then，proness.nextTick等等）。 3. 宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
通俗易懂的例子：
去银行办理业务的人就是一个个宏任务，当宏任务P1在柜台办理业务时，其它任务都需等待，当一个宏任务P1办理业务结束时，柜台职员会询问他还有没有其它微任务，如果他还有其他业务，则其他宏任务都需等待。就是微任务是在宏任务之前执行。
微任务：process.nextTick、MutationObserver、Promise.then catch finally
宏任务：I/O、setTimeout、setInterval、setImmediate、requestAnimationFrame
宏任务、微任务的执行顺序：
执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
3、运行机制
1. 在执行栈中执行一个宏任务。
2. 执行过程中遇到微任务，将微任务添加到微任务队列中。
3. 当前宏任务执行完毕，立即执行微任务队列中的任务。
4. 当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染。
5. 渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（事件队列中取）。
实例剖析：1
setTimeout(function(){
console.log('1');
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3');
});
console.log('4');
- 遇到setTimout，异步宏任务，放入宏任务队列中；
- 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2；
- 而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中
- 遇到同步任务console.log(‘4’);输出4；主线程中同步任务执行完
- 从微任务队列中取出任务到主线程中，输出3，微任务队列为空
- 从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空，结束~
控制台测试一下,输出2 4 3 1；符合预期
实例剖析：2
setTimeout(()=>{
new Promise(resolve =>{
resolve();
}).then(()=>{
console.log('test');
});
console.log(4);
});
new Promise(resolve => {
resolve();
console.log(1)
}).then( () => {
console.log(3);
Promise.resolve().then(() => {
console.log('before timeout');
}).then(() => {
Promise.resolve().then(() => {
console.log('also before timeout')
})
})
})
console.log(2);
- 遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
- 遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
- 而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中
- 遇到同步任务console.log(2)，输出2；主线程中同步任务执行完
- 从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中；
- 从微任务队列中取出任务a到主线程中，输出 before timeout；
- 从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中；
- 从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空
- 从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空
- 从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空，结束~
控制台测试输出：1 2 3 before timeout also before timeout 4 test
实例剖析：3
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
