JavaScript 單線程原理與異步編程機制

為什么 JavaScript 是單線程？

JavaScript 被設計成單線程，簡單來說就是 —— 瀏覽器里干活兒只能一個接一個排著隊來，沒法同時多開窗口摸魚。

舉個栗子：

你點按鈕 → 網頁要彈個提示 → 這時候如果網頁還在加載數據 → 彈提示就得等加載完 → 單線程 = 一次只能干一件事。

為啥這么設計？

• 最初網頁交互簡單（填表單、點按鈕），單線程夠用。
• 避免多線程打架（比如兩個線程同時改同一個按鈕的狀態）。

單線程的優點：

• 開發簡單：避免了多線程中的數據競爭、死鎖等復雜問題。
• 調試方便：執行順序清晰明確，便于排查問題。
• 適合 I/O 密集型任務：大多數 JS 任務（如事件處理、請求響應）并不需要多核計算資源。

單線程的缺點：

• 阻塞風險高：一旦有耗時操作（如大數據計算、死循環等），會卡住主線程，導致頁面卡頓或無響應。
• 無法利用多核 CPU：在默認模式下，不能并行計算，浪費了現代多核處理器的能力。

JavaScript 如何實現高并發與多線程？

雖然 JS 是單線程執行模型，但通過瀏覽器或 Node.js 提供的機制，我們可以實現“偽并發”或“多線程模擬”，主要方式如下：

? 異步操作（等加載時先干別的）

• 原理：任務被掛起，等待資源時讓出主線程，通過事件隊列機制在任務完成后重新調度執行。
• 常用方式：
  • setTimeout / setInterval
  • Promise
  • async/await
  • Ajax / Fetch API

? Web Worker（開小號偷偷干活）

• 開啟一個獨立的線程運行 JS 腳本，不影響主線程。
• 適用于大計算任務、離線數據預處理等。
• 與主線程通信使用 postMessage() / onmessage

// main.js
const worker = new Worker("worker.js")
worker.postMessage("開始計算")
worker.onmessage = (e) => {
  console.log("子線程結果：", e.data)
}

// worker.js
onmessage = function (e) {
  // 執行密集任務
  let sum = 0
  for (let i = 0; i < 1e8; i++) sum += i
  postMessage(sum)
}

? Node.js 中的 Worker Threads

• 使用 worker_threads 模塊在后端實現多線程能力，適合 CPU 密集型場景。

? 任務拆碎（把大活切成小碎活穿插著做）

• 利用 requestIdleCallback、setTimeout 分片處理數據，減少卡頓。

異步與同步的區別

同步（Synchronous）

• 執行順序嚴格，必須等待上一個任務完成后才能執行下一個。
• 阻塞主線程。

console.log("A")
document.querySelector("button").click() // 阻塞直到點擊
console.log("B")

異步（Asynchronous）

• 后臺處理任務，不阻塞主線程，通過回調或事件通知結果。

console.log("A")
setTimeout(() => console.log("B"), 1000)
console.log("C")
// 輸出順序：A -> C -> B

Promise、async 和 await 的理解與使用

Promise

• 用于封裝一個異步操作，避免回調地獄。
• 有三種狀態：pending（等待中）、fulfilled（已完成）、rejected（已拒絕）
• 通過 .then() / .catch() 鏈式處理結果。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true
      success ? resolve("數據加載成功") : reject("失敗")
    }, 1000)
  })
}

fetchData()
  .then((data) => console.log(data))
  .catch((err) => console.error(err))

async/await

• 是 Promise 的語法糖，讓異步代碼寫起來像同步代碼。
• 只能在 async 函數中使用。
• 使用 try/catch 更方便地處理異常。

async function getData() {
  try {
    const data = await fetchData()
    console.log("結果：", data)
  } catch (err) {
    console.error("出錯了：", err)
  }
}

getData()

總結

總之，單線程就像收銀臺只有一個店員，但現代網頁用各種辦法讓這個店員手腳麻利到飛起。