JS事件循环中的宏任务和微任务执行顺序

2024-07-05 15:11:14

1. 宏任务和微任务事件

其中微任务的优先级高于宏任务，括号内为事件运行环境

宏任务	微任务
I/O事件/onClick点击事件	process.netTick （Node）
setTimeout	NutationObserver（浏览器）
setImmediate（Node）	Promise
setInterval
requestAnimationFrame（浏览器）

2. 优先级更清晰的版本

idle观察者 > I/O观察者 > check观察者

观察者	观察事件
idle观察者	process.netTick
I/O观察者	一般性的I/O回调，如：网络，文件数据库I/O等
check观察者	setTimeout，setImmediate

3. 详解setTimeout和setImmediate优先级

事件在浏览器中的常见概念的eventLoop和Node环境中的循环事件大致相同，最大的不同Node中事件循环分不同的阶段，详情戳链接

这两个事件同时存在仅有可能运行在node环境中，下图为node事件循环不同阶段示意图：

setTimeout(() => {console.log('setTimeout');
}, 0);
setImmediate(() => {console.log('setImmediate');
})
// 输出有两种情况
// setImmediate
// setTimeout
// 或者
// setImmediate
// setTimeout

为什么会这样子呢？

这里我们要根据前面的那个事件循环不同阶段的图解来说明一下：

首先进入的是timers阶段，如果我们的机器性能一般，那么进入timers阶段，一毫秒已经过去了（setTimeout(fn, 0)等价于setTimeout(fn, 1)），那么setTimeout的回调会首先执行。

如果没有到一毫秒，那么在timers阶段的时候，下限时间没到，setTimeout回调不执行，事件循环来到了poll阶段，这个时候队列为空，此时有代码被setImmediate()，于是先执行了setImmediate()的回调函数，之后在下一个事件循环再执行setTimemout的回调函数。

而我们在执行代码的时候，进入timers的时间延迟其实是随机的，并不是确定的，所以会出现两个函数执行顺序随机的情况。

以下两种情况setImmediate永远先于setTimeout执行：

var fs = require('fs')fs.readFile(__filename, () => {setTimeout(() => {console.log('timeout');}, 0);setImmediate(() => {console.log('immediate');});
});

setTimeout(() => {setImmediate(() => {console.log('setImmediate');});setTimeout(() => {console.log('setTimeout');}, 0);
}, 0);

4. 详解process.nextTick() 和 Promise优先级

对于这两个，我们可以把它们理解成一个微任务。也就是说，它其实不属于事件循环的一部分。

JS事件循环中的宏任务和微任务执行顺序相关推荐

事件循环中的宏任务和微任务执行顺序
事件循环中的宏任务和微任务执行顺序先来了解一下事件循环.宏任务.微任务和Promise 1.事件循环(Event Loop)运行机制执行一个宏任务(栈中没有就从事件队列中获取) 执行过程中如果遇到 ...
宏任务和微任务执行顺序_确保任务的执行顺序
宏任务和微任务执行顺序有时有必要对线程池中的任务施加一定的顺序. JavaSpecialists通讯的第206期提出了一种这样的情况:我们使用NIO从多个连接中读取数据. 我们需要确保来自给定连接的 ...
宏任务与微任务执行顺序（超详细讲解）
前言写此之前,也查阅了很多文章,并结合自己的理解,说说对Event Loop模型的理解.以及对Promise.async/await在任务队列中的影响进行了分析,也给出了多种情形的任务案例以及分析解 ...
【JS】JavaScript中的宏任务和微任务
目录概念宏任务微任务运行机制总结 js是一门单线程语言,所以它本身是不可能异步的,但是js的宿主环境(比如浏览器.node)是多线程,宿主环境通过某种方式(事件驱动)使得js具备了异步的属性 ...
简单易懂的宏任务和微任务执行顺序
背景很多朋友在写面试题:宏任务与微任务的执行时机时,容易犯迷糊.之前我也写过两篇文章,这次加上详细的讲解,让大家更容易理解. 什么是宏任务.微任务? 1.首先要称得上是宏任务.微任务的,必须是一个回 ...
JS事件循环 Event Loop
前言刚学前端的时候一直听别人说 JS 是单线程.单线程.单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的. 那么什么是线程?为什么JS是单线程的? 1. 进程和线程进程和线程的主 ...
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! !
面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...
八七、Node.js事件循环与多进程
nodejs事件循环与多进程 why 事件循环对于深入理解nodejs异步至关重要 fs, net,http,events 事件循环是企业面试中的最高频考题之一能驾驭nodejs多进程是一名资深前端 ...
JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...

最新文章

热门文章