JavaScript中的宏任务和微任务详情


Posted in Javascript onNovember 27, 2021

1、微任务有哪些

Promise

awaitasync

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

JavaScript中的宏任务和微任务详情

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中的宏任务和微任务内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
html文本框提示效果的示例代码
Jun 28 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
如何使用 vue + d3 画一棵树
Dec 03 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
前端监听websocket消息并实时弹出(实例代码)
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
利用js实现简单开关灯代码
Nov 23 #Javascript
详解Vue的列表渲染
Nov 20 #Vue.js
详解JS数组方法
Nov 20 #Javascript
详解Vue slot插槽
Nov 20 #Vue.js
详解Vue router路由
Nov 20 #Vue.js
You might like
业余方法DIY电子管FM收音机
2021/03/02 无线电
DedeCms模板安装/制作概述
2007/03/11 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vuex 的简单使用
2018/03/22 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
JavaScript中变量提升机制示例详解
2019/12/27 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
Python中操作MySQL入门实例
2015/02/08 Python
Python实现求数列和的方法示例
2018/01/12 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python实现的端口扫描功能示例
2018/04/08 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
高考考python编程是真的吗
2020/07/20 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
写给医生的感谢信
2015/01/22 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python