大家先來看一道題：

a.onclick = function(){

setTimeout(function() {

//do something ...

},0);

};

JavaScript API 文檔明確定義：setTimeout的第二個(gè)參數(shù)意義為隔多少毫秒后,回調(diào)方法就會被執(zhí)行。那么可以推斷出：這里設(shè)成0毫秒,就立即被執(zhí)行了。

—————— 既然立即執(zhí)行，為什么這段代碼的作者為什么要 舍近求遠(yuǎn)？難道作者寫代碼的時(shí)候喝醉了？

顯然不是！

這個(gè)問題 David Flanagan 在《Javascript 權(quán)威指南》中有闡述：當(dāng) setTimeout 的延遲時(shí)間設(shè)置為 0 的時(shí)候，回調(diào)函數(shù)不會馬上執(zhí)行，而是進(jìn)入隊(duì)列。

David Flanagan 在《Javascript權(quán)威指南》里并沒有詳細(xì)描述Javascript隊(duì)列的具體運(yùn)作方式，現(xiàn)在我來大致說一下這個(gè)問題。

JavaScript 引擎是單線程模式運(yùn)行的，瀏覽器無論在什么時(shí)候都只且只有一個(gè)JavaScript線程在運(yùn)行程序。

要說清楚這些問題，還得從瀏覽器內(nèi)核處理定時(shí)器（setTimeout、setInterval）和響應(yīng)瀏覽器事件說起。

瀏覽器內(nèi)核實(shí)現(xiàn)允許多個(gè)線程異步執(zhí)行，這些線程在內(nèi)核制控下相互配合以保持同步。假設(shè)某一瀏覽器內(nèi)核的實(shí)現(xiàn)至少有三個(gè)常駐線程：javascript引擎線程、界面渲染線程、瀏覽器事件觸發(fā)線程。除些以外，也有一些執(zhí)行完就終止的線程：如Http請求線程等，這些異步線程都會產(chǎn)生不同的異步事件。

下面通過一個(gè)圖來闡明單線程的JavaScript引擎與另外那些線程是怎樣互動通信的。雖然每個(gè)瀏覽器內(nèi)核 （流行瀏覽器內(nèi)核有：Trident[IE內(nèi)核]、Gecko[Firefox內(nèi)核]、Presto[Opera內(nèi)核]、Webkit[Chrome、Safari] 等） 實(shí)現(xiàn)細(xì)節(jié)不同，但這其中的調(diào)用原理都是大同小異。

JavaScript定時(shí)機(jī)制、以及瀏覽器渲染機(jī)制 淺談 javascript-thread

瀏覽器中的JavaScript引擎是基于事件驅(qū)動的。這里的事件可看作是瀏覽器派給它的各種任務(wù)，如調(diào)用setTimeout 添加一個(gè)任務(wù)，也可來自瀏覽器內(nèi)核的其它線程，如界面元素鼠標(biāo)點(diǎn)擊事件、定時(shí)觸發(fā)器時(shí)間到達(dá)通知、異步請求狀態(tài)變更通知等。

從代碼角度看來任務(wù)實(shí)體就是各種回調(diào)函數(shù)，JavaScript引擎一直等待著任務(wù)隊(duì)列中任務(wù)的到來。由于單線程關(guān)系,這些任務(wù)得進(jìn)行排隊(duì)，一個(gè)接著一個(gè)被引擎處理。

圖形界面渲染線程：

該線程負(fù)責(zé)渲染瀏覽器界面HTML元素，當(dāng)界面需要重繪或由于某種操作引發(fā)回流時(shí)，該線程就會執(zhí)行。

我今天想重點(diǎn)解釋JavaScript定時(shí)機(jī)制，但這時(shí)有必要說說渲染線程，因?yàn)樵摼€程與JavaScript引擎線程是互斥的！這一點(diǎn)Yahoo 前端攻城師在博客上有一篇詳細(xì)文章描述這個(gè)問題。這也容易理解：因?yàn)镴avaScript腳本是可操縱DOM元素，在修改這些元素屬性同時(shí)渲染界面，那么渲染線程前后獲得的元素?cái)?shù)據(jù)就可能不一致了。

在JavaScript引擎運(yùn)行腳本期間，瀏覽器渲染線程都是處于掛起狀態(tài)的，也就是說被”凍結(jié)”了（題外話：YSlow優(yōu)化網(wǎng)頁建議指南指出：js文件要放在html內(nèi)容的下面，就是因?yàn)榧虞d js 的時(shí)候，會阻塞 DOM樹的構(gòu)建。這一點(diǎn)可以再Yahoo工程師的前端優(yōu)化方案里面看到）。

GUI事件觸發(fā)線程：

JavaScript腳本的執(zhí)行不影響html元素事件的觸發(fā)，在Time1時(shí)間段內(nèi)，用戶點(diǎn)擊鼠標(biāo)鍵，點(diǎn)擊事件被瀏覽器事件觸發(fā)線程捕捉后，形成一個(gè)鼠標(biāo)點(diǎn)擊事件，對于JavaScript引擎線程來說，這事件是由其它線程異步傳到任務(wù)隊(duì)列尾的，由于引擎正在處理 Time1 時(shí)的任務(wù)，這個(gè)鼠標(biāo)點(diǎn)擊事件就會排隊(duì)。

定時(shí)觸發(fā)線程:

注意這里的瀏覽器模型定時(shí)計(jì)數(shù)器并不是由JavaScript引擎計(jì)數(shù)的，因?yàn)镴avaScript引擎是單線程的，如果處于阻塞線程狀態(tài)就不能計(jì)時(shí)，它必須依賴外部來計(jì)時(shí)并觸發(fā)定時(shí)，所以隊(duì)列中的定時(shí)事件也是異步事件。

更多信息請查看IT技術(shù)專欄