浅析 JS 的执行上下文与事件循环机制：揭秘前端运行奥秘

认识执行上下文和执行栈

1. 执行上下文：

• 是一个抽象的概念，用于 JavaScript 代码在特定时刻的运行环境。
• 包含了变量对象、作用域链和当前正在执行的函数。
• 每当函数被调用时，就会创建一个新的执行上下文。

2. 执行栈：

• 这是一个先进后出的数据结构，用于存储执行上下文。
• JavaScript 代码是单线程执行的，这意味着每次只能执行一个函数。
• 当前正在执行的函数的执行上下文始终位于执行栈的栈顶。

同步任务与异步任务

在 JavaScript 中，任务分为同步任务和异步任务。

1. 同步任务：

• 必须立即执行，不会被其他任务打断。
• 例如：变量声明、函数声明、函数调用、运算符等。
• 同步任务会按照代码的顺序逐行执行，直到执行完毕。

2. 异步任务：

• 可以稍后执行，不会阻塞后续代码的执行。
• 例如：setTimeout()、setInterval()、AJAX 请求等。
• 异步任务会被放入事件队列中，等待执行。

微任务与宏任务

在异步任务中，又可以分为微任务和宏任务。

1. 微任务：

• 是比宏任务更高级别的异步任务。
• 例如：Promise.then()、MutationObserver 等。
• 微任务会在当前执行栈中的所有同步任务和异步任务执行完毕后立即执行。

2. 宏任务：

• 是比微任务更低级别的异步任务。
• 例如：setTimeout()、setInterval()、AJAX 请求等。
• 宏任务会在当前执行栈中的所有同步任务和异步任务执行完毕后，以及当前执行栈中的所有微任务执行完毕后执行。

事件循环

事件循环是一个不断循环的过程，它负责管理同步任务、异步任务、微任务和宏任务的执行顺序。

1. 事件循环的过程：

1. 执行栈中的所有同步任务。
2. 将异步任务放入事件队列中。
3. 执行栈中的所有微任务。
4. 将宏任务放入任务队列中。
5. 如果执行栈为空，则从事件队列中取出一个异步任务执行。
6. 如果执行栈为空，则从任务队列中取出一个宏任务执行。
7. 重复步骤 1-6。

总结

通过对 JavaScript 中的执行上下文、执行栈、同步任务、异步任务、微任务、宏任务和事件循环机制的理解，我们可以更好地优化我们的代码。例如，我们可以将一些耗时的任务放在异步任务中执行，以避免阻塞主线程的执行。同时，我们也可以利用微任务的特性来提高代码的响应速度。