首先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同步模式,异步模式及宏任务,微任务队列的更多相关文章

  1. 分布式缓存系统 Memcached 半同步/半异步模式

    在前面工作线程初始化的分析中讲到Memcached采用典型的Master_Worker模式,也即半同步/半异步的高效网络并发模式.其中主线程(异步线程)负责接收客户端连接,然后分发给工作线程,具体由工 ...

  2. 半同步半异步模式的实现 - MSMQ实现

    半同步半异步模式的实现 - MSMQ实现 所谓半同步半异步是指,在某个方法调用中,有些代码行是同步执行方式,有些代码行是异步执行方式,下面我们来举个例子,还是以经典的PlaceOrder来说,哈哈. ...

  3. 【JS】336- 拆解 JavaScript 中的异步模式

    点击上方"前端自习课"关注,学习起来~ JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS ...

  4. 【JS】285- 拆解 JavaScript 中的异步模式

    JavaScript 中有很多种异步编程的方式.callback.promise.generator.async await 甚至 RxJS.我最初接触不同的异步模式时,曾想当然的觉得 promise ...

  5. Half Sync And Half Async 半同步半异步模式

    如题,这是一个典型的CS结构的模式,至少曾经在CS结构中用过,只是没用好.当年用UDP死活都处理不过来网络命令,用此模式轻松解决. 此模式是典型的三层架构,同步层在一个线程内处理业务逻辑:异步层接受并 ...

  6. 浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解

    一.同步和异步的概念. 同步:即按代码的顺序执行任务. 在下列代码中,按照同步概念,则是先打印1后打印2. console.log(1); console.log(2); 异步:即执行一个任务的同时执 ...

  7. Java对多线程~~~Fork/Join同步和异步帧

    于Fork/Join骨架,当提交的任务,有两个同步和异步模式.它已被用于invokeAll()该方法是同步的.是任何 务提交后,这种方法不会返回直到全部的任务都处理完了.而还有还有一种方式,就是使用f ...

  8. Javascript教程:js异步模式编程的4种解决方法

    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...

  9. javascript编程单线程之异步模式Asynchronous

    异步模式Asynchronous 不会等待这个任务结束才开始执行下一个任务,开启之后立即执行下一个任务,后续逻辑一般会通过回调函数的方式定义,异步模式对js 非常重要,没有异步任务单线程的 js 语言 ...

随机推荐

  1. 转:Python2字符编码问题汇总

    这篇文章的部分问题在Python3以后不再存在,老猿只是觉得文章的部分内容还是有参考价值,因此在此原文转发连接: Python2字符编码问题汇总

  2. sourcetree的使用(配合git)

    主要讲解sourcetree的使用,是一个git提交的可视化软件,在官网上下载(windows,mac都有) 一路下载安装 首先,为了给本地sourcetree一个私钥,我们需要先下载git,然后在g ...

  3. hugegraph 数据存取数据解析

    hugegraph 是百度开源的图数据库,支持hbase,mysql,rocksdb等作为存储后端.本文以EDGE 存储,hbase为存储后端,来探索是如何hugegraph是如何存取数据的. 存数据 ...

  4. java视频流的断点续传功能

    项目中需要实现浏览器中视频的拖动问题解决 /** * 视频文件的断点续传功能 * @param path 文件路径 * @param request request * @param response ...

  5. 【学习笔记】最小直径生成树(MDST)

    简介 无向图中某一点(可以在顶点上或边上),这个点到所有点的最短距离的最大值最小,那么这个点就是 图的绝对中心. 无向图所有生成树中,直径最小的一个,被称为 最小直径生成树. 图的绝对中心的求法 下文 ...

  6. MySQL技术内幕InnoDB存储引擎(一)——MySQL体系结构和存储引擎

    1.数据库和实例 数据库(database)和实例(instance)不能混淆. 什么是数据库 数据库是物理操作系统文件或其他文件类型的集合.说白了,就是存储着的文件,不会运行起来,只能被实例增删改查 ...

  7. MySQL(一):MySQL数据库事务与锁

    基本概念 事务是指满足ACID特性的的一组操作,可以通过Commit提交事务,也可以也可以通过Rollback进行回滚.会存在中间态和一致性状态(也是真正在数据库表中存在的状态) ACID Atomi ...

  8. sqli-labs less-24(二次注入)

    less-24 原理: 在网站处理用户提交的数据的时候,只是将某些敏感字符进行了转义.因而使得用户第一次提交的时候不会被当做代码执行.但是这些数据存入数据库的时候却没有转义,而网站程序默认数据库中的数 ...

  9. 精尽Spring MVC源码分析 - 文章导读

    该系列文档是本人在学习 Spring MVC 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释 Spring MVC 源码分析 GitHub 地址 进行阅读 Spring 版本:5.2. ...

  10. docker 添加Portainer容器图形化管理工具

    主要参照了这边博客,但还是有些问题https://www.cnblogs.com/Bug-Hunter/p/12023130.html 比如端口9000得开启,docker端口映射得开启,得开启ip4 ...