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 相关文章推荐
js清理Word格式示例代码
Feb 13 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
canvas 实现中国象棋
Feb 17 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
JavaScript提升机制Hoisting详解
Oct 23 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
解决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 中的输出缓冲
2006/12/21 PHP
dedecms系统常用术语汇总
2007/04/03 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
浅谈node的事件机制
2017/10/09 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python实现列表的排序方法分享
2019/07/01 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
django正续或者倒序查库实例
2020/05/19 Python
python3中编码获取网页的实例方法
2020/11/16 Python
HTML5 Web 存储详解
2016/09/16 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
给海归自荐信的建议
2013/12/13 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
六一儿童节开幕词
2015/01/29 职场文书
个人年终总结开头
2015/03/06 职场文书
建议书的格式及范文
2015/09/14 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python