为什么单线程的JavaScript可以异步执行任务？-优快云博客

本文链接：https://blog.youkuaiyun.com/czhmx/article/details/147005630

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异步处理的核心机制，它像一位不知疲倦的调度员，持续监控着执行栈和任务队列的状态。其工作流程可以形象地描述为：

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

为了更好地理解，让我们看一个实际的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();

段伪代码清晰地展示了：