JavaScript 是一種單線程語言,這意味著它一次只能執(zhí)行一個任務。這種設計可能會導致一些問題,比如當遇到耗時的操作時,整個程序可能會被阻塞。為了解決這個問題,JavaScript 使用了事件循環(huán)和回調函數(shù)的機制,實現(xiàn)了非阻塞式的異步操作。

事件循環(huán)

JavaScript 有一個事件隊列,用于存放需要執(zhí)行的任務。事件循環(huán)不斷地檢查這個事件隊列,當隊列中有可執(zhí)行的任務時,就從隊列中取出任務執(zhí)行。

當 JavaScript 遇到耗時的操作(如 I/O 操作)時,它會將這些操作交給瀏覽器或 Node.js 運行時處理,并繼續(xù)執(zhí)行事件循環(huán)中的其他任務。這樣可以確保主線程不會被阻塞,保持程序的響應性和交互性。

宏任務和微任務

事件隊列中的任務分為兩種類型:宏任務和微任務。

• 宏任務包括常見的 JavaScript 代碼、setTimeout、setInterval 等。這些任務會被添加到事件隊列的末尾,等待事件循環(huán)執(zhí)行。
• 微任務包括 Promise 的回調、process.nextTick (Node.js) 等。這些任務會被添加到當前宏任務執(zhí)行完成后的微任務隊列中,優(yōu)先于下一個宏任務執(zhí)行。

事件循環(huán)在執(zhí)行一個宏任務后,會檢查并執(zhí)行所有的微任務隊列,然后再執(zhí)行下一個宏任務。這種機制確保了微任務可以更快地得到執(zhí)行,提高了程序的響應性。

回調函數(shù)

當耗時的操作完成時,瀏覽器或 Node.js 運行時會觸發(fā)一個事件,并將相應的回調函數(shù)放入事件隊列中。

事件循環(huán)會檢測到這個回調函數(shù),并從隊列中取出執(zhí)行它。這就實現(xiàn)了非阻塞式的異步操作,防止單線程的 JavaScript 被耗時的操作阻塞。

實際應用

這種事件循環(huán)、宏任務和微任務的機制在 JavaScript 編程中廣泛應用:

1. 網(wǎng)頁交互: 在網(wǎng)頁開發(fā)中,我們經常使用回調函數(shù)來處理用戶交互,如點擊事件、表單提交等。這些操作通常不會阻塞主線程,確保頁面保持高度響應性。
2. 網(wǎng)絡請求: 當發(fā)送 AJAX 請求時,我們通常會使用回調函數(shù)來處理服務器的響應。這樣可以確保在請求過程中,用戶仍然可以與頁面進行交互。
3. 定時器: setTimeout() 和 setInterval() 函數(shù)也利用了事件循環(huán)的機制。它們會將定時器任務添加到事件隊列中,等待執(zhí)行。
4. Node.js 中的異步操作: Node.js 也是基于事件循環(huán)和回調函數(shù)的機制實現(xiàn)異步操作,如文件 I/O、數(shù)據(jù)庫查詢等。這確保了 Node.js 應用程序可以高效地處理大量并發(fā)請求。

此外,還有一些其他的應用場景:

1. 事件驅動模型: JavaScript 的事件循環(huán)機制很適合實現(xiàn)事件驅動模型,這在 Web 開發(fā)和 Node.js 中廣泛應用。
2. 錯誤處理: 當異步操作發(fā)生錯誤時,可以通過回調函數(shù)的方式進行錯誤處理,避免整個程序崩潰。
3. 流式處理: 在處理大量數(shù)據(jù)時,可以使用流的方式進行異步處理,提高性能和內存利用率。

javaScript 如何實現(xiàn)高并發(fā)與多線程？

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

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

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

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

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

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

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

? Node.js 中的 Worker Threads

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

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

• 利用 requestIdleCallback、setTimeout 分片處理數(shù)據(jù)，減少卡頓。

異步與同步的區(qū)別

同步（Synchronous）

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

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

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

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

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

async/await

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

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

getData()

總結

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

到此這篇關于淺談JavaScript 單線程防阻塞的原理的文章就介紹到這了,更多相關JavaScript 單線程防阻塞內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論