JavaScript之運行機制及 Event Loop__Java

JavaScript之運行機制及 Event Loop 1. JavaScript是單線程

JavaScript語言的一大特點就是單線程，也就是說，同一個時間只能做一件事。為了利用多核CPU的計算能力，HTML5提出WebWorker標準，允許JavaScript指令碼建立多個線程，但是子線程完全受主線程式控制制，且不得操作DOM。所以，這個新標準並沒有改變JavaScript單線程的本質。 2. 任務隊列 單線程：所有任務需要排隊，前一個任務結束，才會執行後一個任務。 如果排隊是因為計算量大，CPU忙不過來，倒也算了，但是很多時候CPU是閑著的，因為IO裝置（輸入輸出裝置）很慢（比如Ajax操作從網路讀取資料），不得不等著結果出來，再往下執行。 於是，所有任務可以分成兩種，一種是同步任務（synchronous），另一種是非同步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；非同步任務指的是，不進入主線程、而進入”任務隊列”（task queue）的任務，只有”任務隊列”通知主線程，某個非同步任務可以執行了，該任務才會進入主線程執行。 具體來說，非同步執行的運行機制如下。（同步執行也是如此，因為它可以被視為沒有非同步任務的非同步執行。）
所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。 主線程之外，還存在一個”任務隊列”（task queue）。只要非同步任務有了運行結果，就在”任務隊列”之中放置一個事件。 一旦”執行棧”中的所有同步任務執行完畢，系統就會讀取”任務隊列”，看看裡面有哪些事件。那些對應的非同步任務，於是結束等待狀態，進入執行棧，開始執行。 主線程不斷重複上面的第三步。只要主線程空了，就會去讀取”任務隊列”，這就是JavaScript的運行機制。這個過程會不斷重複。
3. 事件和回呼函數 “任務隊列”是一個事件的隊列，IO裝置完成一項任務，就在”任務隊列”中添加一個事件，表示相關的非同步任務可以進入”執行棧”了。主線程讀取”任務隊列”，就是讀取裡面有哪些事件。 “任務隊列”中的事件，除了IO裝置的事件以外，還包括一些使用者產生的事件（比如滑鼠點擊、頁面滾動等等）。只要指定過回呼函數，這些事件發生時就會進入”任務隊列”，等待主線程讀取。 所謂”回呼函數”（callback），就是那些會被主線程掛起來的代碼，回呼函數放在任務隊列中。非同步任務必須指定回呼函數，當主線程開始執行非同步任務，就是執行對應的回呼函數。 “任務隊列”是一個先進先出的資料結構，排在前面的事件，優先被主線程讀取。主線程的讀取過程基本上是自動的，只要執行棧一清空，”任務隊列”上第一位的事件就自動進入主線程。但是，由於存在後文提到的”定時器”功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的時間，才能返回主線程。 如果執行棧沒有執行完的話，是永遠不會觸發callback的，任務隊列也不會被執行。 4. Event Loop

主線程從”任務隊列”中讀取事件，這個過程是迴圈不斷的，所以整個的這種運行機制又稱為Event Loop（事件迴圈）。
為了更好地理解Event Loop，請看下圖：

上圖中，主線程啟動並執行時候，產生堆（heap）和棧（stack），棧中的代碼調用各種外部API，它們在”任務隊列”中加入各種事件（click，load，done）。只要棧中的代碼執行完畢，主線程就會去讀取”任務隊列”，依次執行那些事件所對應的回呼函數。\
- 執行棧中的代碼（同步任務），總是在讀取”任務隊列”（非同步任務）之前執行。請看下面這個例子。

var req = new XMLHttpRequest();req.open('GET', url);    req.onload = function a(){};    req.onerror = function b(){};    req.send();

上面代碼中的req.send方法是Ajax操作向伺服器發送資料，它是一個非同步任務，意味著只有當前指令碼的所有代碼執行完，系統才會去讀取”任務隊列”。所以，它與下面的寫法等價。

var req = new XMLHttpRequest();req.open('GET', url);req.send();req.onload = function a(){};    req.onerror = function b(){};  

也就是說，指定回呼函數的部分（onload和onerror），在send()方法的前面或後面無關緊要，因為它們屬於執行棧的一部分，系統總是執行完它們，才會去讀取”任務隊列”。
function a,b就是存放在任務隊列中，當事件觸發，且執行棧為空白，就會去任務隊列中讀取a，b執行。 5. 定時器

除了放置非同步任務的事件，”任務隊列”還可以放置定時事件，即指定某些代碼在多少時間之後執行。定時器功能主要由setTimeout()和setInterval()這兩個函數來完成，它們的內部運行機制完全一樣，區別在於前者指定的代碼是一次性執行，後者則為反覆執行。以下主要討論setTimeout()。

console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3);

上面代碼的執行結果是1，3，2，因為setTimeout()將第二行延遲到1000毫秒之後執行。如果將setTimeout()的第二個參數設為0，就表示當前代碼執行完（執行棧清空）以後，立即執行（0毫秒間隔）指定的回呼函數。

setTimeout(function(){console.log(1);}, 0);console.log(2);

上面代碼的執行結果總是2，1，因為只有在執行完第二行以後，系統才會去執行”任務隊列”中的回呼函數。\
需要注意的是，setTimeout()只是將事件插入了”任務隊列”，必須等到當前代碼（執行棧）執行完，主線程才會去執行它指定的回呼函數。要是當前代碼耗時很長，有可能要等很久，所以並沒有辦法保證，回呼函數一定會在setTimeout()指定的時間執行。 6.總結

JS是單線程，主線程執行完執行棧的任務後去檢查非同步任務隊列，如果非同步事件觸發，則將其加到主線程的執行棧。 參考： JavaScript 運行機制詳解：再談Event Loop 從setTimeout談JavaScript運行機制