浏览器的事件循环详解

执行上下文栈

在Javascript代码运行过程中，会进入到不同的执行环境中，一开始执行时最先进入到全局环境，此时全局上下文首先被创建并入栈，之后当调用函数时则进入相应的函数环境，此时相应函数上下文被创建并入栈，当处于栈顶的执行上下文代码执行完毕后，则会将其出栈。这里说的栈就是执行上下文。

任务队列

在事件循环机制中，存在多种任务队列，其分为宏任务队列和微任务队列两种。

宏观任务

宏任务包括setTimeout、setInterval、I/O、UI rendering。

微任务

微任务包括Promise、Object.observe（已废弃）、MutationObserver（html5新特性）。

事件循环机制的流程

1. 主线程执行Javascript整体代码，形成执行上下文栈，当遇到各种任务源时将其所指定的异步任务挂起，接受到响应结果后将异步任务放入对应的任务队列中，直到执行上下文栈只剩全局上下文；

2. 将微任务队列中的所有任务队列按优先级、单个任务队列的异步任务按先进先出的方式入栈并执行，直到清空所有的微任务队列；

3. 将宏任务队列中优先级最高的任务队列中的异步任务按先进先出的方式入栈并执行；

4. 重复第 2 3 步骤，直到清空所有的宏任务队列和微任务队列，全局上下文出栈。

简单来说，事件循环机制的流程就是，主线程执行Javascript整体代码后将遇到的各个任务源所指定的任务分发到各个任务队列中，然后微任务队列和宏任务队列交替入栈执行直到清空所有的任务队列，全局上下文出栈。

最后

虽然Node.js也有事件循环，可是它和浏览器的事件循环完全不是一个东西。Node.js采用V8作为js的解析引擎，而I/O处理方面使用了自己设计的libuv，libuv是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的API，事件循环机制也是它里面的实现。这里不展开讲了，想了解的自己去看文档。

谢谢阅读！

推荐教程：《JS教程》

以上就是浏览器的事件循环详解的详细内容，更多请关注 第一PHP社区 其它相关文章！