JavaScript中宏任务和微任务有哪些
小编给大家分享一下JavaScript中宏任务和微任务有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
1、微任务有哪些
Promise
await和async
2、宏任务有哪些
setTimeout
setInterval
DOM事件AJAX请求
3、案例
<script>console.log(1)setTimeout(()=>{ console.log("2")},0)Promise.resolve().then(()=>{ console.log('3')})console.log(4)</script>我们发现打印的顺序是1-4-3-2
为什么是这样的顺序？
先打印1-4这肯定是没有问题的
为啥先打印3然后才是2
因为3是Promise,Promise是微任务。
2是setTimeout，它是宏任务
微任务的执行时机比宏任务早。
所以先执行的是3然后才是2
3.1 结论
先同步后异步，先微后宏
微任务的执行时机比宏任务早哈~
4、代码案例
<body> <div id="app"></div><script>// 这一段是dom渲染的let app=document.getElementById("app")let cont='<p>我是p标签</p>'app.append(cont)// dom渲染结束console.log(1)setTimeout(()=>{ console.log("2") alert('setTimeout2')},0)Promise.resolve().then(()=>{ console.log('3') alert('3')})console.log(4)</script></body>4.1 代码分析
上面这一段代码的执行分析：
肯定是先执行1-4
然后根据先微任务后宏任务
就是输出3然后弹出3
然后就是说输出2然后弹出setTimeout2 【错误的】
因为微任务和宏任务之间还有一个DOM渲染
所以然后是dom渲染，最后才是宏任务
所以输出1-4后，执行的是DOM渲染。
然后才是输出2然后弹出setTimeout2
4.2 结论和运用的场景
微任务》DOM渲染》宏任务 看下面的例子
这个结论的运用场景
我们都做过echarts.我们知道渲染echarts的时候。
需要页面的DOM渲染完毕后，才能拿到节点进行渲染。
所以有的小伙伴会请请求的时机放在monuted()这个生命周期中
这样就可以确保返回来的数据肯定能够正常渲染在页面上。
其实根据上面这个结论。
你完全可以在created中去请求数据。返回来的的时候。
DOM肯定渲染完了。因为请求是宏任务。
宏任务的执行时机是在DOM渲染后的哈
以上是“JavaScript中宏任务和微任务有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
