JavaScript事件循环及宏任务微任务原理解析


Posted in Javascript onSeptember 02, 2020

首先看一段代码:

JavaScript事件循环及宏任务微任务原理解析

打印顺序是什么?

正确答案:script start, script end, promise1, promise2, setTimeout

其中涉及到事件循环(event loop),宏任务(macrotask),微任务(microtask)

一、事件循环 Event Loop

程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。

所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。

同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

一般而言,异步任务有以下三种类型:

1、普通事件,如click、resize等

JavaScript事件循环及宏任务微任务原理解析

2、资源加载,如load、error等

JavaScript事件循环及宏任务微任务原理解析

3、定时器,包括setInterval、setTimeout等

JavaScript事件循环及宏任务微任务原理解析

事件循环具体过程就是:

  • 同步任务进入主线程,异步任务进入Event Table并注册函数。
  • 当异步任务完成时,Event Table会将这个函数移入Event Queue。
  • 主线程内的任务执行完毕执行栈为空,会去Event Queue读取对应的函数,进入主线程执行。
  • 上述过程会不断重复,也就是常说的Event Loop(事件循环)。

二、宏任务与微任务

在JavaScript中,任务被分为两种,一种宏任务(MacroTask),一种叫微任务(MicroTask)。

2.1MacroTask(宏任务)

宿主环境提供的(浏览器和node)

script全部代码、setTimeout、setInterval。

浏览器为了能够使得JS内部task与DOM任务能够有序的执行,会在一个task执行结束后,在下一个 task 执行开始前,对页面进行重新渲染 (task->渲染->task->...)

2.2MicroTask(微任务)

语言标准提供的

Promise、await

async函数表示函数里面可能会有异步方法,await后面跟一个表达式,async方法执行时,遇到await会立即执行表达式,然后把await表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行

async function foo() {
  var a = await new Promise((resolve) => {
    setTimeout(() => {
      resolve(1);
    }, 2000);
  });
  console.log(a); // 第2秒时输出: 1
}
foo();

2.3宏任务与微任务执行顺序:

  • 执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务队列是否为空,如果为空的话,就执行宏任务,否则就一次性执行完所有微任务。
  • 每次单个宏任务执行完毕后,检查微任务队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务后,设置微任务队列为null,然后再执行宏任务,如此循环。

总结:同步—>微任务—>宏任务

JavaScript事件循环及宏任务微任务原理解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 #Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 #Javascript
JavaScript this关键字指向常用情况解析
Sep 02 #Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 #Javascript
JavaScript Array.flat()函数用法解析
Sep 02 #Javascript
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
手把手教你实现 Promise的使用方法
Sep 02 #Javascript
You might like
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP_MySQL教程-第一天
2007/03/18 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
js面向对象的写法
2016/02/19 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
vue-cli常用设置总结
2018/02/24 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
解决vant-UI库修改样式无效的问题
2020/11/03 Javascript
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
Weblogic和WebSphere不同特点
2012/05/09 面试题
生物制药自我鉴定
2014/01/25 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
教师辞职信范文
2015/02/28 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书