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

事件循环流程总结

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

async/await执行顺序

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

示例

// 今日头条面试题
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
} async function async2() {
console.log('async2')
} console.log('script start') setTimeout(function () {
console.log('settimeout')
}) async1() new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
}) console.log('script end') // 'script start' => 'async1 start' => 'async2' => 'promise1' => 'script end' => 'async1 end' => 'promise2' => 'settimeout'
const p = Promise.resolve();

(async () => {
await p;
console.log('await end');
})(); p.then(() => {
console.log('then 1');
}).then(() => {
console.log('then 2');
});
// 'then 1' => 'then 2' => 'await end'
// 1. 开始执行

console.log(1)     // 2. 打印 1

setTimeout(function () {    // 6. 浏览器在 0ms 后,将该函数推入任务队列
console.log(2) // 7. 打印 2
Promise.resolve(1).then(function () { // 8. 将 resolve(1) 推入任务队列 9. 将 function函数推入任务队列
console.log('ok') // 10. 打印 ok
})
}) // 3.调用 setTimeout 函数,并定义其完成后执行的回调函数 setTimeout(function () { // 11. 浏览器 0ms 后,将该函数推入任务队列
console.log(3) // 12. 打印 3
}) // 4. 调用 setTimeout 函数,并定义其完成后执行的回调函数 // 5. 主线程执行栈清空,开始读取 任务队列 中的任务 // 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. 学习Linux须知1.0之Linux相关概念、工具(yum、vim)、防火墙等

    温馨提示:重点掌握的前面都标注了 ☆ 一.Linux 是什么? Linux 是一个操作系统. 我们的 Linux 主要是系统调用和内核那两层. 当然直观地看,我们使用的操作系统还包含一些在其上运行的应 ...

  2. axios的请求参数格式(get、post、put、delete)

    1.get请求方式: axios.get(url[, config]) // [字符拼接型]axios.get(url?id=123&status=0') // 等同于 axios.get(u ...

  3. Spring Ioc源码分析系列--容器实例化Bean的四种方法

    Spring Ioc源码分析系列--实例化Bean的几种方法 前言 前面的文章Spring Ioc源码分析系列--Bean实例化过程(二)在讲解到bean真正通过那些方式实例化出来的时候,并没有继续分 ...

  4. Java - 四种引用类型及应用场景

    1. 强引用 new 一个对象的时候,就是强引用 Object object = new Object(); 只要强引用存在,垃圾回收就不会回收该对象,内存不足时会抛出OOM. 2. 软引用 定义:非 ...

  5. pytorch基础常识

     

  6. Linux切换中英文输入

    使用xshell登录Linux服务器后,输入的命令正确但是提示命令不存在,这是什么鬼. 通过移动光标可以发现两种字体的宽度不一样 解决方法 shift + 空格 进行切换

  7. 1.4 操作系统的其余功能 -《zobolの操作系统学习札记》

    1.4 操作系统的其余功能 操作系统除了虚拟化.并发.存储管理三个主要功能,还有许多子功能,我主要介绍几种常见的功能比如 目录 1.4 操作系统的其余功能 稳定性 高性能 隔离保护 易用性(可视化) ...

  8. vue2和vue3生命周期的区别

    概念 首先,我们了解一下"生命周期"这个词.通俗的来说,生命周期就是一个事务从出生到消失的过程.例如,一个人从出生到去世.在vue中,vue的生命周期是指,从创建vue对象到销毁v ...

  9. Vue关于echats的使用(浅显易懂)

    安装 npm install echarts --save 引入 (全局) main.js import * as echarts from 'echarts'; Vue.prototype.$ech ...

  10. 8.4 苹果macOS电脑如何安装Java开发环境(JDK)

    和Windows电脑安装差不多. 下载 来到JDK官方下载界面,点击Java SE 8(简称JDK 8)后面的JDK下载,来到该界面,先同意协议,然后下载对应平台的JDK,我们这里下载Mac OS X ...