标签：异步 函数 队列 全新 EventLoop 任务 理解 回调
EventLoop的全新理解方式
本篇文章将介绍EventLoop的完整机制，重点解释宏任务与微任务的区别和关系，里边涉及一些基础概念如下：
EventTalble 事件注册表，也称作Web APIs，
callback quene 回调队列，异步任务的回调函数会先放进这里再按序执行
script 也就是我们写的同步代码
什么是EventLoop？
- 在执行主线程的任务时，如果有异步任务，会进入到Event Table并注册回调函数，当指定的事情完成后，会将这个回调函数放到 callback queue 中
- 在主线程执行完毕之后，会去读取 callback queue中的回调函数，进入主线程执行
- 不断的重复这个过程，也就是常说的Event Loop（事件循环）了
重点在于异步任务，他们分为宏任务和微任务，两者区别于在指定的事情完成后，将回调函数放入 callback queue 的过程。
简化的模型
我们也不难看出，dom渲染会在微任务队列清空后进行。
宏任务与微任务
我们通常把宿主发起的任务称为宏观任务(
script其实也算宏任务，但因为他们只执行一遍，所以接下来宏任务里不讨论script的存在)，把JavaScript引擎发起的任务称为微观任务
常见宏任务：setInterval()，serTimeout()，setImmediate()(实际上setImmediate()优先级小于前者)
常见微任务：Promise().then(function(){})（promise-then里的回调函数，new MUtationObserver() process.nextTick(function(){})(同上)(另外，实际上后者优先级高于前者)
两者在事件轮询中的区别在于，轮询到微任务时，会将微任务队列全部推出再去轮询下一步；轮询到宏任务时，只推出了队列中最早的异步任务
为什么要设计微任务？
解决了宏任务执行时机不可控的问题。微任务宏任务将异步分成了缓急两个任务队列
事件循环闭环流程
我们可以想象成宏任务循环里套着微任务循环，在检查宏任务之前，执行完宏任务之后，分别插入微任务循环。
宏任务过程：
- 选择宏任务队列中最早的任务（任务A）
- 将“当前正在运行的任务”设置为“任务A”
- 运行“任务A”同步代码（也就是运行回调函数）
- 将“当前正在运行的任务”设置为
null，删除“任务A”，本次Loop结束 - 选择下一个最早的任务，也就是跳转到1，直到宏任务队列清空
微任务过程：
a. 选择微任务队列中最早的任务（任务x）
b. 将“当前正在运行的任务”设置为“任务x”
c. 运行“任务x”同步代码（也就是运行回调函数）
d. 将“当前正在运行的任务”设置为null，删除“任务x”
e. 选择下一个最早的任务，也就是跳转到1，直到微任务队列清空
浏览器和node的区别
宏任务
| \ | 浏览器 | Node |
|---|---|---|
| I/O | ✅ | ✅ |
| setTimeout | ✅ | ✅ |
| setInterval | ✅ | ✅ |
| setImmediate | ❌ | ✅ |
| requestAnimationFrame | ✅ | ✅ |
| 页面交互：DOM、鼠标、键盘、滚动事件 | ✅ | ✅ |
| script | ✅ |
微任务
| / | 浏览器 | Node |
|---|---|---|
| process.nextTick | ❌ | ✅ |
| MutationObserver | ✅ | ❌ |
| Promise.then catch finally | ✅ | ✅ |
最后如果有表述不清楚，或者表述错误的地方，欢迎
标签：异步,函数,队列,全新,EventLoop,任务,理解,回调 来源： https://blog.csdn.net/qq_44382590/article/details/122358452
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。