事件循环

心已赠人 2021-09-02 07:02 491阅读 0赞

# 事件循环 #

JS运行的环境称之为宿主环境。

执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调用之前，创建执行环境，然后加入到执行栈；函数调用之后，销毁执行环境。

JS引擎永远执行的是执行栈的最顶部。

异步函数：某些函数不会立即执行，需要等到某个时机到达后才会执行，这样的函数称之为异步函数。比如事件处理函数。异步函数的执行时机，会被宿主环境控制。

浏览器宿主环境中包含5个线程：

1.  JS引擎：负责执行执行栈的最顶部代码
2.  GUI线程：负责渲染页面
3.  事件监听线程：负责监听各种事件
4.  计时线程：负责计时
5.  网络线程：负责网络通信

当上面的线程发生了某些事请，如果该线程发现，这件事情有处理程序，它会将该处理程序加入一个叫做事件队列的内存。当JS引擎发现，执行栈中已经没有了任何内容后，会将事件队列中的第一个函数加入到执行栈中执行。

JS引擎对事件队列的取出执行方式，以及与宿主环境的配合，称之为事件循环。

事件队列在不同的宿主环境中有所差异，大部分宿主环境会将事件队列进行细分。在浏览器中，事件队列分为两种：

*  宏任务（队列）：macroTask，计时器结束的回调、事件回调、http回调等等绝大部分异步函数进入宏队列
 *  微任务（队列）：MutationObserver，Promise产生的回调进入微队列

> MutationObserver用于监听某个DOM对象的变化

当执行栈清空时，JS引擎首先会将微任务中的所有任务依次执行结束，如果没有微任务，则执行宏任务。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/3c4c78ebc73c402896e92ba35ff25d44.png

发表评论取消回复

表情：

评论列表（有 0 条评论，491人围观）

还没有评论，来说两句吧...

相关阅读

相关 nodejs事件和事件循环详解

文章目录简介 nodejs中的事件循环 phase详解 timers pending callbacks id

布满荆棘的人生/ 2023年01月06日 11:56/ 0 赞/ 318 阅读

相关 nodejs事件和事件循环简介

文章目录简介事件事件循环事件循环的阻塞事件循环举例栈和消息队列作业队列和promis

绝地灬酷狼/ 2022年12月27日 01:21/ 0 赞/ 271 阅读

相关事件循环机制EventLoop

https://www.jianshu.com/p/c3716bedfaae 事件循环机制EventLoop ![webp][] BigTooth\_3611 关注

红太狼/ 2022年11月25日 04:06/ 0 赞/ 233 阅读

相关 js中事件循环和Nodejs中事件循环对比

1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章，讲解的很好。 JavaScript中事件循环，主要就在理解宏任务和微任务

╰+哭是因爲堅強的太久メ/ 2022年11月18日 13:50/ 0 赞/ 244 阅读

相关 JavaScript 事件循环

JavaScript 事件循环事件循环任务队列 async/await 又是如何处理的呢？定时

雨点打透心脏的1/2处/ 2022年10月15日 07:59/ 0 赞/ 217 阅读

相关 [Node.js]事件循环

摘要 Node.js是单进程单线程应用程序，但是通过事件和回调支持并发，性能也非常高。node.js的每一个api都是异步的，并作为一个独立线程运行，使用异步函数调用，并

痛定思痛。/ 2022年10月02日 14:59/ 0 赞/ 228 阅读

相关 Node.js事件循环

先给大家提个问题，下面的执行结果是什么呢？ setTimeout(() => console.log(1)); setImmediate(() => console.

喜欢ヅ旅行/ 2022年05月15日 04:24/ 0 赞/ 295 阅读

相关 JavaScript中事件循环和Nodejs中事件循环

1.JavaScript中事件循环可以参考《JavaScript忍者秘籍第二版》第十三章，讲解的很好。 JavaScript中事件循环，主要就在理解宏任务和微任务这两种异

谁践踏了优雅/ 2022年02月21日 01:53/ 0 赞/ 379 阅读

相关浏览器事件循环介绍

> 这里只介绍浏览器中的事件循环，node 中的事件循环放在 node.js 专题部分文章目录 github 获取更多前端资源灵魂三问

àì夳堔傛蜴生んèń/ 2021年11月10日 06:46/ 0 赞/ 372 阅读

相关事件循环

事件循环 JS运行的环境称之为宿主环境。执行栈：call stack，一个数据结构，用于存放各种函数的执行环境，每一个函数执行之前，它的相关信息会加入到执行栈。函数调

心已赠人/ 2021年09月02日 07:02/ 0 赞/ 492 阅读