深入解析JavaScript事件循环机制：从单线程到异步处理

单线程的Javascript

JavaScript被设计为单线程语言，其核心职责在于与用户进行交互以及操作DOM。多线程环境通常涉及资源共享，且存在相互修改运行结果的风险，同时还需要处理复杂的上下文切换问题。

当JavaScript代码执行时，可能会阻塞用户界面的渲染，这证明了脚本执行线程与UI渲染线程是互斥的。原因在于JavaScript具备修改DOM的能力，若在JS执行期间UI线程仍在工作，可能导致UI渲染状态不安全。

采用单线程运行JavaScript有助于节省内存空间，并减少上下文切换所消耗的时间。

为了充分利用多核CPU的计算能力，HTML5规范提出了Web Worker标准。该标准允许JavaScript脚本创建多个线程，但子线程完全受主线程控制，且被禁止直接操作DOM。

单线程模式下的同步等待会严重降低效率，任务必须依次排队执行，这种机制对于网页应用而言是不可接受的。因此，JavaScript引入了事件循环机制来处理异步任务。

同步与异步的区别：宏任务与微任务

首先需要明确同步和异步的基本概念：

• 同步：在函数返回时，调用者能够立即获得预期的结果。
• 同步任务：指在主线程上按顺序排队执行的任务，只有前一个任务执行完毕，后一个任务才会开始执行。
• 异步：在函数返回时，调用者无法立即获得预期结果，而是需要通过某种机制在未来获取。
• 异步任务：不进入主线程，而是被放入“任务队列”中。如果有多个异步任务，它们需要排队等待进入主线程执行栈中被依次执行。

任务队列并非单一结构，根据任务类型的不同，可分为微任务（micro task）队列和宏任务（macro task）队列。常见的任务类型如下：

• 宏任务：包括script（整体代码）、setTimeout、setInterval、I/O操作、UI交互事件、setImmediate等。这类任务需要特定的异步线程去执行，具有明确的异步任务触发点及回调函数。
• 微任务：包括Promise、MutationObserver、process.nextTick（在Node.js环境中，其执行优先级高于其他微任务）。这类任务不需要特定的异步线程去执行，没有明确的异步任务触发点，仅包含回调逻辑。

每一次事件循环（Event Loop）会处理一个宏任务，以及在该宏任务执行过程中产生的所有微任务。具体的执行顺序如下图所示：

第一个示例分析：

var req = new XMLHttpRequest();
req.open('GET', url);    
req.onload = function (){};    
req.onerror = function (){};    
req.send();
//等同于
var req = new XMLHttpRequest();
req.open('GET', url);
req.send();
req.onload = function (){};    
req.onerror = function (){};

在上述代码中，req.send方法是Ajax操作，用于向服务器发送数据，属于异步任务。这意味着只有当前脚本的所有同步代码执行完毕后，系统才会去读取“任务队列”。指定回调函数的部分（onload和onerror）在send()方法的前面或后面位置并不重要，因为它们属于执行栈的一部分，系统总是先执行完它们，随后才会去读取“任务队列”。

第二个示例分析：

console.log('1 第一次循环 开始执行');
setTimeout(function () {
    console.log('2 第二次循环 开始执行');
    new Promise(function (resolve) {
        console.log('3 第二次循环 宏任务结束');
        resolve();
    }).then(function () {
        console.log('4 第二次循环 微任务执行')
    })
}, 0)
new Promise(function (resolve) {
    console.log('5 第一次循环 宏任务结束');
    resolve();
}).then(function () {
    console.log('6 第一次循环 微任务执行')
})

setTimeout(function () {
    console.log('7 第三次循环 开始执行');

    new Promise(function (resolve) {
        console.log('8 第三次循环 宏任务结束');
        resolve();
    }).then(function () {
        console.log('9 第三次循环 微任务执行')
    })
}, 0)

/*
结果
1 第一次循环 开始执行
5 第一次循环 宏任务结束
6 第一次循环 微任务执行
2 第二次循环 开始执行
3 第二次循环 宏任务结束
4 第二次循环 微任务执行
7 第三次循环 开始执行
8 第三次循环 宏任务结束
9 第三次循环 微任务执行
*/

定时器机制

定时器功能主要由setTimeout()和setInterval()这两个函数实现，它们的内部运行机制完全一致，区别在于前者指定的代码仅执行一次，而后者则是反复执行。

如果将setTimeout()的第二个参数设置为0，表示在当前代码（执行栈清空）执行完毕后，立即执行指定的回调函数（0毫秒间隔）。主线程会尽可能早地执行回调，但无法保证回调函数一定会在setTimeout()指定的时间执行，因为必须等待当前代码（执行栈）执行完毕后，主线程才会去执行它指定的回调函数。因此，单线程机制无法实现真正的异步，因为仍然存在阻塞现象。

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加至4毫秒。

在此之前，老版本的浏览器都将最短间隔设为10毫秒。

另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。

在这种情况下，使用requestAnimationFrame()的效果要好于setTimeout()。

在Node.js环境下，还提供了另外两个方法：

• process.nextTick方法可以在当前“执行栈”的尾部，下一次Event Loop之前，触发回调函数。也就是说，它指定的任务总是在本次“事件循环”触发，发生在所有异步任务之前，同时也是在所有微任务之前执行。
• setImmediate方法则是在当前“任务队列”的尾部添加事件，也就是说，它指定的任务总是在之后的Event Loop执行，这与setTimeout(fn, 0)很像。

多个process.nextTick语句总是在当前“执行栈”一次执行完，多个setImmediate则可能需要多次loop才能执行完。

To Be Continued

Node.js使用V8作为js的解析引擎，而I/O处理方面使用了自己设计的libuv，libuv是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的API，事件循环机制也是它里面的实现的。（在Python中，uvloop，一个完整的asyncio事件循环的替代品，也是建立在libuv基础之上，是由Cython编写而成。）这个机制和浏览器中Javascript的事件循环机制是不太一样的。

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