经久不衰的话题:Js的宏任务(marcroTask)和微任务(microTask)

Posted 2022-11-05 毕竟我是崔战神阿

文章目录

• 前言
• 一、什么是事件循环(Event loops)?
• 二、什么是宏任务和微任务?
• • 1. 宏任务
  • 2. 微任务
• 总结
• • 明天,又是充满希望的一天!

---

前言

最近工作量比较少,闲暇时间看技术博客,一篇关于JS语言设计跟任务机制的博客读起来让我受益匪浅。温故而知新，决定本月博客主题为宏任务(marcroTask)和微任务(microTask)

---

一、什么是事件循环(Event loops)?

事件循环负责收集所有的代码层面的事件(包括操作者和非操作者的),把代码指定成任务进行排队。
然后在合适的时候进行回调,回调一开始,会寻找对应的等待中由代码汇合成的任务(宏任务和微任务),
在下一次循环的时候执行渲染和绘制操作(绘制部分页面和css样式)。
值得注意的是,有一些业务中出现的问题,很可能是就是由于这个事件循环机制导致的。

举个例子:我们常常在使用iframe对接第三方的时候,会出现如iframe会诸塞父级页面css等文件加载的情况
我们常常需要动态脚本等方式进行处理,才能优雅的解决这个问题,这是因为在特定情况下，同源窗口之间共享事件循环
如:

1. 如果一个窗口打开了另一个窗口，它们可能会共享一个事件循环。
2. 如果窗口是包含在 iframe 中，则它可能会和包含它的窗口共享一个事件循环。
3. 在多进程浏览器中多个窗口碰巧共享了同一个进程。

二、什么是宏任务和微任务?

首先让我们看一下JS的编译模式相关解释:

注意其中的一句话如果一条运行不了,那么下面的语言也无法运行,显而易见说明JS为单线程语言
但是随着计算机性能的迅速发展,很明显这种模式已经跟不上性能的发展,
JS需要突破,需要一种可以提供异步编程的能力
或者说一种可以跳出队列的解析能力
于是，便有了本文的两大主角:宏任务和微任务。

举个例子：家没菜了,但是要吃饭,这个时候谁下去买菜?
答案肯定是家庭地位最高的我
1.我准备出门去买菜
2.这时候我妈让我带点调味料
3.然后我妹又说让我带杯奶茶
那么我的决策就是:优先去菜市场买菜,然后去买调味料,再去给我妹带奶茶
优先级最高的为买菜,那么这个买菜就可以称之为宏任务,宏任务完成了之后会去做微任务

目前JS可以说绝大部分都是宏任务,微任务毕竟是个别情况需要
下图简单的说明了他们俩之间的关系和运行顺序

在一次Event Loop里面,
各种代码被统称为任务,它们会根据上图的任务队列规则进行执行。

一个程序员宏任务和微任务是否了解已经逐渐成为面试必考的流程,不再细说。
下面列一下主流的宏任务和微任务

1. 宏任务

script(整体代码)//整个项目整体会被编译成宏任务
setTimeout//开发时候偶尔使用这个可以在数据收集完成之后再执行你的数据操作,防止数据拿不到的情况,$nextTick也是基于这个实现
setInterval//常用于写定时器,时钟这种逻辑,但是可能会栈溢出,要注意清除定时器
I/O//数据流交换
UI交互事件//页面点击事件等等
postMessage //常用于iframe里,iframe点击向父页面点击传递信息
MessageChannel //常用于两个页面(或者iframe)通信建立通道时
setImmediate(Node.js 环境) //node版本的$nextTick

2. 微任务

Promise.then //可以是宏任务也可以是微任务,很神奇的一个方法
Object.observe //如果你经常看vue代码,你会发现vue2里面就有这个observe,这个方法用来监听对象数据的变化
MutationObserver //监听指定DOM结构树发生变化的方法
process.nextTick(Node.js 环境)//node里保证方法在对象完成构造后但是在数据交互发生前调用。

总结

好记性不如烂笔头
随时随地给自己对项目的状态进行实时的记录,想来以后回忆起来也是极美的

明天,又是充满希望的一天!

最后放上一张镇楼图