調用棧:JavaScript 執行的核心

JavaScript 本身是單線程的,這意味著它每次只能執行一個任務。調用棧用于管理代碼的執行。每當我們執行一個新的操作,比如輸出 console.log,一個新的執行上下文會被創建并推入調用棧中進行評估。

例如,以下代碼執行時,console.log(1) 會被添加到調用棧,然后執行并輸出 1。接下來,console.log(2) 被執行,依此類推。


單線程的限制:長時間運行任務的問題

由于 JavaScript 只有一個線程,如果我們有一個長時間運行的任務(例如復雜的計算),它會阻塞調用棧,直到任務完成。這就導致了整個程序的“凍結”現象。


Web APIs:解鎖異步任務的強大功能

為了避免這種阻塞,JavaScript 使用 Web APIs 允許我們執行異步任務,如網絡請求、定時器等。通過 Web APIs,我們可以將長時間運行的任務交給瀏覽器去處理,而不是阻塞主線程。


回調函數(Callback-based APIs)

Web APIs 提供的回調函數可以在異步任務完成后觸發。例如,Geolocation API 允許我們獲取用戶的地理位置,操作是通過回調函數來處理的。

  1. 使用 getCurrentPosition 方法獲取地理位置。
  2. 任務被加入調用棧,完成后會將回調函數推入任務隊列(Task Queue)。
  3. 事件循環負責檢查調用棧并將任務從任務隊列移入執行。

微任務隊列(Microtask Queue)

與回調函數不同,Promise 基于微任務隊列(Microtask Queue)進行異步操作。事件循環優先處理微任務隊列中的任務,然后再處理任務隊列。微任務隊列專門處理 thencatchfinally 等回調。(字幕時間節點:6:22


Promise 與微任務的優先級

當我們調用 fetch API 時,它返回一個 Promise,這個 Promise 在后臺處理網絡請求。當 Promise 完成時,它的回調會被推入微任務隊列,并優先于其他任務執行。(字幕時間節點:7:09


總結:事件循環、任務隊列與微任務隊列的工作原理

  1. 調用棧:JavaScript 在每次只能執行一個任務時,使用調用棧來管理任務的執行。
  2. Web APIs:通過 Web APIs 執行異步任務,避免阻塞調用棧。
  3. 回調隊列與微任務隊列:回調隊列用于普通的回調函數,而微任務隊列優先處理 Promise 的回調函數。
  4. 事件循環:事件循環不斷檢查調用棧是否為空,并優先處理微任務隊列中的任務,然后再執行任務隊列中的回調。

通過對事件循環和任務隊列的理解,開發者可以更好地掌控 JavaScript 異步編程的工作原理,避免常見的陷阱。


小提示:

如果你還沒有完全理解任務隊列、微任務隊列和事件循環的工作原理,建議你自己動手實踐,使用 setTimeoutPromise 來觀察不同任務的執行順序。這樣可以更深入地理解 JavaScript 的異步機制。

原文引自YouTube視頻:https://www.youtube.com/watch?v=eiC58R16hb8

上一篇:

使用NestJS和Prisma構建REST API:身份驗證

下一篇:

介紹:API 與 JavaScript 的基礎
#你可能也喜歡這些API文章!

我們有何不同?

API服務商零注冊

多API并行試用

數據驅動選型,提升決策效率

查看全部API→
??

熱門場景實測,選對API

#AI文本生成大模型API

對比大模型API的內容創意新穎性、情感共鳴力、商業轉化潛力

25個渠道
一鍵對比試用API 限時免費

#AI深度推理大模型API

對比大模型API的邏輯推理準確性、分析深度、可視化建議合理性

10個渠道
一鍵對比試用API 限時免費