同步和异步任务
由于JavaScript是一门单线程语言，是这门语言的核心特征。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。为了解决这个问题，设计者把执行的任务分成两种：同步任务、异步任务
1.png
- 同步和异步任务进入到执行栈中，分别进入不同的执行场所，同步的进入主线程执行，异步的进入Event Table并注册函数
- 当指定的事情完成时，Event Table会将这个函数移入Event Queue
- 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
- 上述过程会不断重复，也就是常说的Event Loop(事件循环)。
// 首先打印1
console.log(1);
// 进入到Event Table，注册了回调函数打印2开始执行，2s后进入到Event Queue;
setTimeout(() => {
console.log(2);
},2000)
// 也进入到Event Table，请求成功后执行函数进入到Event Queue
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('3');
}
})
// 继续执行主线程中的任务，打印3，执行完所有的主线程任务后，在去Event Queue的任务
console.log(4);
// 1 4 2 3 也可能是1 4 3 2 (根据ajax请求的时间是否快于setTimeout)
宏任务与微任务
除了广义的同步任务和异步任务，我们对任务有更精细的定义
-
macro-task(宏任务)：
优先级：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval
-
micro-task(微任务)：
process.nextTick > Promise > MutationObserver
不同类型的任务会进入对应的事件队列中，比如
setTimeout和setInterval会进入相同的事件队列。事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。
2.png
console.log(1);
setTimeout(() => {
console.log(2);
},100)
new Promise(resolve => {
console.log(3);
resolve()
}).then(res => {
console.log(5);
})
console.log(6);
// 1 3 6 5 2
进入到整体代码(宏任务)，执行主线程打印出 1
遇到
setTimeout，将其回调函数注册后，放入异步队列，回调函数分到到宏任务执行
Promise，new Promise立即执行，打印3then函数分发到微任务执行打印6
整体代码script宏任务执行结束，检查到有执行的的微任务，打印5
第一次event loop完成，执行第2轮的宏任务，打印2
总结
一个js的执行顺序，可以理解为先分为同步和异步，再划分为宏任务还是微任务。但这2者是没有关系的
setTimeout(() => {
// 宏任务
new Promise(resolve => {
console.log('1');
resolve();
}).then(() => {
// 微任务
console.log('2');
});
// 宏任务
console.log('3');
// 宏任务
setTimeout(() => {
process.nextTick(function() {
console.log('4');
})
console.log('5');
}, 1000)
}, 1000);
//1s后执行顺序为1 3 2 5 4
- 立即执行
new Promise代码 1，then的处理放入微任务 - 执行宏任务 打印 3
- 执行宏任务开启
setTimeout，执行时往异步队列注册一个1s中后执行的函数（可以看上面的异步任务处理流程） - 宏任务执行完成后，执行微任务打印2
- 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，放入主线程执行
- 在开始新一轮的执行先宏任务也就是打印5
- 再执行微任务
process.nextTick打印4
