浏览器的事件循环

小灰灰 2020-06-17 16:25 880阅读 0赞

# 浏览器的事件循环

**前言**

------

浏览器事件循环，基础面试中大部分都会问的，本文讲讲这个知识点。

**事件循环机制**

------

事件循环是负责执行代码、收集和处理事件以及执行队列中的子任务的一套机制。

在事件循环机制中，使用的栈数据结构便是执行上下文栈，每当有函数被调用时，便会创建相对应的执行上下文并将其入栈；使用到堆数据结构主要是为了表示一个大部分非结构化的内存区域存放对象；使用到的队列数据结构便是任务队列，主要用于存放异步任务。如下图：

![](/images/1592411086798.png)

**执行上下文栈**

------

在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，事件循环机制也是它里面的实现。这里不展开讲了，想了解的自己去看文档。

发表评论取消回复

表情：

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

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

相关阅读

相关浏览器与Node的事件循环(Event Loop)有何区别?

小编推荐： Fundebug提供JS、微信小程序、微信小游戏，Node.js和Java错误监控。真的是一个很好用的错误监控服务，众多大佬公司都在使用。前言本文我们将会

布满荆棘的人生/ 2023年08月17日 16:39/ 0 赞/ 96 阅读

相关 javascript 浏览器事件循环

一、概述 1. 执行栈：放置需要执行的同步任务 2. 任务队列 1. 宏任务(task)：`<script>`标签的整体代码、`setTimeou

r囧r小猫/ 2022年11月21日 03:51/ 0 赞/ 205 阅读

相关浏览器中的消息队列和事件循环

每个渲染进程都有一个主线程，并且主线程非常繁忙，既要处理 DOM，又要计算样式，还要处理布局，同时还需要处理 JavaScript 任务以及各种输入事件。要让这么多不同类型的任

约定不等于承诺〃/ 2022年10月06日 00:49/ 0 赞/ 266 阅读

相关一篇文章，彻底搞懂JavaScript浏览器的事件循环机制

关于浏览器的事件循环机制，在之前的话总是感觉模模糊糊，今天特意回顾了一下，彻底搞懂它！卷！浏览器的事件循环机制(JavaScript Event Loop) 首先，J

不念不忘少年蓝@/ 2022年08月28日 06:46/ 0 赞/ 200 阅读

相关 JavaScript 的事件循环

// 事件循环中函数执行的顺序其中包含 async await seTimeout，promise // 1.任务队列 // js分为

叁歲伎倆/ 2022年04月27日 21:28/ 0 赞/ 258 阅读

相关浏览器事件循环机制（event loop）

JS是单线程的 JS是单线程的，或者说只有一个主线程，也就是它一次只能执行一段代码。JS中其实是没有线程概念的，所谓的单线程也只是相对于多线程而言。JS的设计初衷就没有考

短命女/ 2021年12月21日 15:49/ 0 赞/ 396 阅读

相关浏览器事件循环介绍

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

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

相关事件循环

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

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

相关浏览器的事件循环详解

浏览器的事件循环详解前言浏览器事件循环，基础面试中大部分都会问的，本文讲讲这个知识点。事件循环机制事件循环是负责执行代码、收集和处理事件以及执行队列中的子任务的一...

朱雀/ 2020年06月21日 13:33/ 0 赞/ 846 阅读

相关浏览器的事件循环

事件循环是负责执行代码、收集和处理事件以及执行队列中的子任务的一套机制。在事件循环机制中，使用的栈数据结构便是执行上下文栈，每当有函数被调用时，便会创建相对应的执行上下...

小灰灰/ 2020年06月17日 16:25/ 0 赞/ 881 阅读