javascript中的宏任务和微任务(二)
js事件轮询执行顺序总结:
1)所有的同步任务都在主线程上执行,行成一个执行栈。
2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记。
3)主线程完成所有任务(执行栈清空),就会读取任务列队,先执行微任务队列在进行DOM渲染,最后执行宏任务队列。
4)重复执行上面步骤
为什么微任务比宏任务先触发?
宏任务:Dom渲染后触发,如settimeout
微任务:Dom渲染前触发,如promise
1 <div id="container"></div>
2 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
3 <script>
4 const p1 = $("<p>一段文字</p>")
5 const p2 = $("<p>一段文字</p>")
6 const p3 = $("<p>一段文字</p>")
7 $('#container').append(p1)
8 .append(p2)
9 .append(p3)
10
11 //微任务Dom渲染前触发
12 Promise.resolve().then(()=>{
13 console.log('length1',$('#container').children().length) //先执行为3
14 alert('Promise then')//这时候dom还没渲染
15 })
16 //宏任务Dom渲染后触发
17 setTimeout(()=>{
18 console.log('length2',$('#container').children().length)//dom已经渲染
19 alert('setTimeout')
20 })
21 </script>
上面可以看出dom渲染在微任务之后,宏任务之前
看一个宏任务微任务执行顺序的面试题目
1 async function async1(){
2 console.log('async1 start') //异步函数声明就会同步执行 2
3 await async2()
4 //后面都是异步回调callback的内容 是微任务的回调
5 console.log('async1 end') //6
6 }
7 async function async2(){
8 console.log('async2') //异步函数声明就会同步执行 3
9 }
10 console.log('script start') //1
11
12 setTimeout(()=>{ //宏任务 setTimeout进入webapis等待
13 console.log('setTimeout') //8
14 })
15
16 async1()
17
18 new Promise((resolve)=>{
19 console.log('promise1') //4 promise函数初始化声明会同步执行
20 resolve()
21 }).then(()=>{
22 console.log('promise2') //7
23 })
24 console.log('script end') //5
javascript中的宏任务和微任务(二)的更多相关文章
- javascript中的宏任务和微任务(一)
一.宏任务和微任务有哪些 宏任务:setTimeout,setInterval,ajax,dom,宏任务是由浏览器提供的 微任务:promise,async/await,微任务是由es6提供的 二.微 ...
- js中的宏任务与微任务
如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...
- JavaScript 中的正常任务与微任务
正常情况下,JavaScript的任务是同步执行的,即执行完前一个任务,然后执行后一个任务.只有遇到异步任务的情况下,执行顺序才会改变. 这时,需要区分两种任务:正常任务(task)与微任务(micr ...
- JavaScript中的跨域详解(二)
4.AJAX 同源政策规定,AJAX请求只能发给同源的网址,否则就报错. 除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制. JSONP WebSocket C ...
- JavaScript同步模式,异步模式及宏任务,微任务队列
首先JavaScript是单线程的语言,也就是说JS执行环境中,负责执行代码的线程只有一个.一次只能执行一个任务,如果有多个任务的话, 就要排队,然后依次执行,优点就是更安全,更简单.缺点就是遇到耗时 ...
- JS中EventLoop、宏任务与微任务的个人理解
为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...
- 你真的懂javascript中的 “this” 吗?
一.前言: 我们知道 "this" 是javascript语言的一个关键字,在编写javascript代码的时候,经常会见到或者用到它. 但是,有一部分开发朋友,对 "t ...
- JavaScript的事件队列(Event Queue)---宏任务和微任务
前言 在写代码的时候经常思考一个问题,到底是那个函数先执行,本身JavaScript是一门单线程的语言,意思就是按照顺序执行.但是加入一些setTimeout和promise的函数来又实现了异步操作, ...
- JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)
1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...
随机推荐
- J20航模遥控器开源项目系列教程(四)PCB打印 | 嘉立创PCB下单教程,5元顺丰包邮解君愁!
我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/J ...
- java反射 java动态代理和cglib动态代理的区别
java反射 https://blog.csdn.net/f2764052703/article/details/89311013 java 动态代理 https://blog.csdn ...
- Kafka01--Kafka生产者使用方式
Kafka之--生产者入门 前言: Kafka诞生至今,产生两个版本的生产者客户端:1是早期基于scala语言编写的客户端:2是随着Java用户的广泛涌入,kafka0.9版本开始退出Java版本的客 ...
- SpringCloud和Dubbo?
SpringCloud和Dubbo都是现在主流的微服务架构SpringCloud是Apache旗下的Spring体系下的微服务解决方案Dubbo是阿里系的分布式服务治理框架从技术维度上,其实Sprin ...
- lucence 内部结构是什么?
面试官:想了解你的知识面的广度和深度. 解答: Lucene 是有索引和搜索的两个过程,包含索引创建,索引,搜索三个要点.可以 基于这个脉络展开一些. 最近面试一些公司,被问到的关于 Elastics ...
- 名词解析-SOA
什么是SOA SOA全英文是Service-Oriented Architecture,中文意思是中文面向服务编程,是一种思想,一种方法论,一种分布式的服务架构 SOA的作用场景 SOA解决多服务凌乱 ...
- 什么是消费者驱动的合同(CDC)?
这基本上是用于开发微服务的模式,以便它们可以被外部系统使用.当我们处理 微服务时,有一个特定的提供者构建它,并且有一个或多个使用微服务的消费者. 通常,提供程序在 XML 文档中指定接口.但在消费者驱 ...
- 什么是 spring?
Spring 是个 java 企业级应用的开源开发框架.Spring 主要用来开发 Java 应用, 但是有些扩展是针对构建 J2EE 平台的 web 应用.Spring 框架目标是简化 Java 企 ...
- (stm32f103学习总结)—stm32定时器中断
一.定时器介绍 STM32F1的定时器非常多,由2个基本定时器(TIM6.TIM7).4个通 用定时器(TIM2-TIM5)和2个高级定时器(TIM1.TIM8)组成.基本定 时器的功能最为简单,类似 ...
- webpack+vue-cli+ElementUI+vue-resource 前端开发
线上商城项目(电脑0环境)1.安装node.js (参考http://www.runoob.com/nodejs/nodejs-install-setup.html): 2.安装 webpack (全 ...