JavaScript是单线程的编程语言,只能同一时间内做一件事。但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行,这就是因为JS有事件循环机制。

事件循环流程总结

  1. 主线程开始执行一段代码, 假设开始执行一个 script 标签内的代码,将代码放入执行栈中执行,同步代码优先执行,执行过程中,当遇到任务源时,判断是宏任务还是微任务。
  2. 如果是宏任务,加入到宏任务队列中,如果是微任务,加入到微任务队列中。
  3. 同步代码执行完成,执行栈空闲,检查微任务队列中是否有可执行任务,如果有,依次执行所有微任务队列中的任务。如果没有。当前任务执行结束。
  4. 渲染UI。
  5. 检查宏任务队列是否有可执行的宏任务,如果有,取出队列中最前面的那个宏任务,加入到执行栈中开始执行,然后重复前面步骤,直到宏任务队列中所有任务执行结束。

async/await执行顺序

我们知道async隐式返回 Promise 作为结果的函数,那么可以简单理解为,await后面的函数执行完毕时,await会产生一个微任务(Promise.then是微任务)。
 
但是我们要注意这个微任务产生的时机,它是执行完await之后,直接跳出async函数,执行其他代码(此处就是协程的运作,A暂停执行,控制权交给B)。
 
其他代码执行完毕后,再回到async函数去执行剩下的代码,然后把await后面的代码注册到微任务队列当中。

示例

  1. // 今日头条面试题
  2. async function async1() {
  3. console.log('async1 start')
  4. await async2()
  5. console.log('async1 end')
  6. }
  7.  
  8. async function async2() {
  9. console.log('async2')
  10. }
  11.  
  12. console.log('script start')
  13.  
  14. setTimeout(function () {
  15. console.log('settimeout')
  16. })
  17.  
  18. async1()
  19.  
  20. new Promise(function (resolve) {
  21. console.log('promise1')
  22. resolve()
  23. }).then(function () {
  24. console.log('promise2')
  25. })
  26.  
  27. console.log('script end')
  28.  
  29. // 'script start' => 'async1 start' => 'async2' => 'promise1' => 'script end' => 'async1 end' => 'promise2' => 'settimeout'
  1. const p = Promise.resolve();
  2.  
  3. (async () => {
  4. await p;
  5. console.log('await end');
  6. })();
  7.  
  8. p.then(() => {
  9. console.log('then 1');
  10. }).then(() => {
  11. console.log('then 2');
  12. });
  13. // 'then 1' => 'then 2' => 'await end'
  1. // 1. 开始执行
  2.  
  3. console.log(1) // 2. 打印 1
  4.  
  5. setTimeout(function () { // 6. 浏览器在 0ms 后,将该函数推入任务队列
  6. console.log(2) // 7. 打印 2
  7. Promise.resolve(1).then(function () { // 8. 将 resolve(1) 推入任务队列 9. 将 function函数推入任务队列
  8. console.log('ok') // 10. 打印 ok
  9. })
  10. }) // 3.调用 setTimeout 函数,并定义其完成后执行的回调函数
  11.  
  12. setTimeout(function () { // 11. 浏览器 0ms 后,将该函数推入任务队列
  13. console.log(3) // 12. 打印 3
  14. }) // 4. 调用 setTimeout 函数,并定义其完成后执行的回调函数
  15.  
  16. // 5. 主线程执行栈清空,开始读取 任务队列 中的任务
  17.  
  18. // output: 1 2 ok 3

 

javaScript 事件循环机制的更多相关文章

  1. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

  2. javascript事件循环机制 浅尝手记

    引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...

  3. 深入理解JavaScript事件循环机制

    前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...

  4. 深入浅出Javascript事件循环机制

    一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...

  5. 浏览器中的JavaScript事件循环机制

    浏览器的事件循环机制是HTML中定义的规范. JavaScript有一个主线程和调用栈,所有的任务都会被放到调用栈等待主线程执行. JS调用栈 是一种先进后出的数据结构.当函数被调用时,会被添加到栈中 ...

  6. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  7. JavaScript事件循环机制

    事件循环 事件循环不仅仅包含事件队列,而是具有至少两个队列,除了事件,还要保持浏览器执行的其他操作.这些操作被称为任务,并且分为两类:宏任务(或通常称为任务)和微任务. 单次循环迭代中,最多处理一个宏 ...

  8. 一道面试题引发对javascript事件循环机制(Event Loop)的 思考(这里讨论针对浏览器)

  9. JS浏览器事件循环机制

    文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. ...

随机推荐

  1. Git技法:.gitignore、移除暂存与撤销修改

    1. .gitignore常见项目添加 1.1 .gitignore模板 .gitignore针对每个语言都有对应的模板,在GitHub创建项目时就可以选择(你可以在GitHub提供的.gitigno ...

  2. 每天一个 HTTP 状态码 200

    200 OK 话不多说,这个状态码应该是最最最常用的了,无人不知,无人不晓: 就是表示请求成功的意思,你若安好,便是晴天. 摘自对于 https://www.google.com/ GET 请求的响应 ...

  3. Python模块Ⅰ

    Python模块Ⅰ part1 模块的定义/取别名 自定义模块 什么是模块:模块的本质就是.py文件,封装语句的最小单位 模块中出现的变量,for循环,if结构,函数定义...称为模块成员 模块的运行 ...

  4. CentOS6.5修改镜像源问题

    千呼万唤使出来阿,随着centos版本不断地更新好多镜像源已经被放弃了治疗,尤其是低版本的centos,下面以CentOS6.5为例进行刨析吧! 上干货: 配置文件 vi /etc/yum.repos ...

  5. .NET C#基础(6):命名空间 - 组织代码的利器

    0. 文章目的   面向C#新学者,介绍命名空间(namespace)的概念以及C#中的命名空间的相关内容 1. 阅读基础   理解C与C#语言的基础语法 2. 名称冲突与命名空间 2.1 一个生活例 ...

  6. Java编码安全

    目录 Java编码安全 数据校验 规则1.1:校验跨信任边界传递的不可信数据 规则1.2:禁止直接使用不可信数据来拼接SQL语句 规则1.4:禁止直接使用不可信数据来记录数据 规则1.6:验证路径前将 ...

  7. flowable与camunda性能测试对比分析

    前言 目前主流的Java开源流程引擎有Activiti.Flowable.Camunda,笔者在进行流程引擎技术选型时,除了功能方面,性能和稳定性是尤其关注的指标,是选择Flowable?还是Camu ...

  8. redis击穿,穿透,雪崩,分布式锁,api(jedis,luttuce)

    击穿:(redis做缓存用,肯定发生了高并发,到达数据库查询) 设置key 的过期时间,过期后没有这个key,找不到了,就穿过了(其中一个key过期导致并发访问数据库) LRU (LRU,即:最近最少 ...

  9. C语言学习之我见-malloc和free内存申请及释放函数

    malloc函数负责向计算机申请确定大小的内存空间. free函数负责释放malloc的申请空间. (1)函数原型 void free(void *_Memory); void * malloc(si ...

  10. 全新升级的AOP框架Dora.Interception[4]: 基于Lambda表达式的拦截器注册方式

    如果拦截器应用的目标类型是由自己定义的,Dora.Interception(github地址,觉得不错不妨给一颗星)可以在其类型或成员上标注InterceptorAttribute特性来应用对应的拦截 ...