簡單理解瀏覽器的event loop 和 JavaScript的同步異步

爲何JavaScript是單線程的?

JavaScript的主要用途是和用戶進行交互以及對DOM的操做,爲了不復雜的同步問題(若是多線程,A線程對某DOM添加內容,B線程對它又進行了刪除操做,這每每會產生問題),JavaScript在一誕生之際就是單線程,這已是這門語言的核心特徵,如今和未來都不會改變。

如何保證單線程內的任務執行起來更合理?

單線程就意味着，全部任務須要排隊，前一個任務結束，纔會執行後一個任務。若是前一個任務耗時很長，後一個任務就不得不一直等着。因而就有一個概念，任務隊列。

若是排隊是由於計算量大，CPU忙不過來，倒也算了，可是不少時候CPU是閒着的，由於IO設備（輸入輸出設備）很慢（好比Ajax操做從網絡讀取數據），不得不等着結果出來，再往下執行。

JavaScript語言的設計者意識到，這時主線程徹底能夠無論IO設備，掛起處於等待中的任務，先運行排在後面的任務。等到IO設備返回告終果，再回過頭，把掛起的任務繼續執行下去。

同步異步任務出現了!

因而，全部任務能夠分紅兩種，一種是同步任務（synchronous），另外一種是異步任務（asynchronous）。同步任務指的是，在主線程上排隊執行的任務，只有前一個任務執行完畢，才能執行後一個任務；異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有"任務隊列"通知主線程，某個異步任務能夠執行了，該任務纔會進入主線程執行。

只要主線程空了，就會去讀取"任務隊列"，這就是JavaScript的運行機制。這個過程會不斷重複。  

"任務隊列"是一個事件的隊列（也能夠理解成消息的隊列），IO設備完成一項任務，就在"任務隊列"中添加一個事件，表示相關的異步任務能夠進入"執行棧"了。主線程讀取"任務隊列"，就是讀取裏面有哪些事件。

"任務隊列"中的事件，除了IO設備的事件之外，還包括一些用戶產生的事件（好比鼠標點擊、頁面滾動等等）。只要指定過回調函數，這些事件發生時就會進入"任務隊列"，等待主線程讀取。

所謂"回調函數"（callback），就是那些會被主線程掛起來的代碼。異步任務必須指定回調函數，當主線程開始執行異步任務，就是執行對應的回調函數。

"任務隊列"是一個先進先出的數據結構，排在前面的事件，優先被主線程讀取。主線程的讀取過程基本上是自動的，只要執行棧一清空，"任務隊列"上第一位的事件就自動進入主線程。可是，因爲存在後文提到的"定時器"功能，主線程首先要檢查一下執行時間，某些事件只有到了規定的時間，才能進入主線程。

同步和異步

---

當主線程在運行的時候，會產生堆（heap）和棧（stack）,棧中的是同步任務,堆中的則是異步任務,只有棧中的同步任務執行完畢以後,主線程纔會去堆中執行異步事件,執行順序是按照"先入先出"的原則。

同步

若是在函數返回結果的時候，調用者可以拿到預期的結果(就是函數計算的結果)，那麼這個函數就是同步的.

console.log('我要作第一件事情');
console.log('我要作第二件事情');

若是函數是同步的，即便調用函數執行任務比較耗時，也會一致等待直到獲得執行結果。以下面的代碼：

console.log('我要作第一件事情');
setTimeout(function () {
  console.log('我忽然有事,晚點再作第二件事情');
},1000)
console.log('我要作第三件事情');

這段代碼的實現就叫作異步,也就是說不徹底按照順序去作,
突發狀況,第二件事情不能馬上完成,因此等待一段時間再去完成,
優先去作後面的第三件事情,這樣就不耽擱時間。

異步

若是在函數返回的時候，調用者還不能購獲得預期結果，而是未來經過必定的手段獲得（例如回調函數），這就是異步。例如ajax操做。 
若是函數是異步的，發出調用以後，立刻返回，可是不會立刻返回預期結果。調用者沒必要主動等待，當被調用者獲得結果以後會經過回調函數主動通知調用者。

栗子:

console.log("I am No.1");
setTimeout(function(){
   console.log("I am NO.2");
},0)
setTimeout(function(){
   console.log("I am NO.3");
},0)
console.log("I am No.4");

輸出結果是:

I am No.1;
I am No.4;
I am NO.2;
I am NO.3;

執行過程圖解:

理解了這些,相信你應該對Event Loop能夠有一個初步的瞭解。

---

 

Event Loop

---

理解到這裏就能夠引入Event Loop(事件循環)的概念了,正是由於主線程不斷的去任務隊列(task queue)中讀取事件,因此纔有了事件的不斷循環,也就是說當前主線程中的同步事件執行完畢後,主線程纔會去任務隊列中讀取異步事件,並且這個過程會一直重複下去,這就是事件循環。

上文講到，異步過程當中，工做線程在異步操做完成後須要通知主線程。那麼這個通知機制是怎樣實現的呢？答案是利用消息隊列和事件循環。用一句話歸納：

工做線程將消息放到消息隊列，主線程經過事件循環過程去取消息。

• 消息隊列：消息隊列是一個先進先出的隊列，它裏面存放着各類消息。
• 事件循環：事件循環就是主線程重複的從消息隊列中取出消息，執行的過程。取出一個消息並執行的過程就叫作一次循環。

實際上，主線程只會作一件事情，就是從消息隊列裏面取消息、執行消息，再取消息、再執行。當消息隊列爲空時，就會等待直到消息隊列變成非空。並且主線程只有在將當前的消息執行完成後，纔會去取下一個消息。這種機制就叫作事件循環機制，取一個消息並執行的過程叫作一次循環 

事件循環執行機制以下：

（1）全部同步任務都在主線程上執行，造成一個執行棧（execution context stack）。

（2）主線程以外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。

（3）一旦"執行棧"中的全部同步任務執行完畢，系統就會讀取"任務隊列"，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。

（4）主線程不斷重複上面的第三步。

 

主線程在執行完當前循環中的全部代碼後，就會到消息隊列取出這條消息，並執行它。到此爲止，就完成了工做線程對主線程的通知，回調函數也就獲得了執行。若是一開始主線程就沒有提供回調函數，AJAX線程在收到HTTP響應後，也就不必通知主線程，從而也不必往消息隊列放消息。如圖👇

主線程從任務隊列中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱爲Event Loop（事件循環）。

 小結

JS是單線程， 主線程執行同步代碼， 事件、I/O操做等異步任務，將會進入任務隊列執行，異步執行有結果以後，就會變爲等待狀態， 造成一個先進先出的執行棧，主線程的同步代碼執行完以後，再從」任務隊列」中讀取事件， 執行事件異步任務的回調。 這就是爲何執行順序是， 同步 > 異步 > 回調 更簡單的說：只要主線程空了（同步），就會去讀取」任務隊列」（異步），這就是JavaScript的運行機制。