js中的任务执行机制

当代 Web 应用程序通常需要执行大量异步任务，如发送 AJAX 请求、渲染图形和交互等。JS 采用事件循环（Event Loop）机制实现了异步执行任务的能力。本篇文章将为大家介绍 JS中的任务执行机制，并详解宏任务与微任务的概念，及任务执行的具体流程。

调用栈（Call Stack）

JS采用单线程模式，同一时刻只能执行一个任务。同步代码会按照执行顺序依次执行，因此可以通过JavaScript的调用栈来执行同步代码。调用栈是一种先进后出的数据结构，记录程序当前执行的位置。

调用栈中先进后出，表示现在执行的代码是最近推入栈顶的那个代码。当调用栈为空时，说明当前程序所有同步代码执行完毕。

任务队列（Task Queue）

JS支持异步代码执行，异步事件触发后，会将对应的事件处理函数放入任务队列中等待执行。一般来说，任务队列有两种：宏任务队列（macrotask queue）和微任务队列（microtask queue）。

宏任务（macrotask）

宏任务是由宿主（宿主可以是浏览器也可以是nodejs平台）提供的异步任务，比如定时器计时结束、网络请求结果、DOM 事件等。执行栈中的同步任务执行完后，会执行当前的宏任务队列中的第一个宏任务，宏任务执行完后将会执行未来新增的宏任务，而当前的宏任务内产生的任务（异步任务）会被推入异步任务队列中。常见的宏任务有 setTimeout/setInterval/setImmediate、I/O 等 API。

微任务（microtask）

微任务指 Promise 回调函数、MutationObserver 回调函数等任务，执行时机要早于宏任务。在当前宏任务执行完毕后，JavaScript 引擎会从微任务队列中依次取出所有的微任务，按添加顺序依次执行它们，直到微任务队列为空。如果在微任务执行过程中又产生了新的微任务，则继续取出执行，直至微任务队列为空。常见的微任务有 Promise.then() 和 Promise.catch() 等方法。

需要注意的一点是，虽然 Promise 是异步操作，但是 Promise 执行器函数是同步执行的。当 Promise 对象的状态从 pending 变为 resolved 或 rejected 时，其对应的回调函数才会被加入微任务队列中。

事件循环流程

总的来讲，JS中的任务执行机制基于事件循环。当调用栈中的代码执行完毕后，事件循环就会轮询所有任务队列，检查是否有可执行的任务。具体执行流程如下:

首先，同步任务被添加到调用堆栈中执行

当调用堆栈为空时，事件循环机制会检查宏任务队列的第一个任务

执行宏任务，直到完成

判断微任务队列是否有任务，如果有则依次执行

当微任务队列为空时，进行下一次循环，去执行宏任务队列中的下一个任务

任务循环往复，防止了浏览器对UI渲染的阻塞和异步回调的机制

总结

在 JavaScript 中，任务执行机制采用的是事件循环（event loop）机制。在执行上下文中，有调用栈和任务队列，调用栈用于存放同步任务的执行上下文，而任务队列则用于存放异步任务的回调函数。异步任务分为宏任务和微任务，其执行顺序不同，通过根据事件循环机制中的优先级执行。在事件循环过程中，JavaScript 引擎会不断地从微任务队列中取出任务进行执行，直到微任务队列为空，然后再去执行宏任务队列中的下一个任务，整个过程反复进行，直到任务队列为空。这种机制的存在使得 JavaScript 在处理异步任务方面非常灵活、高效，为 Web 应用带来了前所未有的交互性和性能体验。