前端知识笔记（十）———宏任务和微任务

一，什么是宏任务什么是微任务？

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

二，宏任务

宏任务（Macro Tasks）包括以下几种：

1. 主代码块：JavaScript中的主线程代码。
2. setTimeout和setInterval：定时器任务。
3. I/O操作：例如文件读写、网络请求等。
4. UI渲染：浏览器需要重绘或者重新布局的任务。

三，微任务

微任务（Micro Tasks）包括以下几种：

1. Promise回调函数：Promise对象的处理程序（then、catch、finally）。
2. MutationObserver：监测DOM变化的任务。
3. process.nextTick（Node.js环境下）：在当前"执行栈"结束后立即执行的任务。

四，哪些算是宏任务

1. 用户交互事件：例如点击、滚动、输入等用户操作触发的事件。
2. setTimeout 和 setInterval：通过定时器触发的任务。
3. 网络请求完成事件：例如 Ajax 请求完成时触发的事件。
4. 文件读写操作：包括读取文件、写入文件等涉及到 I/O 操作的任务。
5. 页面解析和渲染：包括 DOM 解析、CSS 解析、页面布局和绘制等与页面渲染相关的任务。
6. requestAnimationFrame：用于执行动画效果的任务。

五，哪些算是微任务

1. Promise 回调函数：Promise 对象的处理程序（.then、.catch、.finally）中的回调函数都是微任务。
2. MutationObserver：用于监测 DOM 变化的任务。
3. process.nextTick（在 Node.js 环境下）：在当前执行栈结束后立即执行的任务。
4. queueMicrotask()：用于将一个微任务添加到微任务队列中。

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

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

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