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 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
Jul 13 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
Apr 11 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Bootstrap CSS布局之按钮
2016/12/17 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
[41:21]夜魇凡尔赛茶话会 第三期02:看图识人
2021/03/11 DOTA
Python的类实例属性访问规则探讨
2015/01/30 Python
python图片验证码生成代码
2016/07/02 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
简单的辞职信范文
2014/01/18 职场文书
网页美工求职信范文
2014/04/17 职场文书
公司年底活动方案
2014/08/17 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
班主任工作实习计划
2015/01/16 职场文书
教师聘用意向书
2015/05/11 职场文书
大学运动会加油稿
2015/07/22 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang