JS的事件循环执行机制详解

2023-05-11 10:36:45 作者：三掌柜

JS执行是单线程的，它是基于事件循环的，那么本篇博文就来分享一下关于JS的事件循环执行机制，感兴趣的小伙伴可以跟着小编一起来学习

在前端开发中，涉及到JS原生的使用原理是非常重要的知识点，尤其是在实际工作过程中会遇到各种复杂的业务需求场景，以及具体开发中可能会遇到一些涉及基于JS原理的使用，这都要求开发者能够很好的了解和掌握JS原生的常用原理。JS执行是单线程的，它是基于事件循环的，那么本篇博文就来分享一下关于JS的事件循环执行机制，该内容不仅在日常前端开发中是比较重要核心的知识点，而且在前端求职面试时候面试官必考的知识点，尤其是关于异步执行代码时候的事件循环，总结记录一下，方便后期查阅使用。

JS语言的特点

在分享本篇博文之前，首先再来回顾一下JS的语言特点。众所周知，JS是单线程的，所有同步任务都在主线程上执行，即执行栈 execution context stack，主线程之外还存在一个任务队列(也有人称之为消息队列)。也就是只能在同一个时间内做一件事情，意味着所有任务都需要排队执行，前面一个任务结束之后才会执行后面一个任务，JS代码是从上到下一行一行执行的，如果某一行报错，则停止执行下面的代码；先执行同步代码，再执行异步代码。这样做会导致最大的问题就是如果执行的时间比较长，就会引起页面渲染不连贯，导致页面渲染加载阻塞。

JS中同步和异步的使用

为了解决上面说的JS的单线程引起的页面渲染阻塞问题，结合多核计算机的计算能力，HTML5提出了允许JS脚本创建多个线程的操作，至此同步和异步出现了。由于JS是单线程的，浏览器在执行JS代码时会先执行同步代码，再执行异步代码。

同步：指的就是前一个任务结束之后再执行后一个任务，程序执行的顺序与任务排序的顺序是一样的，保持同步的。
同步任务：在主线程上排队执行任务，当前一个任务执行完之后，才会执行后一个任务。
异步：首先异步与同步是相对的，也就是说异步不按照任务排序的顺序执行，程序执行的顺序与任务排序的顺序是不一致的，也可以理解为异步就是从主线程中发出一个子线程来完成任务。
异步任务：不用进入主线程，直接进入任务队列的任务，只有任务队列通知主线程某个异步任务可以执行的时候，该任务才会进入主线程中执行。

JS中常用的四种异步任务类型有：setTimeout、setlnterval、ES6中的Promise、Ajax异步请求、DOM事件(如：click、resize、onload)。

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

事件循环是什么？

其实JS的运行机制就是事件循环。事件循环（Event Loop）是让JS做到既是单线程，又不会阻塞的核心机制，也是JS并发模型（Concurrency Model）的基础，是用来协调各种事件、用户交互、脚本执行、UI 渲染、网络请求等的一种机制。

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

//代码语句一
console.log('a');
//代码语句二
setTimeout(()=>{
    console.log('b');
},1000);
//代码语句三
console.log('c');
//代码执行结果为: a，c，b

执行过程解析：之所以出现上面的输出结果，原因就是JS指向代码是从上往下执行，会先执行语句一。JS会将语句一放在调用栈当中，然后执行代码在控制台输出a，当语句一执行完毕后，便将其从调用栈中移出去；接着语句二进入调用栈，语句二会调用API, 1秒后进入回调队列，这时候JS将语句二移出调用栈，继续执行后面的代码控制台输出了c；这时候进入事件循环，它会不断循环的访问回调队列，等待1秒后API会将要执行的语句二放入回调队列，事件循环将回调队列中的内容放入调用栈并执行，然后在控制台输出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