宏、微任务

setTimeout(() => {
  console.log(2);
});
console.log(1);

// 毋庸置疑，先输出了1，再输出2
// js任务队列不是按顺序执行的，而是有一个先后顺序。

JS 任务可分为：宏任务（macroTask）、微任务（microTask）

宏任务

• 1. script (可以理解为外层同步代码)
• 2. UI rendering/UI事件
• 3. setImmediate，I/O（Node.js）
• 4. postMessage，MessageChannel
• 5. setTimeout/setInterval

** 微任务**

• 1. process.nextTick（Node.js）
• 2. MutaionObserver
• 3. Promise

var d = document.getElementsByClassName('body')[0]
for(var i=0; i<20000; i++){
    d.append(4)
}

console.log(2)

setTimeout(() => {
    alert('setTimeout')//DOM 渲染了
});

// 微任务： DOM渲染前触发
Promise.resolve().then(() => {
    alert('Promise then') //DOM没渲染
});

//执行顺序
/*
  宏任务：1、script(同步),2、render(dom操作),3、setTimeout
  微任务：1、promise.then
  1.宏任务同步代码
    var d;
    for循环
    console.log(2)
  2.微任务执行
    promise.then，打印alert
  3.宏任务ui dom操作
    d = document.getElementsByClassName('body')[0]
    d.append(4)
  4.微任务没有
  5.宏任务setTimeout执行
*/

console.log(1) // 宏任务1

setTimeout(()=>{ // 宏任务2
    console.log(2)
    setTimeout(()=>{ // 宏任务5
      console.log(3)
    })
    new Promise((resolve) => {
        console.log(6)
        resolve()
    }).then(()=>{ // 微任务2
        console.log(7)
        setTimeout(()=>{
            console.log(9)
        })
        new Promise((resolve)=>{
            console.log(10)
            resolve()
        }).then(()=>{ // 微任务3
            console.log(11)
        })
    })
})

new Promise((resolve) => {
    console.log(4)
    resolve()
}).then(() => { // 微任务1
    console.log(5)
})

setTimeout(()=>{ // 宏任务3
    console.log(3)
})

setTimeout(()=>{ // 宏任务4
    console.log(8)
})

宏任务1（同步代码）输出1，4
微任务Promise.then输出5
宏任务2第一个定时器执行，输出同步代码2，6
微任务Promise.then执行，新的宏任务出现（同步代码）
同步代码先执行，输出7，10
微任务Promise.then执行，新的宏任务加入宏任务队列（同步代码）
同步代码先执行，输出11
微任务没有了，跳过
宏任务3执行
微任务没有了，跳过
宏任务4执行
微任务没有了，跳过
宏任务5执行

**<u>如有错误，欢迎纠正</u>**