JavaScript運行機制是怎么樣的

這篇文章主要介紹了JavaScript運行機制是怎么樣的，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JS的運行機制

1. js單線程

JavaScript語言的一大特點就是單線程，即同一時間只能做一件事情。

JavaScript的單線程，與它的用途有關。作為瀏覽器腳本語言，JavaScript的主要用途是與用戶互動，以及操作DOM。這決定了它只能是單線程，否則會帶來很復雜的同步問題。比如，假定JavaScript同時有兩個線程，一個線程在某個DOM節點上添加內容，另一個線程刪除了這個節點，這時瀏覽器應該以哪個線程為準？

所以，為了避免復雜性，從一誕生，JavaScript就是單線程，這已經成了這門語言的核心特征，將來也不會改變。

2. js事件循環

js代碼執行過程中會有很多任務，這些任務總的分成兩類：

• 同步任務

• 異步任務

當我們打開網站時，網頁的渲染過程就是一大堆同步任務，比如頁面骨架和頁面元素的渲染。而像加載圖片音樂之類占用資源大耗時久的任務，就是異步任務。，我們用導圖來說明：  我們解釋一下這張圖：

• 同步和異步任務分別進入不同的執行"場所"，同步的進入主線程，異步的進入Event Table并注冊函數。

• 當指定的事情完成時，Event Table會將這個函數移入Event Queue。

• 主線程內的任務執行完畢為空，會去Event Queue讀取對應的函數，進入主線程執行。

• 上述過程會不斷重復，也就是常說的Event Loop(事件循環)。

那主線程執行棧何時為空呢？js引擎存在monitoring process進程，會持續不斷的檢查主線程執行棧是否為空，一旦為空，就會去Event Queue那里檢查是否有等待被調用的函數。

以上就是js運行的整體流程

需要注意的是除了同步任務和異步任務，任務還可以更加細分為macrotask(宏任務)和microtask(微任務)，js引擎會優先執行微任務

微任務包括了 promise 的回調、node 中的 process.nextTick 、對 Dom 變化監聽的 MutationObserver。

宏任務包括了 script 腳本的執行、setTimeout ，setInterval ，setImmediate 一類的定時事件，還有如 I/O 操作、UI 渲
染等。

面試中該如何回答呢？ 下面是我個人推薦的回答：

1. 首先js 是單線程運行的，在代碼執行的時候，通過將不同函數的執行上下文壓入執行棧中來保證代碼的有序執行。

2. 在執行同步代碼的時候，如果遇到了異步事件，js 引擎并不會一直等待其返回結果，而是會將這個事件掛起，繼續執行執行棧中的其他任務

3. 當同步事件執行完畢后，再將異步事件對應的回調加入到與當前執行棧中不同的另一個任務隊列中等待執行。

4. 任務隊列可以分為宏任務對列和微任務對列，當當前執行棧中的事件執行完畢后，js 引擎首先會判斷微任務對列中是否有任務可以執行，如果有就將微任務隊首的事件壓入棧中執行。

5. 當微任務對列中的任務都執行完成后再去判斷宏任務對列中的任務。

最后可以用下面一道題檢測一下收獲：

setTimeout(function() {
  console.log(1)}, 0);new Promise(function(resolve, reject) {
  console.log(2);
  resolve()}).then(function() {
  console.log(3)});process.nextTick(function () {
  console.log(4)})console.log(5)

第一輪：主程開始執行，遇到setTimeout，將setTimeout的回調函數丟到宏任務隊列中，在往下執行new Promise立即執行，輸出2，then的回調函數丟到微任務隊列中，再繼續執行，遇到process.nextTick，同樣將回調函數扔到為任務隊列，再繼續執行，輸出5，當所有同步任務執行完成后看有沒有可以執行的微任務，發現有then函數和nextTick兩個微任務，先執行哪個呢？process.nextTick指定的異步任務總是發生在所有異步任務之前，因此先執行process.nextTick輸出4然后執行then函數輸出3，第一輪執行結束。 第二輪：從宏任務隊列開始，發現setTimeout回調，輸出1執行完畢，因此結果是25431

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript運行機制是怎么樣的”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!