JS事件循环机制event loop宏任务微任务原理解析


Posted in Javascript onAugust 04, 2020

首先看一段代码

async function (){
		await f2()
		console.log('f1')
	}

	async function f2(){
		console.log('f2')
	}
	
	console.log('正常1')
	f1()
	setTimeout(()=>{
		console.log('定时器')
	})
	console.log('正常2')

正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器

为什么会出现这样打印顺序呢

首先javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。既然js是单线程,那就像只有一个窗口的银行,客户需要排队一个一个办理业务,同理js任务也要一个一个顺序执行。如果一个任务耗时过长,那么后一个任务也必须等着。所以就出现了同步任务和异步任务。

概念

除了广义的同步任务和异步任务,对任务可以进行更精细的区分

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval
  • micro-task(微任务):Promise,process.nextTick

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

鼠标点击会触发一个事件回调,需要执行一个宏任务,然后解析HTMl

微任务:微任务通常来说就是需要在当前 同步任务 执行结束后立即执行的任务,比如对一系列动作做出反馈,或者是需要异步的执行任务而又不需要分配一个新的任务,这样便可以减小一点性能的开销。

既然我们清楚了概念,我们再看一遍代码

async function (){
		await f2()
		console.log('f1')
	}

	async function f2(){
		console.log('f2')
	}
	
	console.log('正常1')
	f1()
	setTimeout(()=>{
		console.log('定时器')
	})
	console.log('正常2')

执行顺序

首先我们进行正常的同步流程,打印出‘正常1',接下来执行f1()函数,await后面的函数f2()会立即执行,所以会打印'f2',继续执行同步代码打印‘正常2',至此同步任务全部结束,开始执行异步任务微任务,await f2()等待f2()方法执行完之后打印出f1,最后执行宏任务setTimeout打印‘定时器'

这就是为什么‘正常1',正常2'会打印在‘f1'之前,因为所有微任务执行的时候,当前执行栈的代码必须已经执行完毕。‘f2','f1'会打印在‘定时器'之前是因为所有微任务总会在下一个宏任务之前全部执行完毕

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

Javascript 相关文章推荐
jquery随意添加移除html的实现代码
Jun 21 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
解决微信小程序防止无法回到主页的问题
Sep 28 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
解决vue addRoutes不生效问题
Aug 04 #Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
详解JS深拷贝与浅拷贝
Aug 04 #Javascript
You might like
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
php获取错误信息的方法
2015/07/17 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
2014/07/28 Javascript
js格式化时间小结
2014/11/03 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python机器学习之KNN分类算法
2018/08/29 Python
Django 请求Request的具体使用方法
2019/11/11 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
印尼美容产品购物网站:PerfectBeauty.id
2017/12/01 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
关于护士节的演讲稿
2014/05/26 职场文书
校园环保标语
2014/06/13 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书