js中的宏任务和微任务详细讲解
JS 详细 任务 讲解
2023-09-27 14:22:17 时间
微任务有哪些
Promise
await和async
宏任务有哪些
setTimeout
setInterval
DOM事件
AJAX请求
看下面的代码
<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
我的结论
先同步后异步,先微后宏
微任务的执行时机比宏任务早哈~
说说下面代码的执行时机
<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>
上面这一段代码的执行分析
肯定是先执行1-4
然后根据先微任务后宏任务
就是输出3然后弹出3
然后就是说输出2然后弹出setTimeout2 【错误的】
因为微任务和宏任务之间还有一个DOM渲染
所以然后是dom渲染,最后才是宏任务
所以输出1-4后,执行的是DOM渲染。
然后才是输出2然后弹出setTimeout2
结论和运用的场景
微任务》DOM渲染》宏任务 看下面的例子
这个结论的运用场景
我们都做过echarts.我们知道渲染echarts的时候。
需要页面的DOM渲染完毕后,才能拿到节点进行渲染。
所以有的小伙伴会请请求的时机放在monuted()这个生命周期中
这样就可以确保返回来的数据肯定能够正常渲染在页面上。
其实根据上面这个结论。
你完全可以在created中去请求数据。返回来的的时候。
DOM肯定渲染完了。因为请求是宏任务。
宏任务的执行时机是在DOM渲染后的哈
求求你了看官
如果你觉得我写的还不错的话~~
请你给我点个一个推荐或者关注我!!
或者请我买一包辣条谢谢你了~~~
相关文章
- js 定位当前城市(ip,省份,城市,邮编)接口定位(搜狐、新浪、百度、腾讯API)
- JS基础 函数进阶
- 微信小程序 - 引入使用 Moment.js 日期处理库(详细教程)
- Vue - 引入集成 Tinymce 富文本编辑器(详细步骤及运行Demo),在 Vue.js 项目中使用富文本插件详细教程,附带超级详细的注释说明
- Vue - Nuxt.js 安装引入 WangEditor V5 富文本编辑器最新版本,超详细使用教程(Nuxt.js 项目使用官方提供的示例,页面报错,刷新就会报错navigator is解决方案)
- uni-app - 最详细 H5 网页接入微信支付功能,提供从详细的示例代码与注释(移动端网页实现微信支付能力,微信公众号前端支付 JSAPI / JS-SDK 详细示例源码)官方最新超级详细教程
- uni-app - H5 网站项目接入集成 51LA 网站统计详细教程(提供 51LA.js 官方插件与引入教程)
- JavaScript - 批量替换对象数组中的属性名(快速将二维数组对象中的键名进行大量替换)传入原来的属性名和要修改的属性名即可,适用于 js vue nuxt uniapp等项目,详细示例代码教程
- 《Node.js区块链开发》——1.5 总结
- JS 这一次彻底理解插入排序
- js replaceChild
- JS实现一键回到顶部的功能(兼容所有浏览器,超级详细)
- js中offsetLeft,offsetTop,offsetParent计算边距方法
- js 赋值 要用 toString() ; 太坑了。
- 深入浅出Rhino:Java与JS互操作
- Three 之 three.js (webgl)GLSL-Card 中文手册(基础知识)
- 【曹操】【js-sequence-diagrams】前端js绘制时序图