单线程的JavaScript为什么可以异步执行任务

JavaScript作为一门单线程语言，却能够高效处理各种异步操作，这得益于其精巧的事件循环(Event Loop)机制。本文将全面剖析JavaScript的异步处理原理，从单线程设计的原因到具体实现机制，最后通过伪代码模拟整个异步处理流程。

一、JavaScript为何选择单线程设计

JavaScript诞生之初就被设计为单线程语言，这并非技术限制，而是经过深思熟虑的设计选择。这种设计与其最初的应用场景密切相关：

用途决定设计：

• JavaScript 最初被设计为浏览器脚本语言，主要用于与用户交互和操作 DOM。
• 如果 JavaScript 是多线程的，可能会出现多个线程同时操作同一个 DOM 节点的情况。例如，一个线程在添加内容，另一个线程在删除该节点，浏览器将无法确定以哪个线程的操作为准。

// 假设多线程环境下可能出现的冲突场景
// 线程1：
document.getElementById('node').innerHTML = '新内容';
// 线程2：
document.body.removeChild(document.getElementById('node'));

• 这种复杂性会导致同步问题，因此 JavaScript 被设计为单线程，确保操作的顺序性和一致性。

避免复杂性：

• 多线程编程需要处理锁、死锁、线程同步等问题，这会增加语言的复杂性和开发难度。
• 单线程模型简化了 JavaScript 的设计，开发者可以专注于业务逻辑，而不必担心线程安全问题。

HTML5 的 Web Worker：

• 为了利用多核 CPU 的计算能力，HTML5 提供了 ​​Web Worker​​ 标准，允许 JavaScript 创建多个线程。
• 但这些子线程完全受主线程控制，且不能直接操作 DOM，因此 JavaScript 的单线程本质并未改变。

二、单线程如何实现异步处理

单线程意味着所有任务需要排队执行，如果前一个任务耗时很长（比如等待网络请求），后续任务就会被阻塞。聪明的JavaScript设计者想到了解决办法：当遇到I/O等耗时操作时，主线程不必傻等，而是先挂起这个任务，继续执行后面的代码。等到I/O操作完成，再将挂起的任务放入任务队列等待执行。

这种机制将任务分为两类：同步任务和异步任务。

同步任务在主线程上顺序执行，形成所谓的"执行栈"；
异步任务则委托给浏览器其他模块处理，完成后将回调函数放入"任务队列"。

当主线程完成当前执行栈中的所有任务，就会查看任务队列，取出等待中的任务继续执行。

这就好比一位厨师在准备多道菜品时，遇到需要长时间炖煮的菜，会先开火炖上，然后转身处理其他可以快速完成的菜品，等炖煮完成后再回来处理后续步骤。这种工作方式大大提高了整体效率。

下图就是主线程和任务队列的示意图。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

三、事件循环(Event Loop)核心原理

事件循环是JavaScript异步处理的核心机制，它像一位不知疲倦的调度员，持续监控着执行栈和任务队列的状态。其工作流程可以形象地描述为：

1. 主线程首先处理执行栈中的所有同步任务，就像厨师按顺序准备食材。
2. 遇到异步操作（如setTimeout或AJAX请求）时，主线程会将这些任务交给对应的浏览器模块处理，就像厨师把需要长时间处理的食材交给专门设备。
3. 浏览器模块在后台处理这些异步任务，任务完成后将回调函数放入任务队列，就像助手把处理好的食材放在待取区。
4. 当执行栈清空后，事件循环会检查任务队列，取出最早进入队列的任务推入执行栈执行，就像厨师完成手头工作后去待取区拿下一个要处理的食材。
5. 这个过程不断循环，形成所谓的"事件循环"。

为了更好地理解，让我们看一个实际的Ajax操作示例：

var req = new XMLHttpRequest();
req.open('GET', url);
req.onload = function(){ };    // 回调函数
req.onerror = function(){ };   // 回调函数
req.send(); // 异步任务

这段代码中的req.send()是异步操作，它的回调函数(onload/onerror)在代码中的位置并不重要，因为只有当前脚本的所有同步代码执行完，系统才会去读取"任务队列"。因此，它与下面的写法完全等价：

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

需要注意的是，现代浏览器将任务队列细分为宏任务队列和微任务队列。微任务队列中的任务（如Promise回调）会在当前宏任务执行完毕后立即执行，比下一个宏任务（如setTimeout回调）拥有更高的优先级。这就像厨师在处理完一道主菜后，会优先完成与之配套的酱汁调制，然后再开始下一道主菜。

四、setTimeout与Promise的运行机制

除了放置异步任务的事件，"任务队列"还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做"定时器"（timer）功能，也就是定时执行的代码。

定时器功能主要由setTimeout()和setInterval()实现，它们的内部机制相同，区别在于前者执行一次，后者重复执行。看一个典型例子：

console.log(1);
setTimeout(function(){ console.log(2); }, 1000);
console.log(3);
// 输出顺序：1, 3, 2

上面代码的执行结果是1，3，2，因为setTimeout()将第二行推迟到1000毫秒之后执行。

如果将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。

setTimeout(function(){ console.log(1); }, 0);
console.log(2);
// 输出顺序总是：2, 1

上面代码的执行结果总是2，1，因为只有在执行完第二行以后，系统才会去执行"任务队列"中的回调函数。

总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

注：以上内容摘自 阮一峰《JavaScript 运行机制详解：再谈Event Loop》

对于Promise，情况则稍有不同。

console.log('脚本开始');
setTimeout(() => {
    console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
    console.log('Promise');
});
console.log('脚本结束');

以上代码的输出顺序为：

1. 脚本开始

2. 脚本结束

3. Promise

4. setTimeout

这是因为Promise的回调会进入微任务队列，而setTimeout进入宏任务队列。事件循环会在一轮循环中先执行所有微任务，再执行一个宏任务。

五、伪代码模拟异步处理机制

为了更直观地理解JavaScript的异步处理，我们可以用伪代码模拟整个事件循环系统：

class EventLoop
{
    constructor()
    {
        this.callStack = []; // 执行栈，存储同步任务
        this.macroQueue = []; // 宏任务队列
        this.microQueue = []; // 微任务队列
        this.isRunning = false; // 运行状态标志
    }
    // 启动事件循环
    start()
    {
        this.isRunning = true;
        while (this.isRunning)
        {
            // 执行所有同步代码
            while (this.callStack.length > 0)
            {
                const task = this.callStack.pop();
                execute(task); // 执行当前任务
            }
            // 执行所有微任务
            while (this.microQueue.length > 0)
            {
                const microTask = this.microQueue.shift();
                this.callStack.push(microTask); // 将微任务推入执行栈
            }
            // 执行一个宏任务
            if (this.macroQueue.length > 0)
            {
                const macroTask = this.macroQueue.shift();
                this.callStack.push(macroTask); // 将宏任务推入执行栈
            }
            // 如果所有队列都为空，暂停循环
            if (this.callStack.length === 0 &&
               this.macroQueue.length === 0 &&
               this.microQueue.length === 0)
            {
                this.isRunning = false;
            }
        }
    }
    // 模拟setTimeout
    setTimeout(callback, delay)
    {
        // 使用浏览器定时器API
        externalTimerAPI.set(() => {
            this.macroQueue.push(callback); // 时间到后加入宏任务队列
        }, delay);
    }
    // 模拟Promise
    Promise(executor)
    {
        // 立即执行executor
        executor(
          value => this.resolve(value),
          reason => this.reject(reason)
        );
    }
    resolve(value)
    {
        this.microQueue.push(() => {
            // 这里处理Promise的成功回调
            handleThenCallbacks(value);
        });
    }
}
// 使用示例
const loop = new EventLoop();
// 添加同步任务
loop.callStack.push(() => console.log('开始执行'));
// 添加宏任务
loop.setTimeout(() => console.log('宏任务执行'), 0);
// 添加微任务
loop.microQueue.push(() => console.log('微任务执行'));
// 启动事件循环
loop.start();

段伪代码清晰地展示了：

1. 同步任务直接进入执行栈立即执行
2. setTimeout回调进入宏任务队列
3. Promise回调进入微任务队列
4. 事件循环优先处理微任务，再处理宏任务
5. 整个过程循环往复，直到所有任务完成

通过这个模拟，我们可以更深入地理解JavaScript如何在单线程环境下实现高效的异步处理，以及各种异步API在事件循环中的不同表现。

参考资料：

阮一峰《JavaScript 运行机制详解：再谈Event Loop》

到此这篇关于单线程的JavaScript为什么可以异步执行任务的文章就介绍到这了,更多相关js单线程异步任务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论