微任务宏任务以及EventLoop详解

先总结下那些我们常用的api是宏任务，哪些是微任务。
宏任务
scripts 正常同步脚本
setTimeout 定时脚本
setInterval 定时循环执行
setImmediate node 常用浏览器端兼容差
requestAnimationFrame 按照屏幕刷新频率执行一次的时间执行
I/O 数据读取，交互事件
UI rendering 页面渲染

微任务
Promise then catch finally promise回掉
process.nextTick node环境下的语法
MutationObserver dom变化检测事件监听

本文主要讨论浏览器宿主下的任务机制。

EventLoop 是什么？
js因为是单线程执行，如果有一个任务耽误很久，后面的任务就会被堵塞。这样对于用户体验的来说是大打折扣的，于是就有了同步脚本和异步脚本，同步的脚本在主线程中执行，异步脚本会放在任务队列等同步脚本执行完了再依次调用任务队列里的任务到主线程中执行。

如上图，主线程执行，遇到异步回调函数方法压入对应的任务队列中，并继续向下顺序执行，等主线程里的同步脚本都执行完，在将从任务队列中，按照先入先出（如果有定时的，按照定时的早晚）的顺序读取异步回调函数到主线程中执行。执行完后继续回到主线程执行，如此循环不停，称为eventloop。

微任务和宏任务执行的时机？
所以一次eventloop是从主线程的同步程序开始执行的，执行的时候所有的异步任务不管是宏任务还是微任务都会压入到对应的队列里。主线程的同步程序是一个同步的宏任务，当这个宏任务执行完后，准备进入宏任务队列中调用另一个异步宏任务的时候，主线程会检测是否存在可以执行的微任务。微任务是在下一个宏任务前执行的，如上图所示。
下面通过例子来直观感受：

setTimeout(() => {//Aconsole.log(1);
}，0)
Promise.resolve().then(function() {//Bconsole.log(2);
})
console.log(3);

执行流程
1.主线程执行console.log(3)，setTimeout 宏任务会被推在任务队列中等待主线程完成。
2.主线程执行完毕，会先去检查是否有可执行的微任务。如果有，先执行微任务，执行B函数
3.如果没有可执行的微任务或者微任务执行完了，到任务队列中调用可执行的宏任务,执行A函数

所有打印的最终顺序应该是 3，2，1

再看一个例子

setTimeout(() => {setTimeout(() => { //Aconsole.log(1);}, 100)
},0)
Promise.resolve().then(function() {setTimeout(() => {//Bconsole.log(2);}, 100)
})
setTimeout(function () {//Cconsole.log(4)
}, 0)
console.log(3);

执行顺序
1.主线程执行，打印3
2.查看有无可执行的微任务，执行微任务promise，B函数压入任务队列
3.按顺序执行宏任务，导致A 和 C 回掉压入任务队列，此时队列顺序 CBA C因为是0秒，所以排在BA的前面，BA因为定时事件一致，所以按照执行的顺序排列。
5.新一轮eventloop，主线程没有可运行的，没有微任务，取队列中的任务。
所以最终打印出 3，4，2，1

微任务宏任务以及EventLoop详解相关推荐

微服务分布式配置中心Apollo详解
微服务分布式配置中心Apollo详解 1. 配置中心概述 1.1 配置中心简介 1.2 配置中心特点 1.3 配置中心对比 2. Apollo概述 2.1 Apollo简介 2.2 Apollo特点 ...
C++Windows下CONTAINING_RECORD宏的用法和详解
[cpp] view plaincopy print? #include <Windows.h> #include <stdio.h> int main() { struct ...
SOA 微服务 RPC WebService Soap关系详解
SOA.RMI.RPC.Rest.RestFul.Soap.WebService详解目录一.SOA是什么? SOA的应用场景: SOA主要的使用场景: 数据总线是什么? SOA最显著的优势 ...
C语言中宏定义使用方法详解
C语言中的宏替换详解首先看一个问题: #include <stdio.h> #define PRINT_CLINE() printf("%d", ____ ...
【微服务入门】分布式事务详解及seata的使用
一文读懂分布式事务微服务中的分布式事务问题 1 分布式事务介绍 1.1 什么是事务 1.2 本地事务 1.3 什么是分布式事务 1.3.0 假如没有分布式事务 1.4 分布式事务系统架构 1.4.1 ...
cmake 添加宏_cmake使用方法详解
CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...
认证服务器管理系统,微服务系统之认证管理详解
引言:目录: 一.简介二.用户认证三.网关及API调用认证四.系统间认证和系统内认证五.总结一.简介首先,我们来看一下什么是认证? 认证是确认当前声称为 xxx 的用户确实为 xxx 本身. ...
阿里云提示微擎被挂图片木马详解
阿里云提示: 然后找到目录文件瞅一眼是个啥,打开还真是个图片. 既然提示是木马,总的分析一下看看,exif_read_data函数读取 EXIF 头信息看下图片注释头信息: <?php @$ ...
Netty Reactor线程模型与EventLoop详解
本文来说下Netty Reactor线程模型与EventLoop 文章目录 EventLoop事件循环任务调度线程管理线程分配非阻塞传输阻塞传输 Netty线程模型单Reactor单线程模 ...

微任务宏任务以及EventLoop详解

微任务宏任务以及EventLoop详解相关推荐

最新文章

热门文章