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 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
Jun 19 Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
前端监听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
php内存缓存实现方法
2015/01/24 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
IE下使用cloneNode注意事项分享
2012/11/22 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
canvas雪花效果核心代码分享
2017/02/19 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
VUE 使用中踩过的坑
2018/02/08 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
ElementUI 修改默认样式的几种办法(小结)
2020/07/29 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
使用python模拟命令行终端的示例
2019/08/13 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
pandas apply多线程实现代码
2020/08/17 Python
PHP经典面试题
2016/09/03 面试题
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
前台文员我鉴定
2014/01/12 职场文书
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
网吧员工管理制度
2015/08/05 职场文书
关于教师节的广播稿
2015/08/19 职场文书