Javascript是單執行緒的深入分析

在看一篇關於《JavaScript —— 下一代物聯網全棧開發》的部落格時，順便了解了下Javascript是單執行緒這個問題，看到網上有人解釋的很清楚了，特轉過來。需要的人也可以瞭解學習一下。

面試的時候發現99%的童鞋不理解為什麼JavaScript是單執行緒的卻能讓AJAX非同步傳送和回撥請求，還有setTimeout也看起來像是多執行緒的？還有non-blocking IO, event loop等概念很不清楚。來深入分析一下：

首先看下面的程式碼：

1 2 3 4 5 6 7 8 9

function foo() {     console.log( 'first' );     setTimeout( ( function(){ console.log( 'second' ); } ), 5);   }   for (var i = 0; i < 1000000; i++) {     foo(); }

執行結果會首先全部輸出first，然後全部輸出second；儘管中間的執行會超過5ms。為什麼？

Javascript是單執行緒的

因為JS執行在瀏覽器中，是單執行緒的，每個window一個JS執行緒，既然是單執行緒的，在某個特定的時刻只有特定的程式碼能夠被執行，並阻塞其它的程式碼。而瀏覽器是事件驅動的（Event driven），瀏覽器中很多行為是非同步（Asynchronized）的，會建立事件並放入執行佇列中。javascript引擎是單執行緒處理它的任務佇列，你可以理解成就是普通函式和回撥函式構成的佇列。當非同步事件發生時，如mouse click, a timer firing, or an XMLHttpRequest completing（滑鼠點選事件發生、定時器觸發事件發生、XMLHttpRequest完成回撥觸發等），將他們放入執行佇列，等待當前程式碼執行完成。

非同步事件驅動

前面已經提到瀏覽器是事件驅動的（Event driven），瀏覽器中很多行為是非同步（Asynchronized）的，例如：滑鼠點選事件、視窗大小拖拉事件、定時器觸發事件、XMLHttpRequest完成回撥等。當一個非同步事件發生的時候，它就進入事件佇列。瀏覽器有一個內部大訊息迴圈，Event Loop（事件迴圈），會輪詢大的事件佇列並處理事件。例如，瀏覽器當前正在忙於處理onclick事件，這時另外一個事件發生了（如：window onSize），這個非同步事件就被放入事件佇列等待處理，只有前面的處理完畢了，空閒了才會執行這個事件。setTimeout也是一樣，當呼叫的時候，js引擎會啟動定時器timer，大約xxms以後執行xxx，當定時器時間到，就把該事件放到主事件佇列等待處理（瀏覽器不忙的時候才會真正執行）。

每個瀏覽器具體實現主事件佇列不盡相同，這不談了。

瀏覽器不是單執行緒的

雖然JS執行在瀏覽器中，是單執行緒的，每個window一個JS執行緒，但瀏覽器不是單執行緒的，例如Webkit或是Gecko引擎，都可能有如下執行緒：

• javascript引擎執行緒
• 介面渲染執行緒
• 瀏覽器事件觸發執行緒
• Http請求執行緒

很多童鞋搞不清，如果js是單執行緒的，那麼誰去輪詢大的Event loop事件佇列？答案是瀏覽器會有單獨的執行緒去處理這個佇列。

Ajax非同步請求是否真的非同步?

很多童鞋搞不清楚，既然說JavaScript是單執行緒執行的，那麼XMLHttpRequest在連線後是否真的非同步? 
其實請求確實是非同步的，這請求是由瀏覽器新開一個執行緒請求（見前面的瀏覽器多執行緒）。當請求的狀態變更時，如果先前已設定回撥，這非同步執行緒就產生狀態變更事件放到 JavaScript引擎的事件處理佇列中等待處理。當瀏覽器空閒的時候出佇列任務被處理，JavaScript引擎始終是單執行緒執行回撥函式。javascript引擎確實是單執行緒處理它的任務佇列，能理解成就是普通函式和回撥函式構成的佇列。

總結一下，Ajax請求確實是非同步的，這請求是由瀏覽器新開一個執行緒請求，事件回撥的時候是放入Event loop單執行緒事件佇列等候處理。

setTimeout(func, 0)為什麼有時候有用？

寫js多的童鞋可能發現，有時候加一個setTimeout(func, 0)非常有用，為什麼？難道是模擬多執行緒嗎？錯！前面已經說過了，javascript是JS執行在瀏覽器中，是單執行緒的，每個window一個JS執行緒，既然是單執行緒的，setTimeout(func, 0)神奇在哪兒？那就是告訴js引擎，在0ms以後把func放到主事件佇列中，等待當前的程式碼執行完畢再執行，注意：重點是改變了程式碼流程，把func的執行放到了等待當前的程式碼執行完畢再執行。這就是它的神奇之處了。它的用處有三個：

• 讓瀏覽器渲染當前的變化（很多瀏覽器UI render和js執行是放在一個執行緒中，執行緒阻塞會導致介面無法更新渲染）
• 重新評估”script is running too long”警告
• 改變執行順序

例如：下面的例子，點選按鈕就會顯示"calculating...."，如果刪除setTimeout就不會。因為reDraw事件被進入事件佇列到長時間操作的最後才能被執行，所以無法重新整理。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<button id='do'> Do long calc!</button> <div id='status'></div> <div id='result'></div>     $('#do').on('click', function(){      $('#status').text('calculating....'); //此處會觸發redraw事件的fired，但會放到佇列裡執行，直到long()執行完。      // without set timeout, user will never see "calculating...."   //long();//執行長時間任務，阻塞       // with set timeout, works as expected   setTimeout(long,50);//用定時器，大約50ms以後執行長時間任務，放入執行佇列，但在redraw之後了，根據先進先出原則     })          function long(){   var result = 0   for (var i = 0; i<1000; i++){     for (var j = 0; j<1000; j++){       for (var k = 0; k<1000; k++){         result = result + i+j+k       }     }   }   $('#status').text('calclation done') // has to be in here for this example. or else it will ALWAYS run instantly. This is the same as passing it a callback }

非阻塞js的實現（non-blocking javascript）

js在瀏覽器中需要被下載、解釋並執行這三步。在html body標籤中的script都是阻塞的。也就是說，順序下載、解釋、執行。儘管Chrome可以實現多執行緒並行下載外部資源，例如：script file、image、frame等（css比較複雜，在IE中不阻塞下載，但Firefox阻塞下載）。但是，由於js是單執行緒的，所以儘管瀏覽器可以併發加快js的下載，但必須依次執行。所以chrome中image圖片資源是可以併發下載的，但外部js檔案併發下載沒有多大意義。

要實現非阻塞js（non-blocking javascript）有兩個方法：1. html5 2. 動態載入js

首先一種辦法是HTML5的defer和async關鍵字：

defer

1	<script type="text/javascript" defer src="foo.js"></script>

async

1	<script type="text/javascript" async src="foo.js"></script>

然後第二種方法是動態載入js：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

setTimeout(function(){     var script = document.createElement("script");     script.type = "text/javascript";     script.src = "foo.js";     var head = true; //加在頭還是尾     if(head)       document.getElementsByTagName("head")[0].appendChild(script);     else       document.body.appendChild(script); }, 0);   //另外一個獨立的動態載入js的函式 function loadJs(jsurl, head, callback){     var script=document.createElement('script');     script.setAttribute("type","text/javascript");           if(callback){         if (script.readyState){  //IE             script.onreadystatechange = function(){                 if (script.readyState == "loaded" ||                         script.readyState == "complete"){                     script.onreadystatechange = null;                     callback();                 }             };         } else {  //Others             script.onload = function(){                 callback();             };         }     }     script.setAttribute("src", jsurl);           if(head)      document.getElementsByTagName('head')[0].appendChild(script);     else       document.body.appendChild(script);   }