JS面試高頻單線程與事件循環(huán)深入解析

更新時間：2023年10月24日 09:13:29 作者：千年老妖

JavaScript是一種單線程語言,它在任何給定時間只能執(zhí)行一個任務,然而js確能夠處理異步操作,這得益于其事件循環(huán)（Event Loop）機制,今天這篇文章帶領大家深入理解JavaScript單線程特性,以及講解事件循環(huán)和js多線程知識

一、背景：為什么JS是單線程？

在最開始設計中，JS的主要用途是處理瀏覽器中的用戶界面事件。由于JS交互直接進行DOM操作，如果允許多線程對DOM進行并行操作，可能會導致競態(tài)條件，例如一個線程正在讀取節(jié)點，而另一個線程正在修改它。這將導致程序的不可預測性，因此，JS被設計為單線程語言，以避免這種復雜性。

二、事件循環(huán)

事件循環(huán)的核心思想是：JS引擎首先執(zhí)行當前的同步任務，然后檢查任務隊列（Task Queue）中是否有待處理的異步任務。如果有，它會按照順序?qū)⑦@些異步任務添加到執(zhí)行隊列，并在當前任務執(zhí)行完畢后依次執(zhí)行它們。在這個過程中，宏任務和微任務是兩種不同類型的異步任務，它們在事件循環(huán)中的處理方式有所不同。

2.1 宏任務（MacroTask）

宏任務是指那些需要在下一個事件循環(huán)周期執(zhí)行的任務。常見的宏任務包括：

setTimeout
setInterval
setImmediate（Node.js 獨有）
I/O 操作（Node.js 獨有）
UI 渲染（瀏覽器獨有）

當事件循環(huán)執(zhí)行到一個宏任務時，它會將該任務添加到宏任務隊列中。在當前事件循環(huán)周期結(jié)束時，JS引擎會檢查宏任務隊列，并將隊列中的任務依次執(zhí)行。

2.2 微任務（MicroTask）

微任務是指那些在當前事件循環(huán)周期內(nèi)執(zhí)行的任務。常見的微任務包括：

Promise.then 和 Promise.catch
async/await（實際上是基于 Promise 的語法糖）
process.nextTick（Node.js 獨有）
MutationObserver（瀏覽器獨有）

當事件循環(huán)執(zhí)行到一個微任務時，它會將該任務添加到微任務隊列中。與宏任務不同，微任務會在當前事件循環(huán)周期內(nèi)立即執(zhí)行，而不是等待下一個事件循環(huán)周期。

2.3 事件循環(huán)處理宏任務和微任務的順序

從宏任務隊列中取出一個任務并執(zhí)行。
檢查微任務隊列，如果有任務，則依次執(zhí)行所有微任務。
檢查宏任務隊列，如果有任務，則返回步驟1，否則等待新任務。

這意味著，在一個事件循環(huán)周期中，微任務會在宏任務之間執(zhí)行。換句話說，當一個宏任務執(zhí)行完畢后，JS引擎會檢查微任務隊列，并在執(zhí)行下一個宏任務之前執(zhí)行所有的微任務。

下面是一個簡單的示例，展示了宏任務和微任務在事件循環(huán)中的執(zhí)行順序：

console.log('Start'); // 同步任務
setTimeout(() => {
    console.log('setTimeout'); // 宏任務
}, 0);
Promise.resolve().then(() => {
    console.log('Promise'); // 微任務
});
console.log('End'); // 同步任務

輸出順序為：

Start
End
Promise
setTimeout

這是因為在執(zhí)行到 setTimeout 時，它被添加到宏任務隊列中。而在執(zhí)行到 Promise 時，它被添加到微任務隊列中。在當前事件循環(huán)周期結(jié)束之前，JS引擎會先執(zhí)行微任務隊列中的所有任務，然后再執(zhí)行宏任務隊列中的任務。

事件循環(huán)是JavaScript運行時環(huán)境的核心組件，負責處理宏任務和微任務。了解宏任務和微任務在事件循環(huán)中的執(zhí)行順序，有助于我們更好地理解和編寫異步代碼。

三、異步編程

回調(diào)函數(shù)：最基本的異步編程模型，將一個函數(shù)作為參數(shù)傳遞給另一個函數(shù)，當異步操作完成時，回調(diào)函數(shù)被執(zhí)行。

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是一種更高級的異步編程模型，它表示一個異步操作的最終結(jié)果。Promise有三種狀態(tài)：pending（進行中）、fulfilled（已成功）和rejected（已失?。?/li>

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關鍵字聲明一個函數(shù)為異步函數(shù)，然后在函數(shù)內(nèi)部使用await關鍵字等待Promise的結(jié)果。

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');
})();

三、單線程的優(yōu)缺點

3.1 優(yōu)點

避免了多線程下的復雜性，如死鎖。
簡化了異步操作，使得異步編程更易于構(gòu)建和理解。

3.2 缺點

長時間運行的任務可能會阻塞線程，影響用戶體驗。
無法充分利用多核CPU的計算能力。

四、實現(xiàn)多線程的方法

盡管JS是單線程，但我們可以通過Web Workers在瀏覽器中創(chuàng)建多個線程。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

為了實現(xiàn)更高級的多線程編程，JS引入了SharedArrayBuffer和Atomics對象。SharedArrayBuffer允許多個Web Workers共享同一塊內(nèi)存，而Atomics對象提供了一組原子操作，確保在多線程環(huán)境下對共享內(nèi)存的操作是安全的。

以下是一個使用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');
};