探索JavaScript執行機制

前言

不論是工作還是面試，我們可能都經常會碰到需要知道程式碼的執行順序的場景，所以打算花點時間徹底搞懂JavaScript的執行機制。

如果這篇文章有幫助到你，❤️關注+點贊❤️鼓勵一下作者，文章公眾號首發，關注 前端南玖 第一時間獲取最新的文章～

想要搞懂JavaScript執行機制，你需要清楚下面這些知識：（以瀏覽器環境為例，與Node環境不同）

程式與執行緒的概念
瀏覽器原理
事件迴圈（Event-Loop），任務佇列（同步任務，非同步任務，微任務，巨集任務）

程式與執行緒

想必在大學的作業系統原理課上大家都學過什麼是程式與執行緒。那我們一起來回顧一下吧～

我們都知道計算機的核心是CPU，它承擔了所有的計算任務；而作業系統是計算機的管理者，它負責任務的排程、資源的分配和管理，統領整個計算機硬體；應用程式則是具有某種功能的程式，程式是執行於作業系統之上的。

程式

程式是一個具有獨立功能的程式在一個資料集上的一次動態執行的過程，是作業系統進行資源分配和排程的一個獨立單位，是應用程式執行的載體 程式是能擁有資源和獨立執行的最小單位，也是程式執行的最小單位。

程式具有的特徵：

動態性：程式是程式的一次執行過程，是臨時的，有生命期的，是動態產生，動態消亡的；
併發性：任何程式都可以同其他程式一起併發執行；
獨立性：程式是系統進行資源分配和排程的一個獨立單位；
結構性：程式由程式、資料和程式控制塊三部分組成。

執行緒

執行緒是程式執行中一個單一的順序控制流程，是程式執行流的最小單元，是處理器排程和分派的基本單位。一個程式可以有一個或多個執行緒，各個執行緒之間共享程式的記憶體空間(也就是所在程式的記憶體空間)。一個標準的執行緒由執行緒ID、當前指令指標(PC)、暫存器和堆疊組成。而程式由記憶體空間(程式碼、資料、程式空間、開啟的檔案)和一個或多個執行緒組成。

程式與執行緒的區別

執行緒是程式執行的最小單位，而程式是作業系統分配資源的最小單位；
一個程式由一個或多個執行緒組成，執行緒是一個程式中程式碼的不同執行路線；
程式之間相互獨立，但同一程式下的各個執行緒之間共享程式的記憶體空間(包括程式碼段、資料集、堆等)及一些程式級的資源(如開啟檔案和訊號)，程式與程式之間互不可見；
排程和切換：執行緒上下文切換比程式上下文切換要快得多。

JS為什麼是單執行緒？

JavaScript從它誕生之初就是作為瀏覽器的指令碼語言，主要用來處理使用者互動以及操作DOM，這就決定了它只能是單執行緒的，否則會帶來非常複雜的同步問題。

舉個例子?： 如果JS是多執行緒的，其中一個執行緒要修改一個DOM元素，另外一個執行緒想要刪除這個DOM元素，這時候瀏覽器就不知道該聽誰的。所以為了避免複雜性，從一誕生，JavaScript就被設計成單執行緒。

為了利用多核CPU的計算能力，HTML5提出Web Worker標準，允許JavaScript指令碼建立多個執行緒，但是子執行緒完全受主執行緒控制，且不得操作DOM。所以，這個新標準並沒有改變JavaScript單執行緒的本質

瀏覽器原理

作為前端工程師，瀏覽器想必都不陌生，並且瀏覽器是多程式的。

瀏覽器組成部分

使用者介面：包括位址列，前進/後退/重新整理/書籤?等按鈕
瀏覽器引擎：在使用者介面和呈現引擎之間傳送指令
渲染引擎：用來繪製請求的內容
網路：用來完成網路呼叫，例如http請求，它具有平臺無關的介面，可以在不同平臺上工作
JavaScript直譯器：用來解析執行JavaScript程式碼
使用者介面後端：用於繪製基本的視窗小部件，比如組合框和視窗，底層使用作業系統的使用者介面
資料儲存：屬於持久層，瀏覽器在硬碟中儲存類似cookie的各種資料，HTML5定義了web database技術，這是一種輕量級完整的客戶端儲存技術

⚠️注意：與大多數瀏覽器不同的是，谷歌（Chrome）瀏覽器的每個標籤頁都分別對應一個呈現引擎例項。每個標籤頁都是一個獨立的程式

瀏覽器包含哪些程式

瀏覽器程式

瀏覽器的主程式(負責協調、主控)，該程式只有一個
負責瀏覽器介面顯示，與使用者互動。如前進，後退等
負責各個頁面的管理，建立和銷燬其他程式
將渲染(Renderer)程式得到的記憶體中的Bitmap(點陣圖)，繪製到使用者介面上
網路資源的管理，下載等

第三方外掛程式

負責管理第三方外掛

GPU程式

負責3D繪製與硬體加速（最多一個）

渲染程式

負責頁面文件解析，執行與渲染

渲染程式包含哪些執行緒

GUI渲染執行緒

主要負責解析HTML，CSS，構建DOM樹?，佈局，繪製等
該執行緒與JavaScript引擎執行緒互斥，當執行JavaScript引擎執行緒時，GUI渲染執行緒會被掛起，當任務佇列空閒時，主執行緒才會執行GUI渲染

JavaScript引擎執行緒

主要負責處理JavaScript指令碼，執行程式碼（如V8引擎）
瀏覽器同時只能有一個JS引擎執行緒在執行JS程式，即JS是單執行緒的
JS引擎執行緒與GUI渲染執行緒是互斥的，所以JS引擎會阻塞頁面渲染

定時觸發器執行緒

負責執行定時器函式（setTimeout，setInterval）
瀏覽器定時計數器並不是由JS引擎計數的（因為JS是單執行緒的，如果處於阻塞狀態就會影響計數器的準確性）
通過單獨執行緒來計時並觸發定時(計時完畢後，新增到事件觸發執行緒的事件佇列中，等待JS引擎空閒後執行)，這個執行緒就是定時觸發器執行緒，也叫定時器執行緒
W3C在HTML標準中規定，規定要求setTimeout中低於4ms的時間間隔算為4ms

事件觸發執行緒

負責將準備好的事件交給JS引擎執行緒執行
當事件被觸發時，該執行緒會把對應的事件新增到待處理佇列的隊尾，等待JS引擎處理

非同步請求執行緒

在XMLHttpRequest連線後瀏覽器會開一個執行緒
檢測請求狀態變更時，如果有對應的回撥函式，非同步請求執行緒就會產生狀態變更事件，並把對應的回撥函式放入佇列中等待JS引擎執行

同步與非同步

由於JavaScript是單執行緒的，這就決定了它的任務不可能只有同步任務，那些耗時很長的任務如果也按同步任務執行的話將會導致頁面阻塞，所以JavaScript任務一般分為兩類：

同步任務

同步任務指的是，在主執行緒上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；

非同步任務

非同步任務指的是，不進入主執行緒、而進入"任務佇列"（Event queue）的任務，只有"任務佇列"通知主執行緒，某個非同步任務可以執行了，該任務才會進入主執行緒執行。

常見的非同步任務： 定時器，ajax，事件繫結，回撥函式，promise，async await等

同步和非同步任務分別進入不同的執行"場所"，同步的進入主執行緒，非同步的進入Event Table並註冊函式。
當Event Table中指定的事情完成時，會將這個函式移入Event Queue。
主執行緒內的任務執行完畢為空，會去Event Queue讀取對應的函式，進入主執行緒執行。
上述過程會不斷重複，也就是常說的Event Loop(事件迴圈)。
我們不禁要問了，那怎麼知道主執行緒執行棧為空啊？js引擎存在monitoring process程式，會持續不斷的檢查主執行緒執行棧是否為空，一旦為空，就會去Event Queue那裡檢查是否有等待被呼叫的函式。

巨集任務與微任務

JavaScript除了廣義上的同步任務與非同步任務，還有更精細的任務定義：

巨集任務（macro-task）： 包括全域性程式碼，setTimeout，setInterval

微任務（micro-task）： new Promise().then(回撥) process.nextTick()

不同型別的任務會進入到不同的任務佇列：

事件迴圈的順序，決定js程式碼的執行順序。進入整體程式碼(巨集任務)後，開始第一次迴圈。接著執行所有的微任務。然後再次從巨集任務開始，找到其中一個任務佇列執行完畢，再執行所有的微任務。

執行棧與任務佇列

執行棧

JavaScript程式碼都是在執行上下文中執行的，在JavaScript中有三種執行上下文：

全域性執行上下文
函式執行上下文，JS函式被呼叫時都會建立一個函式執行上下文
eval執行上下文，eval函式產生的上下文（用的較少）

通常來說我們的JS程式碼都不止一個上下文，那麼這些上下文的執行順序是怎樣的呢？

我們都知道棧是一種後進先出的資料結構，我們JavaScript中的執行棧就是一種這樣的棧結構，當JS引擎執行程式碼時，會產生一個全域性上下文並把它壓入執行棧，每當遇到函式呼叫時，就會產生函式執行上下文並壓入執行棧。引擎從棧頂開始執行函式，執行完後會彈出該執行上下文。

function add(){
  console.log(1)
  foo()
  console.log(3)
}

function foo(){
  console.log(2)
}
add()

我們來看下上面這段程式碼的執行棧是怎樣的：

任務佇列

前面我們說到了JavaScript中所有的任務分為同步任務與非同步任務，同步任務，顧名思義就是立即執行的任務，它一般是直接進入到主執行緒中執行。而我們的非同步任務則是進入任務佇列等待主執行緒中的任務執行完再執行。

任務佇列是一個事件的佇列，表示相關的非同步任務可以進入執行棧了。主執行緒讀取任務佇列就是讀取裡面有哪些事件。

佇列是一種先進先出的資料結構。

上面我們說到非同步任務又可以分為巨集任務與微任務，所以任務佇列也可以分為巨集任務佇列與微任務佇列

Macrotask Queue：進行比較大型的工作，常見的有setTimeout，setInterval，使用者互動操作，UI渲染等；
Microtask Queue：進行較小的工作，常見的有Promise，Process.nextTick；

事件迴圈♻️（Event-Loop）

同步任務直接放入到主執行緒執行，非同步任務（點選事件，定時器，ajax等）掛在後臺執行，等待I/O事件完成或行為事件被觸發。
系統後臺執行非同步任務，如果某個非同步任務事件（或者行為事件被觸發），則將該任務新增到任務佇列，並且每個任務會對應一個回撥函式進行處理。
這裡非同步任務分為巨集任務與微任務，巨集任務進入到巨集任務佇列，微任務進入到微任務佇列。
執行任務佇列中的任務具體是在執行棧中完成的，當主執行緒中的任務全部執行完畢後，去讀取微任務佇列，如果有微任務就會全部執行，然後再去讀取巨集任務佇列
上述過程會不斷的重複進行，也就是我們常說的事件迴圈（Event-Loop）。

例題驗證

我們來看道題目進行驗證

(async ()=>{
    console.log(1) 
  
    setTimeout(() => {
    console.log('setTimeout1')
    }, 0);
  
    function foo (){
        return new Promise((res,rej) => {
            console.log(2)
            res(3)
        })
    }
  
    new Promise((resolve,reject)=>{
    console.log(4)
    resolve() 
    console.log(5)
    }).then(()=> {
    console.log('6')
    })
  
    const res = await foo();
    console.log(res);
    console.log('7')
  
    setTimeout(_ => console.log('setTimeout2'))
})()

列印順序是：1,4,5,2,6,3,7,setTimeout1,setTimeout2

分析：

程式碼自上而下執行，先遇到console.log(1),直接列印1，接著遇到定時器屬於巨集任務，放入巨集任務佇列
再遇到promise，由於new Promise是一個同步任務，所以直接列印4，遇到resolve，也就是後面的then函式，放入微任務佇列，再列印5
然後再執行await foo,foo函式裡面有個promise，new promise屬於同步任務，所以會直接列印2，await返回的是一個promise的回撥，await後面的任務放入微任務佇列
最後遇到一個定時器，放入巨集任務佇列
執行棧任務執行完了，先去微任務佇列獲取微任務執行，先執行第一個微任務，列印6，再執行第二個微任務，列印3，7
微任務執行完，再去巨集任務佇列獲取巨集任務執行，列印setTimeout1,setTimeout2

有趣的定時器

JavaScript的任務佇列中的非同步任務還包括定時器事件，即指定某些程式碼在多長時間後執行。定時器功能主要由setTimeout()和setInterval()兩個函式來完成，他們的內部執行機制完全一樣，區別主要在於setTimeout是一次執行的過程，setInterval則是反覆執行的過程。

setTimeout函式接受兩個引數，第一個是要執行的回撥函式，第二個是推遲執行的時間（ms)

如果我們把推遲時間設為0，是不是就會立即執行呢？

setTimeout(()=>{
    console.log(1)
},0)

console.log(2)

但事實並不是這樣的，上面的列印結果是先列印2，再列印1。是不是覺得很蒙？

我們用上面的事件迴圈的規則來理解就很清晰了，全域性程式碼執行，遇到定時器setTimeout,放入巨集任務佇列，接著往下執行同步程式碼，列印2，執行棧任務執行完再去微任務佇列，沒有微任務再去看巨集任務佇列，有一個巨集任務，執行列印1。

setTimeout(fn,0)的含義是，指定某個任務在主執行緒最早可得的空閒時間執行，也就是說，儘可能早得執行。它在"任務佇列"的尾部新增一個事件，因此要等到同步任務和"任務佇列"現有的事件都處理完，才會得到執行。

HTML5標準規定了setTimeout()的第二個引數的最小值（最短間隔），不得低於4毫秒，如果低於這個值，就會自動增加。在此之前，老版本的瀏覽器都將最短間隔設為10毫秒。另外，對於那些DOM的變動（尤其是涉及頁面重新渲染的部分），通常不會立即執行，而是每16毫秒執行一次。這時使用requestAnimationFrame()的效果要好於setTimeout()。

需要注意的是，setTimeout()只是將事件插入了"任務佇列"，必須等到當前程式碼（執行棧）執行完，主執行緒才會去執行它指定的回撥函式。要是當前程式碼耗時很長，有可能要等很久，所以並沒有辦法保證，回撥函式一定會在setTimeout()指定的時間執行。