宏任务 macroTask 和微任务 microTask

什么是宏任务，什么是微任务

宏任务：setTimeout，setInterval，Ajax，DOM事件
微任务：Promise async/await
微任务执行时机比宏任务要早（记住）

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

event loop 和 DOM 渲染（再次回归一遍 event loop 的过程）

JS 是单线程的，而且和 DOM 渲染共用一个线程
JS 执行的时候，得留一些时机供 DOM 渲染

console.log('Hi');
setTimeout(function cb1() {
  console.log('cb1'); // cb1 即 callback
}, 5000);
console.log('Bye');

每次 Call Stack 清空（即每次轮询结束），即同步任务执行完；都是 DOM 重新渲染的机会，DOM 结构如有改变则重新渲染；然后再去触发下一次 Event Loop

const $p1 = '<p>一段文字</p>';
const $p2 = '<p>一段文字</p>';
const $p3 = '<p>一段文字</p>';
const $container = document.getElementById('container');
$container.append($p1);
$container.append($p2);
$container.append($p3);
// length 3
console.log('length', document.getElementById('container').children.length);
// （alert 会阻断 js 执行，也会阻断 DOM 渲染，便于查看效果）
alert('本次 call stack 结束，DOM 结构已更新，但尚未触发渲染');

微任务和宏任务的区别

宏任务：DOM 渲染后触发，如 setTimeout
微任务：DOM 渲染前触发，如 Promise，代码演示：

const $p1 = '<p>一段文字</p>';
const $p2 = '<p>一段文字</p>';
const $p3 = '<p>一段文字</p>';
const $container = document.getElementById('container');
$container.append($p1);
$container.append($p2);
$container.append($p3);
// 微任务：DOM 渲染前触发
Promise.resolve().then(() => {
  // length1 3
  console.log('length1', document.getElementById('container').children.length);
  alert('Promise then'); // DOM 渲染了吗？ - No
});
// 宏任务：DOM 渲染后触发
setTimeout(() => {
  // length2 6
  console.log('length2', document.getElementById('container').children.length);
  alert('setTimeout'); // DOM 渲染了吗？ - Yes
});

从 event loop 解释，为何微任务执行更早？

微任务是 ES6 语法规定的
宏任务是由浏览器规定的

宏任务 macroTask 和微任务 microTask ​

宏任务 macroTask 和微任务 microTask