微任务/宏任务 实例详解

什么是宏任务 macroTask，什么是微任务microTask？

• 宏任务：setTimeout、setInterval, Ajax，DOM事件
• 微任务：Promise async/await
• 微任务执行时机比宏任务要早

宏任务、微任务和DOM渲染，在Event Loop的过程？

WechatIMG703.png

$('#container').append($p1).append($p2).append($p3)

// 宏任务：DOM渲染后触发
setTimeout(() => {
    console.log('length2', $('#container').children.length)//3
    alert('setTimeout')//DOM 渲染了
});
// 微任务： DOM渲染前触发
Promise.resolve().then(() => {
    console.log('length1', $('#container').children.length)//3
    alert('Promise then') //DOM没渲染
});

// 执行顺序
// alert('Promise then')
// 渲染节点
// alert('setTimeout')

1. 在Call Stack空闲时（即每次轮询结束），同步任务执行完
2. 执行当前的微任务
3. 尝试DOM渲染
4. 触发 Event Loop，执行callback Queue里的宏任务

宏任务、微任务和DOM渲染的关系？【macro-micro2.js】

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

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

为什么微任务执行时机比宏任务要早?

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

微任务/宏任务的根本区别

微任务是ES6语法规定的,
遇到微任务（如Promise）时,
会等待时机放在 【micro task queue】 微任务队列
不会放在web API处理事件，因为Promise是ES规范，不是W3C规范

宏任务是由浏览器规定的，
遇到宏任务（如setTimout）时,
会放在web API 处理事件等待回调,因为setTimout是是W3C规范
回调后放在【callback queue】回调队列
等待Event Loop