事件循环机制和执行上下文带你理解JS运行

大家好，我的浏览器输入url之后按回车发生了什么这篇文章中将到其相关的知识，然后上篇给大家写了一份HTTPS原理和HTTPS的安全相关的知识，相信大家对计算机网络知识有了一些了解了，接下来我会继续写TCP/IP协议的知识等，这里我先给大家插一篇Javascript一个大家比较关心的知识点，事件循环和执行上下文 先给大家讲执行上下文 在浏览器输入url之后按回车发生了什么我们说过在浏览器拿到HTML代码时候会先开辟一个栈内存用来给代码执行提供环境，这个栈内存就是用来给我们的执行上下文提供储存环境的。 栈内存概念：栈是一种数据结构，是只能在一个入口进行操作数据的线性表，他的原则就是后进先出，我们 【事件循环机制与执行上下文】 在JavaScript中，事件循环和执行上下文是理解代码运行过程的关键概念。当我们浏览器输入URL并按下回车时，一系列复杂的操作开始进行。浏览器获取HTML代码，并创建一个栈内存来为执行上下文提供存储环境。栈是一种特殊的数据结构，遵循“后进先出”原则，常用于临时存储和处理数据。 执行上下文分为三种类型：全局执行上下文、普通函数执行上下文（非eval函数）以及eval函数执行上下文。在执行上下文中，我们需要关注三个核心概念：this变量、变量对象和作用域链。例如，在以下代码中： ```javascript var a = 'global'; function fn() { var a = 'Fn'; function f() { return a; } return f(); } fn(); // "Fn" ``` 代码执行时，首先创建全局执行上下文并压入执行上下文栈，接着初始化全局上下文，包括设置this值、创建变量对象和作用域链。当执行到fn函数时，创建fn函数的执行上下文并压栈，然后初始化作用域链、创建环境记录器并执行函数内部代码。在fn函数内部，执行f函数的过程类似，但f函数执行完毕后，其执行上下文会从栈中移除，形成了闭包的概念，可以通过作用域链访问已关闭的变量。 事件循环机制是解决JavaScript单线程执行中可能出现的阻塞问题。JavaScript最初设计为单线程，避免多线程可能导致的DOM操作冲突。但单线程会导致某些耗时操作阻塞后续代码的执行，因此引入了事件循环。事件循环主要包含两种任务：微任务（Microtask）和宏任务（Macrotask）。微任务包括Promise的then/catch、process.nextTick（Node.js）和MutationObserver（浏览器），宏任务则涵盖I/O、setTimeout、setInterval、setImmediate（Node.js）和requestAnimationFrame（浏览器）等。 事件循环的流程如下： 1. 执行栈中所有同步代码（主任务）执行完毕。 2. 检查并执行所有微任务。 3. 执行一个宏任务，包括其内部的同步代码和新的微任务。 4. 重复以上步骤，直到宏任务队列为空。 在浏览器和Node.js环境中，事件循环的实现细节略有不同，但基本原理一致。通过这样的机制，JavaScript可以在不阻塞用户界面的情况下处理异步操作，确保代码的流畅执行。理解事件循环和执行上下文对于优化JavaScript性能和编写非阻塞代码至关重要。