超高频面试题之JS单线程与事件循环，看这篇就够了

关注

原创 2023-10-07 14:42:49 468 阅读 AI 写同款· GEO 优化 ›

【前端面试题】事件循环event_loop JavaScript是一个单线程语言。任务分为同步任务和异步任务。同步任务就是立即执行的任务，同步任务会进入主线程立即执行，当浏览器遇到异步任务时，会将异步任务扔到异步队列中去，等同步任务执行完毕后，再按照“微先宏后”的执行顺序依次执行异步任务。 “微先宏后”就是在异步任务队列中微任务先执行，宏任务后执行。微任务包括：promise 宏任务包括：setTimeout、setInterval、UI交互、IO、script整体代码下面来看面试题，先看题目，思考后有自己的想法再看题目结果，有不阅读详情

JavaScript是一种单线程语言，它在任何给定时间只能执行一个任务。然而js确能够处理异步操作，这得益于其事件循环（Event Loop）机制。今天这篇文章带领大家深入理解JavaScript单线程特性，以及讲解事件循环和js多线程知识。

一、背景：为什么JS是单线程？

在最开始设计中，JS的主要用途是处理浏览器中的用户界面事件。由于JS交互直接进行DOM操作，如果允许多线程对DOM进行并行操作，可能会导致竞态条件，例如一个线程正在读取节点，而另一个线程正在修改它。这将导致程序的不可预测性，因此，JS被设计为单线程语言，以避免这种复杂性。

二、事件循环

事件循环的核心思想是：JS引擎首先执行当前的同步任务，然后检查任务队列（Task Queue）中是否有待处理的异步任务。如果有，它会按照顺序将这些异步任务添加到执行队列，并在当前任务执行完毕后依次执行它们。在这个过程中，宏任务和微任务是两种不同类型的异步任务，它们在事件循环中的处理方式有所不同。

2.1 宏任务（MacroTask）

宏任务是指那些需要在下一个事件循环周期执行的任务。常见的宏任务包括：

setTimeout
setInterval
setImmediate（Node.js 独有）
I/O 操作（Node.js 独有）
UI 渲染（浏览器独有）

当事件循环执行到一个宏任务时，它会将该任务添加到宏任务队列中。在当前事件循环周期结束时，JS引擎会检查宏任务队列，并将队列中的任务依次执行。

2.2 微任务（MicroTask）

微任务是指那些在当前事件循环周期内执行的任务。常见的微任务包括：

Promise.then 和 Promise.catch
async/await（实际上是基于 Promise 的语法糖）
process.nextTick（Node.js 独有）
MutationObserver（浏览器独有）

当事件循环执行到一个微任务时，它会将该任务添加到微任务队列中。与宏任务不同，微任务会在当前事件循环周期内立即执行，而不是等待下一个事件循环周期。

2.3 事件循环处理宏任务和微任务的顺序

从宏任务队列中取出一个任务并执行。
检查微任务队列，如果有任务，则依次执行所有微任务。
检查宏任务队列，如果有任务，则返回步骤1，否则等待新任务。

这意味着，在一个事件循环周期中，微任务会在宏任务之间执行。换句话说，当一个宏任务执行完毕后，JS引擎会检查微任务队列，并在执行下一个宏任务之前执行所有的微任务。

下面是一个简单的示例，展示了宏任务和微任务在事件循环中的执行顺序：

console.log('Start'); // 同步任务

setTimeout(() => {
    console.log('setTimeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
    console.log('Promise'); // 微任务
});

console.log('End'); // 同步任务

输出顺序为：

Start
End
Promise
setTimeout

这是因为在执行到 setTimeout 时，它被添加到宏任务队列中。而在执行到 Promise 时，它被添加到微任务队列中。在当前事件循环周期结束之前，JS引擎会先执行微任务队列中的所有任务，然后再执行宏任务队列中的任务。

事件循环是JavaScript运行时环境的核心组件，负责处理宏任务和微任务。了解宏任务和微任务在事件循环中的执行顺序，有助于我们更好地理解和编写异步代码。

三、异步编程

回调函数：最基本的异步编程模型，将一个函数作为参数传递给另一个函数，当异步操作完成时，回调函数被执行。

function downloadFile(url, callback) {
    // 模拟异步操作
    setTimeout(() => {
        console.log(`Downloaded file from ${url}`);
        callback();
    }, 2000);
}

downloadFile('https://example.com/file.txt', function() {
    console.log('File download complete');
});

Promise：Promise是一种更高级的异步编程模型，它表示一个异步操作的最终结果。Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

function downloadFile(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Downloaded file from ${url}`);
            resolve();
        }, 2000);
    });
}

downloadFile('https://example.com/file.txt')
    .then(() => {
        console.log('File download complete');
    });

async/await：async/await是基于Promise的一种更简洁的异步编程模型。通过使用async关键字声明一个函数为异步函数，然后在函数内部使用await关键字等待Promise的结果。

async function downloadFile(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log(`Downloaded file from ${url}`);
            resolve();
        }, 2000);
    });
}

(async () => {
    await downloadFile('https://example.com/file.txt');
    console.log('File download complete');
})();

三、单线程的优缺点

3.1 优点

避免了多线程下的复杂性，如死锁。
简化了异步操作，使得异步编程更易于构建和理解。

3.2 缺点

长时间运行的任务可能会阻塞线程，影响用户体验。
无法充分利用多核CPU的计算能力。

四、实现多线程的方法

尽管JS是单线程，但我们可以通过Web Workers在浏览器中创建多个线程。Web Workers运行在后台线程中，不影响主线程，它们之间通过postMessage来进行通信。

4.1 Web Workers

这是一个简单的Web Worker示例，演示了多个进程之间的通信：

// main.js
const worker = new Worker('worker.js');

worker.postMessage('Hello, Worker!');

worker.onmessage = function(event) {
    console.log('Message from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
    console.log('Message from main thread:', event.data);
    self.postMessage('Hello, Main Thread!');
};

4.2 SharedArrayBuffer与Atomics

为了实现更高级的多线程编程，JS引入了SharedArrayBuffer和Atomics对象。SharedArrayBuffer允许多个Web Workers共享同一块内存，而Atomics对象提供了一组原子操作，确保在多线程环境下对共享内存的操作是安全的。

以下是一个使用SharedArrayBuffer和Atomics的示例：

// main.js
const worker = new Worker('worker.js');
const sharedBuffer = new SharedArrayBuffer(4);
const sharedArray = new Int32Array(sharedBuffer);

worker.postMessage(sharedBuffer);

Atomics.store(sharedArray, 0, 1);
console.log('Main thread set value:', sharedArray[0]);

worker.onmessage = function(event) {
    console.log('Message from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
    const sharedBuffer = event.data;
    const sharedArray = new Int32Array(sharedBuffer);

    console.log('Worker thread initial value:', sharedArray[0]);
    Atomics.add(sharedArray, 0, 1);
    console.log('Worker thread updated value:', sharedArray[0]);

    self.postMessage('SharedArrayBuffer updated');
};