一、什么是微任務，什么是宏任務：
1.微任務：Promise、async/await
2.宏任務：setTimeout、setInterval、Ajax、DOM事件
3.微任務比宏任務執行的更早
console.log(100) setTimeout(() => { console.log(200) }) Promise.resolve().then(() => { console.log(300) }) console.log(400) // 100 400 300 200
console.log("1"); setTimeout(function () { console.log("2"); new Promise(function (resolve) { console.log("4"); resolve(); }).then(function () { console.log("5"); }); }); new Promise(function (resolve) { console.log("7"); resolve(); }).then(function () { console.log("8"); }); setTimeout(function () { console.log("9"); new Promise(function (resolve) { console.log("11"); resolve(); }).then(function () { console.log("12"); }); }); // 1 // 7 // 8 // 2 // 4 // 5 // 9 // 11 // 12
二、event loop（事件循環）和DOM渲染的關系：
JavaScript是單線程的，而且和DOM渲染公用一個線程，所以在JavaScript執行的時候，得留一些時機供DOM渲染：
https://www.cnblogs.com/starlog/p/14742720.html
三、為什么微任務比宏任務執行更早：
1.因為觸發時間不同
2.微任務：DOM渲染前觸發，如Promise、async/await
3.宏任務：DOM渲染后觸發，如setTimeout、setInterval、Ajax、DOM事件
// 修改 DOM // （alert 會阻斷 js 執行，也會阻斷 DOM 渲染，便於查看效果）
const $p1 = $('<p>一段文字</p>') const $p2 = $('<p>一段文字</p>') const $p3 = $('<p>一段文字</p>') $('#container') .append($p1) .append($p2) .append($p3) // // 微任務：渲染之前執行（DOM 結構已更新）
Promise.resolve().then(() => { const length = $('#container').children().length alert(`micro task ${length}`) // 3，看看DOM渲染了嗎？沒有
}) // 宏任務：渲染之后執行（DOM 結構已更新）
setTimeout(() => { const length = $('#container').children().length alert(`macro task ${length}`) // 3，看看DOM渲染了嗎？渲染了
})
四、微任務和宏任務的根本區別：
1.微任務是ES6語法規定的，它不經過Web APIs
2.而宏任務是瀏覽器規定的，如兩種定時器、Ajax、onclick等DOM事件
3.事件循環（event loop）機制分四步