js中的宏任务和微任务详细讲解
微任务有哪些
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中的宏任务和微任务详细讲解的更多相关文章
- js中的宏任务与微任务
如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...
- javascript中的宏任务和微任务（一）
一.宏任务和微任务有哪些 宏任务:setTimeout,setInterval,ajax,dom,宏任务是由浏览器提供的 微任务:promise,async/await,微任务是由es6提供的 二.微 ...
- javascript中的宏任务和微任务（二）
js事件轮询执行顺序总结: 1)所有的同步任务都在主线程上执行,行成一个执行栈. 2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记. 3)主线程完成所有 ...
- JS异步之宏队列与微队列
1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待 ...
- js中的数组对象排序(方法sort()详细介绍)
定义和用法 sort() 方法用于对数组的元素进行排序. 语法 arrayObject.sort(sortby) 参数sortby:可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意 ...
- Java中UIManager的几种外观的详细讲解
Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...
- linux 中解压与压缩 常用操作详细讲解
平时有时候 会在服务器进行一些文件的操作,比如安装一些服务与软件等等,都有解压操作,一般在 导出一些简单的服务器文件,也是先压缩后再导出,因此,在这里根据平时用到解压与压缩命令的频率来记录下: 1.最 ...
- JS的var和let的区别（详细讲解）
let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版.下面我就来详细讲讲var和let的区别 相同点: var和let都有函数级作用域 不同点: (1)var是全局作用域 ...
- jQuery中$(function()与(function($)等的区别详细讲解
(function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...
- JS中EventLoop、宏任务与微任务的个人理解
为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...
随机推荐
- 协同文档：OT与CRDT实现协同编辑笔记
讲协同编辑,先回顾下从BBS.邮件,到IM 信息的异步传播 信息的生产和消费异步发生. 典型的场景如论坛,博客,文档库,邮件.我在写这篇文档的时候,你们看不到.你们看的时候,我早已写完.异步场景下,信 ...
- 直播预告 | 企业如何轻松完成数据治理？火山引擎 DataLeap 给你一份实战攻略！
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 企业数字化转型正席卷全球,这不仅是趋势所在,也是企业发展必然面对的考题,也是企业最关心.最难决策的难题,数字化不仅 ...
- 火山引擎 VeDI 零售行业解决方案 聚焦精准营销场景提升品牌转化
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 你知道,为了能让你买到合适的商品,品牌商们有多努力吗? 精准营销并不是一个新词,但近年来,随着营销渠道/平台的更加 ...
- 【eBPF-04】进阶：BCC 框架中 BPF 映射的应用 v2.0——尾调用
这两天有空,继续更新一篇有关 eBPF BCC 框架尾调用的内容. eBPF 技术很新,能够参考的中文资料很少,而对于 BCC 框架而言,优秀的中文介绍和教程更是凤毛麟角.我尝试去网上检索有关尾调用的 ...
- ES6常用知识学习札记
转载请注明出处 原文连接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么 首先弄明白ECMA和js的关系.E ...
- 创建DOM节点时出现错误信息：box.appendChild is not a function
1.代码正常书写如下 <div class="box"></div> <!-- JavaScript代码 --> <script> ...
- 20级训练赛Round #4
给20级学弟学妹们带带榜单 A - 凯少的动作序列 枚举情况替换即可 #include <bits/stdc++.h> using namespace std; using ll = lo ...
- 9、SpringBoot-mybatis-druid多源数据多源数据
系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...
- spring cloud 通过feign请求设置请求头
本文为博主原创,转载请注明出处: spring cloud 服务组件之间通过feign 的方式请求,会携带很少的基础类型的消息头参数,比如Content-Type等,但不会携带自定义或指定的请求头参数 ...
- 一文搞清楚Java中的方法、常量、变量、参数
写在开头 在上一篇文章:一文搞清楚Java中的包.类.接口 中我们讲了Java中的包.类和接口,今天继续将剩下的方法.常量.变量以及参数梳理完. Java中的变量与常量 在JVM的运转中,承载的是数据 ...