Javascript是單線程的深刻分析

面試的時候發現99%的童鞋不理解爲何JavaScript是單線程的卻能讓AJAX異步發送和回調請求，還有setTimeout也看起來像是多線程的？還有non-blocking IO, event loop等概念很不清楚。來深刻分析一下：

首先看下面的代碼：

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事件被進入事件隊列到長時間操做的最後才能被執行，因此沒法刷新。

<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

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

async

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

而後第二種方法是動態加載js：

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); 

}