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 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
javascript页面倒计时实例
Jul 25 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
npm 更改默认全局路径以及国内镜像的方法
May 16 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
解决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脚本加密专家php解密算法
2020/09/13 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Maps Javascript
2007/01/22 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
js数组的操作详解
2013/03/27 Javascript
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
Python Django基础二之URL路由系统
2019/07/18 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
涨价通知怎么写
2015/04/23 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
六一亲子活动感想
2015/08/07 职场文书