JS之微任务macroTask和宏任务microTask

微任务macroTask和宏任务microTask

提示：本博客主要介绍什么是微任务什么是宏任务

---

---

一、 什么是微任务？什么是宏任务?

提示：这里简要罗列几种常见的微任务和宏任务：

宏任务： setTimeout，setInterval,Ajax,DOM事件（所有的异步，除了DOM事件不是异步）
微任务： Promise，async / await
主要区别： 微任务执行时机要比宏任务要早，微任务在DOM渲染之前，宏任务在DOM渲染之后

console.log(100);
setTimeout(()=>{
    console.log(200);
})
Promise.resolve().then(()=>{
    console.log(300);
})
console.log(400);![在这里插入图片描述](https://img-blog.csdnimg.cn/fe0ab1b694d644d7a396a94ac4e2f175.png#pic_center)

// 依次打印出： 100 400 300 200 
// 异步和出场顺序有关，但是不同类型的异步和出场类型无关

---

二、event loop 和 DOM 渲染

微任务比宏任务执行时机早的原因：
1.了解event loop的过程
2.JS是单线程的，而且和DOM渲染共用一个线程
3.JS执行的时候，要留一些时机供DOM渲染







event loop增加了DOM渲染后
1.call空闲，2，尝试DOM渲染，3，触发event loop
每次Call Stack 清空（即每次轮询结束），即同步任务执行完
都是DOm重新渲染的机会，DOM结构如有改变则重新渲染
然后再去触发下一次的Event Loop

const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
        .append($p1)
        .append($p2)
        .append($p3)


    console.log('length',$('#container').children().length)  //length为3
    // 这里我们发现在控制台length为3了，但是DOM结构还未被渲染，因为alert阻断了，当我们点击了确定后，就可DOM渲染了
    alert('本次call back 结束,DOM结构已更新,但尚未触发渲染')
    // alert 会阻断js执行，也会阻断DOM渲染，便于查看效果 

效果

三、微任务和宏任务的区别

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

代码如下（示例）：

const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
        .append($p1)
        .append($p2)
        .append($p3)


     
    // 这里我们发现在控制台length为3了，但是DOM结构还未被渲染，因为alert阻断了，当我们点击了确定后，就可DOM渲染了
    // 微任务在DOM渲染前触发
    Promise.resolve().then(()=>{
        console.log('length1',$('#container').children().length)  //length1 3
        alert('Promise then')  //DOM没渲染
    })
    // 宏任务在DOM渲染后触发
    setTimeout(()=>{
        console.log('length2',$('#container').children().length)  //length2 3
        alert('setTimeout')  //DOM渲染了
    })

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

1.call空闲，2，尝试DOM渲染，3，触发event loop
微任务Promise等他们会先在微任务队列，是和宏任务队列分开的
原因：
1，微任务是ES6语法规范的
2，宏任务是由浏览器规定的

2，任务执行顺序

1，callStack清空 2，执行当前的微任务 3，尝试DOM渲染 4，触发Event loop

文中有不正确之处，欢迎大家留言指正！