宏任务和微任务

简介: 宏任务和微任务

一,什么是宏任务什么是微任务?

宏任务(Macro Tasks)和微任务(Micro Tasks)是指在JavaScript中异步任务队列中执行的不同类型任务。

二,宏任务

宏任务(Macro Tasks)包括以下几种:

主代码块:JavaScript中的主线程代码。

setTimeout和setInterval:定时器任务。

I/O操作:例如文件读写、网络请求等。

UI渲染:浏览器需要重绘或者重新布局的任务。

三,微任务

微任务(Micro Tasks)包括以下几种:

Promise回调函数:Promise对象的处理程序(then、catch、finally)。

MutationObserver:监测DOM变化的任务。

process.nextTick(Node.js环境下):在当前"执行栈"结束后立即执行的任务。

四,哪些算是宏任务

用户交互事件:例如点击、滚动、输入等用户操作触发的事件。

setTimeout 和 setInterval:通过定时器触发的任务。

网络请求完成事件:例如 Ajax 请求完成时触发的事件。

文件读写操作:包括读取文件、写入文件等涉及到 I/O 操作的任务。

页面解析和渲染:包括 DOM 解析、CSS 解析、页面布局和绘制等与页面渲染相关的任务。

requestAnimationFrame:用于执行动画效果的任务。

五,哪些算是微任务

Promise 回调函数:Promise 对象的处理程序(.then、.catch、.finally)中的回调函数都是微任务。

MutationObserver:用于监测 DOM 变化的任务。

process.nextTick(在 Node.js 环境下):在当前执行栈结束后立即执行的任务。

queueMicrotask():用于将一个微任务添加到微任务队列中。

六,宏任务和微任务的执行顺序

在事件循环(Event Loop)中,当主线程空闲时,会从宏任务队列中选择一个任务进行执行。当一个宏任务执行完毕后,会检查是否有微任务队列,如果有,则将微任务队列中的所有任务依次执行完毕,然后再继续选择下一个宏任务执行。这样的过程循环进行,形成了事件循环。

总结来说,宏任务代表着较大粒度的任务,而微任务代表着较小粒度的任务。微任务通常在宏任务执行完毕后立即执行,因此微任务具有更高的优先级,可以在页面渲染前执行,从而提供更好的用户体验。

 

相关文章
|
前端开发 JavaScript API
宏任务与微任务执行顺序及对比记录
宏任务与微任务执行顺序及对比记录
321 0
|
安全 前端开发 持续交付
package-lock.json
package-lock.json
|
8月前
|
监控 物联网 大数据
应急物资智能仓储系统解决方案
凌讯应急物资智能仓储系统集成了物联网、云计算、大数据等技术,实现了物资实时监控、精准定位和智能调度。通过RFID、二维码等自动识别技术,确保信息准确更新,支持移动端操作,快速响应突发事件,提供定制化解决方案,优化跨部门协作,提高救援效率,降低风险。
305 47
|
12月前
|
缓存
Vue3 的 computed 和 watch 函数有哪些不同?
Vue3 的 computed 和 watch 函数有哪些不同?
|
11月前
|
存储 JavaScript 前端开发
为什么基础数据类型存放在栈中,而引用数据类型存放在堆中?
为什么基础数据类型存放在栈中,而引用数据类型存放在堆中?
332 1
|
12月前
|
缓存 前端开发
React中函数式Hooks之memo、useCallback的使用以及useMemo、useCallback的区别
React中的`memo`是高阶组件,类似于类组件的`PureComponent`,用于避免不必要的渲染。`useCallback` Hook 用于缓存函数,避免在每次渲染时都创建新的函数实例。`memo`可以接收一个比较函数作为第二个参数,以确定是否需要重新渲染组件。`useMemo`用于缓存计算结果,避免重复计算。两者都可以用来优化性能,但适用场景不同:`memo`用于组件,`useMemo`和`useCallback`用于值和函数的缓存。
412 1
|
11月前
贪吃蛇游戏(代码篇)
贪吃蛇游戏(代码篇)
326 0
|
C# 图形学 C++
使用vscode开发C#+unity没有代码提示问题
使用vscode开发C#+unity没有代码提示问题
754 0
使用vscode开发C#+unity没有代码提示问题
若依修改,http和https的两种写法,部署成功的两种写法
若依修改,http和https的两种写法,部署成功的两种写法