JS事件循环机制详解：同步、异步与宏微任务执行顺序

前言

在前端开发实践中，深入理解JavaScript原生运行原理至关重要。面对复杂的业务场景及基于底层原理的开发需求，开发者必须熟练掌握JS的核心机制。JavaScript采用单线程模型，其运行基于事件循环(Event Loop)机制。本文旨在梳理JS事件循环的执行机制，这不仅是日常前端开发的核心知识点，也是前端面试中的高频考点，特别是关于异步代码执行时的Event Loop原理，特此总结以备查阅。

JS语言的特点

回顾JavaScript的语言特性，其核心在于单线程运行。所有同步任务均在主线程的执行栈(Execution Context Stack)中按序执行，主线程外存在一个任务队列（或称消息队列）。这意味着JS在同一时刻仅能处理一件事，任务需排队依次执行，前一个任务结束后方可执行下一个。JS代码自上而下逐行解析，若某行报错则停止后续执行；且遵循先同步后异步的执行顺序。这种机制若处理耗时较长的任务，极易导致页面渲染不连贯，引发页面加载阻塞问题。

JS中同步和异步的使用

为解决单线程导致的页面渲染阻塞问题，HTML5引入了多线程操作的概念，允许JS脚本创建多个线程，从而区分同步与异步任务。由于JS主线程仍是单线程，浏览器执行JS代码时，会优先处理同步代码，随后处理异步代码。

• 同步：指前一个任务结束后再执行后一个任务，程序执行顺序与任务排序顺序一致，保持同步状态。
• 同步任务：在主线程上排队执行，当前任务执行完毕后，才会执行后续任务。
• 异步：与同步相对，异步任务的执行顺序与任务排序顺序不一致。可理解为从主线程派生子线程来完成任务。
• 异步任务：不进入主线程，而是直接进入任务队列。只有当任务队列通知主线程该异步任务可执行时，它才会进入主线程运行。

JS中常用的四种异步任务类型包括：setTimeout、setInterval、ES6中的Promise、Ajax异步请求以及DOM事件（如click、resize、onload）。

异步任务的回调函数会被添加到任务队列（消息队列）中。JS的事件循环(Event Loop)机制正是利用队列的存取方式，在执行和协调各类任务时，Event Loop会维护自己的事件队列。

事件循环是什么？

JavaScript的运行机制本质上就是事件循环。事件循环(Event Loop)是让JS在保持单线程的同时不阻塞的核心机制，也是JS并发模型的基础。它负责协调各种事件、用户交互、脚本执行、UI渲染及网络请求等。

下面分享一个简单的事件循环示例代码，具体如下所示：

//代码语句一

console.log('a');

//代码语句二

setTimeout(()=>{

    console.log('b');

},1000);

//代码语句三

console.log('c');

//代码执行结果为: a，c，b

执行过程解析：上述输出结果的出现，源于JS代码自上而下的执行逻辑。首先执行语句一，JS将其放入调用栈，执行后在控制台输出'a'，执行完毕后从调用栈移除。接着语句二进入调用栈，它调用API并在1秒后将回调放入回调队列，此时JS将语句二移出调用栈，继续执行后续代码，控制台输出'c'。随后进入事件循环，Event Loop不断轮询回调队列，等待1秒后API将语句二的回调放入队列，Event Loop将该回调移入调用栈并执行，最终在控制台输出'b'。

事件循环执行过程

事件循环的执行流程如下：首先清空调用栈中的同步代码，接着执行微任务队列中的微任务，随后进行DOM渲染，最后触发事件循环反复轮询回调队列。若队列中有待执行的代码语句，则将其放入调用栈继续执行。

• 同步的代码：调用栈执行后直接出栈；
• 异步的代码：放入API中，等待合适时机放入回调队列，当栈空闲时事件循环开始工作并进行轮询。

注意：微任务的执行时机早于宏任务，即微任务在DOM渲染前触发，而宏任务在DOM渲染后触发。

举一个简单的示例，具体代码如下所示：

// 语句一

console.log('a');

// 语句二
setTimeout(()=>{
    console.log('b');
},0);

//语句三
Promise.resolve().then(()=>{
    console.log('c');
})

// 语句四
console.log('d');
//代码执行结果为：a，d，c，b

微任务和宏任务的区别

JS规定任务分为两类：宏任务(Macro Task)和微任务(Micro Task)，且每个宏任务执行结束后，必须清空所有微任务。

• 宏任务：当前调用栈中执行的代码称为宏任务，由浏览器规定，宏任务队列由事件触发线程维护。常见的宏任务包括主代码块、定时器等。具体的宏任务如下所示：

setTimeout、setInterval、Ajax、DOM事件。

• 微任务：当前宏任务执行完毕，在下一个宏任务开始前需要执行的任务称为微任务，由ES6语法规定，微任务队列由JS引擎线程维护。常见的微任务包括promise.then、process.nextTick等。具体的微任务如下所示：

Promise、async、await。

JS执行/运行机制

JS的执行与运行机制如下：

1、在执行栈中执行一个宏任务；

2、执行过程中遇到微任务，将微任务添加到微任务队列中；

3、当前宏任务执行完毕，立即执行微任务队列中的任务；

4、当前微任务队列中的任务执行完毕，检查渲染，GUI线程接管渲染；

5、渲染完毕后，js线程接管，开启下一次事件循环，执行下一次宏任务（从事件队列中获取）。

最后

通过本文对前端开发中JS事件循环执行机制的详细介绍，可以看出该机制在实际前端开发及求职面试中均具有关键地位。因此，前端开发者必须掌握其相关内容，尤其是初涉前端开发的从业者，本文内容值得深入阅读，其重要性不言而喻。

以上就是JS的事件循环执行机制详解的详细内容，更多关于JS事件循环执行机制的资料请关注本站其它相关文章！