|
1、微任务有哪些Promise
await和async
2、宏任务有哪些setTimeout
setInterval
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中的宏任务和微任务详情的文章就介绍到这了,更多相关JavaScript中的宏任务和微任务内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
JavaScript仿小米官网注册登录功能的实现
JS数组循环的方式以及效率分析对比 |
