JavaScript同步模式,异步模式及宏任务,微任务队列
首先JavaScript是单线程的语言,也就是说JS执行环境中,负责执行代码的线程只有一个。一次只能执行一个任务,如果有多个任务的话,
就要排队,然后依次执行,优点就是更安全,更简单。缺点就是遇到耗时的任务就必须要去排队,如下图所示:

所以为了解决耗时任务阻塞执行的情况,JavaScript将任务的执行模式分为两种:同步模式和异步模式
同步模式:
下面以一段同步代码为例来分析下它的执行过程:

上图中Call stack为Js执行调用栈,Console为控制台信息,首先上述代码会在调用栈中压入一个匿名的调用(anonymous),然后代码从上往下执行到哪一步,哪一步进入调用栈,
然后打印到console控制台,然后从Call stack中弹出,继续执行下一步操作,当代码执行结束,调用栈就会被清空掉,同步模式遇到耗时的任务就要排队造成阻塞,所以为了防止代码
卡死,采用异步模式去执行,如下图所示:

如上图所示:跟同步模式相同的是代码依次执行进入调用栈中(Call stack),同步代码马上进入到控制台Console中执行,然后从调用栈(Call stack)中弹出,异步程序(SettimeOut)
从调用栈进入到web环境(Web Api)中排队,当同步代码执行完成后,消息循环(Event loop)只做一件事情,监听调用栈(Call Stack)和消息队列(Queue),当Settimeout的在web
环境中(web APIs)倒计时结束后,进入到消息队列(Queue),消息循环(Event loop)会把消息队列中的异步程序压入到调用栈(Call stack),然后控制台打印,弹出调用栈(Call stack),
程序结束。
下面介绍下异步模式中的宏任务和微任务,如下图所示:

上述图片打印的顺序为global start ->global end->promise->promise1->promise2->promise3->setTimeout按理说异步任务应该是从上往下
执行,这是因为Promise相当于宏任务的一个微任务,不会重新排队执行,而是采取插队的形式执行,而SetTimeout相当于宏任务,
重新排队执行,所以排在最后。
打个比方:银行办理业务,依次排队,排队的这些人相当于宏任务,某个人排队办了一张银行卡,又想存钱,这是两笔业务,业务员为了用户体验一般不会
让其重新排队,这个现象就可以理解为宏任务中的一个微任务。
JavaScript同步模式,异步模式及宏任务,微任务队列的更多相关文章
- 分布式缓存系统 Memcached 半同步/半异步模式
在前面工作线程初始化的分析中讲到Memcached采用典型的Master_Worker模式,也即半同步/半异步的高效网络并发模式.其中主线程(异步线程)负责接收客户端连接,然后分发给工作线程,具体由工 ...
- 半同步半异步模式的实现 - MSMQ实现
半同步半异步模式的实现 - MSMQ实现 所谓半同步半异步是指,在某个方法调用中,有些代码行是同步执行方式,有些代码行是异步执行方式,下面我们来举个例子,还是以经典的PlaceOrder来说,哈哈. ...
- 【JS】336- 拆解 JavaScript 中的异步模式
点击上方"前端自习课"关注,学习起来~ JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS ...
- 【JS】285- 拆解 JavaScript 中的异步模式
JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS.我最初接触不同的异步模式时,曾想当然的觉得 promise ...
- Half Sync And Half Async 半同步半异步模式
如题,这是一个典型的CS结构的模式,至少曾经在CS结构中用过,只是没用好.当年用UDP死活都处理不过来网络命令,用此模式轻松解决. 此模式是典型的三层架构,同步层在一个线程内处理业务逻辑:异步层接受并 ...
- 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...
- Java对多线程~~~Fork/Join同步和异步帧
于Fork/Join骨架,当提交的任务,有两个同步和异步模式.它已被用于invokeAll()该方法是同步的.是任何 务提交后,这种方法不会返回直到全部的任务都处理完了.而还有还有一种方式,就是使用f ...
- Javascript教程:js异步模式编程的4种解决方法
随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...
- javascript编程单线程之异步模式Asynchronous
异步模式Asynchronous 不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js 非常重要,没有异步任务单线程的 js 语言 ...
随机推荐
- 第8.28节 Python中使用__setattr__定义实例变量和实例方法
一. 引言 根据前面章节介绍的内容,我们知道实例变量.实例方法的定义可以通过以下方法进行: 在类体中直接定义实例变量.实例方法: 在实例方法中定义实例变量.实例方法: 在类体外调用方使用赋值语句赋值定 ...
- PyQt学习随笔:QTableWidget项sizeHint的作用以及与QHeadView的sectionResizeMode、ResizeToContents的关系
老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 在学习QTableWidgetItem的sizeHint()方法时,Qt自带材料中介绍sizeHin ...
- 第15.17节 PyQt(Python+Qt)入门学习:PyQt图形界面应用程序的事件捕获方法大全及对比分析
老猿Python博文目录 老猿Python博客地址 按照老猿规划的章节安排,信号和槽之后应该介绍事件,但事件在前面的随笔<PyQt(Python+Qt)实现的GUI图形界面应用程序的事件捕获方法 ...
- Win10 .net framework 3.5 安装失败 0x80073712 [解决了]
Win10 .net framework 3.5 安装失败 0x80073712 用了各种办法,一直解决不了. 最后用了: 使用 https://www.microsoft.com/zh-cn/sof ...
- Java 8 新特性:日期处理
1. Java 8 日期处理新特性 Java 8基于ISO标准日期系统,提供了java.time包来处理时间日期,且该包下的所有类都是不可变类型而且线程安全. 2. 关键类 Instant:瞬时实 ...
- Jmeter之登录接口参数化实战
为了纪念我走过的坑(为什么有些简单的问题就是绊住我了,还是不够细啊) Jmeter之接口登录参数化实战 因为想要在登录时使用不同的数据进行测试,所以我选择了将数据进行参数化.因为涉及到新建一个接口的功 ...
- IOS中使用.xib文件封装一个自定义View
1.新建一个继承UIView的自定义view,假设类名叫做 MyAppVew #import <UIKit/UIKit.h> @class MyApp; @interface MyAppV ...
- rbd锁引起kvm虚拟机无法启动的故障
前言 环境因为一些问题(网络,或者磁盘,或者其它各种异常),引起了集群的状态的一些变化,变化之后,集群的某些虚拟机正常某些虚拟机出现异常,异常现象就是无法启动 特别是win server2008 ,会 ...
- [日常摸鱼]poj2778 DNA Sequence
这题太神啦 题意:求长度为$n$的不包含给定DNA序列的DNA序列个数,给定的不超过10个 构建出Trie图,用$danger[i]$来表示不能走到$i$,对于DNA序列结尾的结点$danger$设为 ...
- 点击劫持(Iframe clickJack)练习
实验内容: 寻找一个合适的网站放入到iframe标签中.实验中测试了包括知网首页及登录界面.淘宝首页及登录界面,百度首页,微信下载界面.发现淘宝登录界面无法放入,会直接跳转到淘宝真实的登录界面,其他的 ...