js浏览器端 代码执行顺序 事件循环Event Loop 宏任务与微任务

js -> 单线程

单线程我们可以理解为：就是js代码在执行过程中，后面的代码想要执行就必须等当前代码执行完成后才可以进行。

同步任务与异步任务

先执行同步任务，再执行异步任务。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

宏任务与微任务

异步任务又分为了宏任务与微任务；其重要作用是为了增加代码执行的优先级，使其有先后顺序。
macro-task(宏任务)：

setTimeout，setInterval ，Ajax，postMessage

micro-task(微任务)：

Promise，async/await

宏任务（macrotask）一次只从队列中取一个任务执行，执行完后就去执行微任务队列中的任务；
微任务（microtask）所有的任务都会被依次取出来执行，知道microtask queue为空；

Event Loop 事件循环

1. 先执行同步任务
2. 执行微任务
3. 执行宏任务，执行完一个又开始2

当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一个事件循环中，微任务永远在宏任务之前执行。

如下图：

例子：

setTimeout(function() {
console.log('setTimeout');
})

new Promise(function(resolve) {
console.log('promise');
resolve();
}).then(function() {
console.log('then');
})

console.log('console');

大家先想一下结果，看看自己做对了吗？

解析：
setTimeout是宏任务，进入队列；new Promise 立即执行（同步任务），then是微任务，进入队列；console.log 立即执行（同步任务）；同步执行完成->微任务->宏任务
答案：

1. promise
2. console
3. then
4. setTimeout