任务(macro-task)

定义

消息队列中的任务称为宏任务。

⚠️:宿主环境提供的方法是宏任务,例如setTimeout, setInterval。这些都是浏览器或者Node环境实现的。js引擎自身提供的是微任务,例如Promise。基本上平时接触到的除了Promise都是宏任务

执行

不断从消息队列中取出并被事件循环执行。

类型

注意⚠️:

  • ✅代表是宏任务

 

浏览器

Node

I/O

setTimeout

setInterval

requestAnimationFrame

setImmediate

  • ⚠️:有些地方会列出来UI Rendering,说这个也是宏任务,但根据HTML规范文档,发现这很显然是和微任务平行的一个操作步骤
  • requestAnimationFrame姑且也算是宏任务吧,requestAnimationFrame在MDN的定义为,下次页面重绘前所执行的操作,而重绘也是作为宏任务的一个步骤来存在的,且该步骤晚于微任务的执行。
  • setImmediate:用于中断长时间运行的操作并在浏览器完成其他操作(例如事件和显示更新)后立即运行回调函数。
  • UI render:一轮事件循环执行结束之后,下轮事件循环执行之前开始进行UI render

微任务

产生原因

在前面我们知道其实浏览器的消息循环系统是由消息队列和事件循环配合实现的,但是后来为何又出现了微任务呢?因为消息队列中这种粗时间颗粒度的任务已经不能胜任部分领域的需求,所以又出现了一种新的技术——微任务。微任务可以在实时性和效率之间做一个有效的权衡。通常我们把消息队列中的任务称为宏任务,每个宏任务中都包含了一个微任务队列。

执行

每个宏任务都有一个微任务队列,在宏任务结束前会执行微任务里面的任务。

类别

 

浏览器

Node

Promise.then catch finally

MutationObserver

process.nextTick

MutationObserver: 提供了监视对DOM树所做更改的能力,创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

process.nextTick:定义出一个动作,并且让这个动作在下一个事件轮询的时间点上执行

宏任务微任务执行图

宏任务与微任务插图

 

参考:

浏览器工作原理与实践

https://www.cnblogs.com/amiezhang/p/11349450.html

本站资源均源自网络,若涉及您的版权、知识产权或其他利益,请附上版权证明邮件告知。收到您的邮件后,我们将在72小时内删除。
若下载资源地址错误或链接跳转错误请联系站长。站长q:770044133。

» 宏任务与微任务

发表评论

免登录下载网,提供全网最优质的资源集合!