event loop

最新推荐文章于 2024-09-11 15:33:18 发布

醉梦几时

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量155

点赞数

分类专栏： js 前端文章标签： event loop javascript 前端

本文链接：https://blog.csdn.net/cdp19930414/article/details/118892799

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

event loop 是实现 js 中异步回调的关键步骤，直译为事件轮询或者事件循环

1. js中的代码分为同步执行和异步执行。
2. 同步代码会逐行的被放在调用栈 (Call Statck) 中首先执行
3. 在执行同步代码过程中，如果遇到异步代码，如果是宏任务（maro task）会被(Web APIS)暂存起来, 微任务（micro task）会被放在 微任务队列（micro task queue）中；
4. 当同步代码执行完成后，调用栈 (Call Statck) 清空；
5. 当调用栈 (Call Statck) 被清空后，想微任务队列（micro task queue）中代码推入调用栈(Call Statck) ，执行代码
6. 当微任务队列（micro task queue）清空后，尝试DOM渲染， 
7. DOM渲染完成后， event loop 会被触发，不断的检查回调队列（Callback Queue）；
8. Web APIS 会在合适的时机（定时器的j计时完成、http请求完成等），将刚才被 Web APIS 暂存起来的代码 推入 回调队列（Callback Queue）中；
9. 当 event loop 检测到 回调队列（Callback Queue）中，有待执行的代码时，立即将待执行代码推入 调用栈 (Call Statck) 中；
10. 重复 步骤1至步骤9.

另外： dom事件也是基于 Web APIS 和 Event Loop 实现的，但是dom事件不是异步执行的。