JS前端宏任务微任务及Event Loop使用详解


Posted in Javascript onJuly 23, 2022

前言

首先我们要了解javascript是一个单线程的脚本语言,也就是说我们在执行代码的过程中不会出现同时进行两个进程(执行两段代码)。

Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous)。

同步:一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去。

异步:进程不需要一直等下去,而是继续执行下面的操作,不管其他进程的状态。当有消息返回时系统会通知进程进行处理,这样可以提高执行的效率。

进程:狭义上,就是正在运行的程序的实例。广义上,进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。描述的是CPU在运行指令及加载和保存上下文所需要的时间。

线程:是程序中一个单一的顺序控制流程。进程内一个相对独立的、可调度的执行单元,是系统独立调度和分派CPU的基本单位。指运行中的程序的调度单位。

执行栈:V8(谷歌浏览器引擎)内部维护出来的一个用来存放函数的执行上下文环境的一个栈结构。

相信有不少人和我有着一样的疑惑,既然javascript是单线程的脚本语言,那么他有什么优势呢,为什么不写成多进程的呢?

  • 单线程不仅可以节省内存同时也可以节省上下文切换时间;
  • 不会和渲染线程冲突(如果JS是双线程的,当页面渲染线程还在执行时,JS已经将渲染页面的参数修改,就会导致页面渲染出现问题)

宏任务

(macro)task,可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。

宏任务队列

  • I/O
  • UI-rendering (页面渲染)
  • script
  • setTimeout
  • setInterval
  • setImmediate (node环境下是,而浏览器环境下不是)
  • requestAnimationFrame (在浏览器环境是,而node环境不是)

requestAnimationFrame在MDN的定义为,下次页面重绘前所执行的操作,而重绘也是作为宏任务的一个步骤来存在的,且该步骤晚于微任务的执行。

微任务

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。

所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染。也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。

微任务队列

  • process.nextTick (node环境下是,而浏览器环境下不是)
  • promise.then
  • MutationObserver (在浏览器环境是,而node环境不是)

Event-Loop

上面我们讲了半天宏任务、微任务等各种任务的执行那么vent-Loop到底是个啥?

javascript是一个单进程的语言,同一时间不能处理多个任务,所以什么时候执行宏任务什么时候执行微任务呢?于是乎我们需要Event Loop-事件循环机制(计算机系统的一种运作机制)这样一个判断逻辑存在。

同步代码: js为脚本语言,对于同步代码来说,自上而下进行解释执行。

异步代码: 对于一个任务,分为多个片段来进行执行, 先执行一段,如果碰到比较耗时间的操作,比如本地或者网络io请求。 第一段开始进行io之后,把执行权交由其他任务,当io完成后再来执行后半段的任务(io操作比较耗时,在系统进行io时,主线程是空闲的)

执行顺序

1. 首先执行同步代码,这属于宏任务;

2. 当执行完所有的同步代码后,执行栈为空,检查是否有异步代码要执行;

3. 执行微任务;

4. 执行完微任务后,有必要的情况下会渲染页面;

5. 开启下一轮 Event Loop,执行宏任务中的代码;

代码在执行过程中,遇到异步代码,会将异步代码用队列装起来(挂起)

实战出真理,我们用一个?感受一下
console.log('start');          // 1
function foo(){
   console.log('foo');           
}
foo()                          // 2
setTimeout(function() {        //异步代码中的宏任务,先挂起
   console.log('setTimeout'); // 7
},1000)
new Promise(resolve =>{
   console.log('promise');    // 3
   resolve()
})
   .then(function() {        //异步代码中的微任务,先挂起
       console.log('promise1');// 5
   })
   .then(function() {        //异步代码中的微任务,先挂起
       console.log('promise2');// 6
   })
console.log('end');            // 4

我们跟着实行顺序来分析,第一步首先执行同步代码,所以首先打印出来‘start’,调用函数foo打印出来‘foo’,执行Promise函数打印出来‘promise’,最后打印出来‘end’同步代码就执行完毕,再检查是否有异步代码要执行,第三步执行微任务,所以先打印出第一微任务列表中的‘promise1’,紧接着打印第二微任务列表中的‘promise2’纯js不用渲染页面,最后开启下一轮的Event-Loop,执行宏任务中的代码,而setTimeout就是异步代码中的宏任务所以最终打印出来‘setTimeout’,最后我们来看看在谷歌浏览器中的打印效果。

JS前端宏任务微任务及Event Loop使用详解

这里有个小细节,如果将定时器setTimeout的时间设置为0呢?结果其实还是一样的,setTimeout不会因为时间而改变执行顺序,因为它仍然是异步代码中的宏任务,不会因为延迟执行的时间而改变。

结语

以上就是我对于宏任务、微任务以及事件循环机制(Event Loop)的一些浅显的认识与理解,更多关于JS宏任务微任务Event Loop的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
5个实用的JavaScript新特性
Jun 16 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 #Javascript
vue递归实现树形组件
Jul 15 #Vue.js
VUE递归树形实现多级列表
Jul 15 #Vue.js
javascript进阶篇深拷贝实现的四种方式
Jul 07 #Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 #Javascript
类和原型的设计模式之复制与委托差异
JS高级程序设计之class继承重点详解
Jul 07 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php 输出双引号"与单引号'的方法
2010/05/09 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP缓冲区用法总结
2016/02/14 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
Javascript之this关键字深入解析
2013/11/12 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python多线程编程(五):死锁的形成
2015/04/05 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python中关于浮点数的冷知识
2019/09/22 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
社区活动邀请函范文
2014/01/29 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
面试感谢信范文
2015/01/22 职场文书
欠条范文
2015/07/03 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Nginx如何配置根据路径转发详解
2022/07/23 Servers