宏任务与微任务

宏任务：setTimeout和setInterval，Ajax，DOM事件
微任务：Promise，async/await
区别：
微任务执行时机比宏任务要早
宏任务：DOM渲染后触发，宏任务是浏览器规定的，如setTimeout
微任务：DOM渲染前触发，微任务是ES6语法规定的，如Promise

console.log(100)
setTimeout(() => {
    console.log(200);   
}); // 宏任务
Promise.resolve().then(() =>{
    console.log(300);
}) // 微任务
console.log(400);
// 100
// 400
// 300
// 200

宏任务执行顺序：
1、call stack清空（js同步的任务列表）
2、尝试DOM渲染
3、触发Event Loop
4、执行宏任务

微任务执行顺序：
1、call stack清空（js同步的任务列表）
2、执行当前微任务
3、尝试DOM渲染
4、触发Event Loop

// 大综合题目
async function async1() {  
    console.log('async1 start');// 3.1 输出
    await async2()   // 4 执行
    console.log('async1 end');// 5 异步  微任务1
}

async function async2() {  
    console.log('async2'); // 4.1 输出
}

console.log('script start');  // 1、输出

setTimeout(() => {  // 2、执行，异步，宏任务1
    console.log('setTimeout');
}, 0);

async1()  // 3、执行

// 初始化Promise，传入的函数会立刻执行
new Promise((resolve, reject) => {  
    console.log('promise1'); // 6、输出
    resolve()   // 7、异步 微任务2
}).then(() =>{
    console.log('promise2');
})
console.log('script end');// 8、输出，同步执行完毕，异步先执行微任务，再执行宏任务

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

1、输出script start
2、setTimeout，异步，宏任务1，后执行
3、执行async1()
3.1、输出async1 start
4、执行async2()
4.1、输出async2
5、await的后面都是异步，微任务1
6、初始化Promise，传入的函数会立刻执行，输出promise1
7、resolve()后面都是异步，微任务2
8、输出script end，同步执行完毕

开始执行异步，异步先执行微任务，再执行宏任务
执行微任务1，输出async1 end
执行微任务2，输出promise2
执行宏任务1，输出setTimeout