JS事件循环理解关键点

1⃣️ 面向的读者

了解事件循环的整体过程,但是感觉一些细节处依旧模糊不清(没错就是之前的我了),因此整理了一下目前我对于事件循环的关键理解点与整体认知,希望能够起到帮助也欢迎探讨!

2⃣️ 理解关键点

1.宏任务与微任务与任务队列

误解:任务队列里面存放的是宏任务与微任务

正解:任务分为宏任务和微任务,但是宏任务和微任务的队列存放的是对应任务的回调函数

🌰1:宏任务比如setTimeout,那么他的回调函数 ,也就是第一个参数会在setTimeout执行完成之后被压入任务队列中的宏任务队列

🌰2:微任务比如Promise,那么他的回调函数 如then,catch等函数,会在Promise执行完成后被压入微任务队列

2.回调函数进入队列的时机

误解:遇到微任务宏任务后就将其回调函数压入队列

正解:对应任务的回调函数只有在该任务【执行完成之后】(不同任务执行完成的含义不同)才会压入对应队列,等待主线程的调用执行

🌰1:Promise的then和catch的回调函数,只有在Promise执行完成 即Promise的状态发生改变后,才会被压入微任务队列;

🌰2: 如setTimeOut的回调函数,只有在其执行完成 即等待指定时间后才会被压入宏任务队列

这也就能解释setTimeOut的第二个参数为什么不是实际延迟时间而是最小延迟时间,因为这个时间只决定了其回调进入宏任务队列的时间,而回调函数的执行需要等待前面的宏任务完全清空才能进行

3⃣️ 事件循环过程概述

1.背景概述:

JS在单线程的基础上需要实现异步任务的处理,需要在执行当前执行栈的脚本时将遇到的异步任务挂起,这些任务就包括宏任务与微任务,而宏任务与微任务的执行方式/顺序就被称作是事件循环。

2.具体过程:

  1. 在执行栈任务清空后,JS会检查任务队列中是否有宏任务的回调函数或者微任务的回调函数
  2. 如果微任务队列不为空(即存在微任务的回调函数)JS会清空微任务队列
  3. 清空后则判断宏任务队列中是否有对应的回调,如果有的话则执行下一个宏任务
  4. 这样一个宏任务与微任务交替执行 的过程即为事件循环的主体过程

3.细节过程

  1. 宏任务和微任务的回调函数在执行过程中是也可能碰到异步事件的 ,即其可能也会产生出新的宏任务和微任务,并且在执行完成之后会将对应的回调函数压入对应的队列。
    1. 因此具体过程中第二步的"清空微任务队列"是得要保证完全清空,即当前执行栈为空时,微任务队列也得为空,才会去执行下一个宏任务

4.问题思考

问题描述:我在执行微任务队列的最后一个微任务的回调函数时,遇到了一个新的微任务A,那么当我把当前回调函数执行完成后,JS应该怎么做?

理解关键点:微任务回调函数压入队列的时机

解答 :这种情况应当分类讨论,判断是否执行宏任务的唯一条件还是:执行栈为空且微任务队列为空

  1. 如果当前回调函数执行完之后,新的微任务A还没执行完成,那么现在就满足"执行栈为空且微任务队列为空"的条件,即执行下一个宏任务,微任务A等待执行完成后再将回调函数压入微任务队列
  2. 如果当前回调函数执行完之后,新的微任务A已经执行完成并且回调函数已经压入微任务队列,那么微任务队列不为空,则继续执行下一个微任务,直到其为空为止

4⃣️ 总结

事件循环的过程即宏任务与微任务交替执行的过程,不过在执行过程中,其是按照一定规律执行:先清空微任务队列,再执行下一个宏任务队列中的回调;宏任务与微任务的回调函数在其执行完成之后进入队列;执行过程中遇到的宏任务与微任务在其执行完成之后会将对应的回调函数加入对应队列。以此"循环"执行 故称事件循环

面试问到事件循环是什么应该怎么答?背景+过程:

  1. JS在单线程的基础上需要实现异步任务的处理,需要在执行当前执行栈的脚本时将遇到的异步任务挂起交给其他的线程执行,这些任务就包括宏任务与微任务,而宏任务与微任务的执行顺序就被称作是事件循环。
  2. 其具体循环方式为宏任务与微任务交替执行,即执行栈为空时,检查微任务队列,若其不为空则依次执行使之为空;执行栈与微任务队列皆空时,执行下一个宏任务的回调函数

拓展思考:JS执行时页面能够正常渲染更新吗,如果不能的话页面的渲染是在什么时候进行的呢,好吧我也不是很清楚,希望得到解答🙏🙏🙏🙏🙏

感谢阅读,希望有所帮助🙏🙏🙏🙏🙏

相关推荐
小羊没烦恼!3 小时前
T-SQL查询进阶--理解SQL SERVER中的分区表
服务器·开发语言·前端·javascript·html
Highcharts.js3 小时前
AI图表开发工具Highcharts Assist|自然语言生成图表代码
javascript·人工智能·highcharts·开发神器
志尊宝4 小时前
Vue3 零基础每日笔记(087):Vue3 高频面试题(下)
前端·javascript·vue.js·笔记·ecmascript·#vue.js
const_qiu6 小时前
第二章 2.6:初始化 NestJS 服务端 —— TypeScript 后端框架体验
前端·javascript·typescript
miofly6 小时前
GitHub 今日推荐|sweety-handdraw-video:文章转手绘口播视频
javascript·开源·github
用户83134859306987 小时前
Vue3 事件:常用用法与开发高频坑点
前端·javascript·vue.js
漫步人生走在路上7 小时前
用小语种SEO突破外贸B2B天花板:法语、德语市场的实测数据
开发语言·前端·javascript·人工智能·搜索引擎·ecmascript
ydjs678899-bot9 小时前
您的Next.js中间件匹配器配置可能会跳过您认为它保护的路由
开发语言·javascript·中间件
Chengbei119 小时前
JsOwl|AI 赋能 JS 敏感信息扫描器,AST + 正则、source‑map 源码还原、登录态爬虫输出交互式 HTML 报告
开发语言·javascript·网络·人工智能·爬虫·网络安全·自动化
ShineWinsu10 小时前
对于JavaScript:初识JavaScript以及输入输出
java·开发语言·前端·javascript·css·面试·html