不看不知道,JavaScript 是如何在後臺工作的

TG飛機duotebb 發表於 2022-06-21
JavaScript

你在 JavaScript 程式碼是如何執行之前有想過這個問題嗎?


我們都知道 JavaScript 是一種單執行緒和非阻塞的指令碼語言,那是什麼意思呢?

單執行緒 :這意味著一次只能發生一件事
非阻塞 :假設您正在執行一個函式,該函式在該任務期間需要 30 秒,我們正在等待 30 秒,然後才能發生其他任何事情! 當然,這不會發生

這意味著它不等待非同步程式碼的響應

為了更好地理解非同步 JavaScript,讓我們看一下下面的程式碼:

console.log("Hello 1"); setTimeout(function() {
  console.log("Goodbye!");    }, 3000);console.log("Hello 2 ");

跟我一起想想最後的結果是什麼..

程式碼結果

上面的程式碼發生了什麼?

JavaScript 逐行執行,但它是非阻塞語言,因此它會執行準備好的函式,並且函式需要稍後執行
所以對於非同步 JavaScript,JavaScript 在執行函式時不會等待響應,因此它首先執行“Hello 1”然後是“Hello 2”並在 3 秒後執行“再見!”

JavaScript 執行

實際的 JavaScript 執行非常簡單,但它與您首先需要了解的四個概念相關聯。

  • 呼叫堆疊
  • 網路 API
  • 回撥佇列
  • 事件迴圈

呼叫棧
JavaScript 只有一個呼叫棧,呼叫棧是
JS 引擎的一部分,當我們執行程式碼時呼叫一個函式,它會被
新增到呼叫棧中。 如果這個函式是非同步的,比如
(timeout(setTimeOut),Ajax request, ..) 它會移動到 web APIs 。
這意味著一次只能執行一件事

Web APIs
這是一個非同步函式存在的地方,直到它
完成執行,完成後它簡單地被新增
到回撥佇列中

回撥佇列
當瀏覽器完成時間(或
它為 JS 提供的任何其他 API)時,它不會
立即將要執行的程式碼傳輸回 JavaScript。 瀏覽器
完成後,會將程式碼儲存在回撥佇列中。 它是一個
包含一些函式或程式碼的佇列,這些函式或程式碼將
在以後被回撥。

事件迴圈
有一個簡單的工作,它檢查主堆疊是否為空,
當它為空時,它檢查回撥佇列。 如果
佇列中有待執行的程式碼,則將它們
一一轉移到呼叫堆疊中。 程式碼執行完後離開
棧,佇列中的下一個上來,直到
佇列為空

我們可以看到第一個函式被推送到呼叫堆疊
並立即在控制檯中執行 Hi,然後非同步
函式 (setTimeOut) 從呼叫堆疊轉移到 web apis 直到
它完成執行然後移動到回撥佇列,當呼叫堆疊
為空時,事件迴圈將非同步函式轉移到堆疊
執行。

結論

我們瞭解了誰在後臺執行同步和非同步程式碼
,我們知道呼叫
堆疊、Web api、回撥佇列和事件迴圈的含義是什麼。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/70019180/viewspace-2901863/,如需轉載,請註明出處,否則將追究法律責任。