- 相關(guān)推薦
淺談javascript中的單線(xiàn)程理解
一、JavaScript 引擎是單線(xiàn)程的
可以從下面的代碼中看到，第一個(gè)用setTimeout中的代碼是死循環(huán)，由于是單線(xiàn)程，下面的兩個(gè)定時(shí)器就沒(méi)機會(huì )執行了。
瀏覽器的內核是多線(xiàn)程的，它們在內核制控下相互配合以保持同步，一個(gè)瀏覽器至少實(shí)現3個(gè)常駐線(xiàn)程：javascript引擎線(xiàn)程，GUI渲染線(xiàn)程，瀏覽器事件觸發(fā)線(xiàn)程。
JavaScript引擎是基于事件驅動(dòng)單線(xiàn)程執行的，JS引擎一直等待著(zhù)任務(wù)隊列中任務(wù)的到來(lái)然后加以處理，瀏覽器無(wú)論再什么時(shí)候都只有一個(gè)JS線(xiàn)程在運行JS程序。
GUI渲染線(xiàn)程負責渲染瀏覽器界面，當界面需要重繪(Repaint)或由于某種操作引發(fā)回流(reflow)時(shí),該線(xiàn)程就會(huì )執行。但需要注意 GUI渲染線(xiàn)程與JS引擎是互斥的，當JS引擎執行時(shí)GUI線(xiàn)程會(huì )被掛起，GUI更新會(huì )被保存在一個(gè)隊列中等到JS引擎空閑時(shí)立即被執行。
瀏覽器事件觸發(fā)線(xiàn)程，當一個(gè)事件被觸發(fā)時(shí)該線(xiàn)程會(huì )把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來(lái)自JavaScript引擎當前執行的代碼塊如setTimeOut、也可來(lái)自瀏覽器內核的其他線(xiàn)程如鼠標點(diǎn)擊、AJAX異步請求等，但由于JS的單線(xiàn)程關(guān)系所有這些事件都得排隊等待JS引擎處理。
由上圖可看出，瀏覽器中的JavaScript引擎是基于事件驅動(dòng)的，這里的事件可看作是瀏覽器派給它的各種任務(wù)，JavaScript引擎一直等待著(zhù)任務(wù)隊列中任務(wù)的到來(lái)，由于單線(xiàn)程關(guān)系，這些任務(wù)得進(jìn)行排隊，一個(gè)接著(zhù)一個(gè)被引擎處理。
t1、t2....tn表示不同的時(shí)間點(diǎn)，tn下面對應的小方塊代表該時(shí)間點(diǎn)的任務(wù)。
t1時(shí)刻：
1、GUI渲染線(xiàn)程
2、瀏覽器事件觸發(fā)線(xiàn)程：
在t1時(shí)間段內，首先是用戶(hù)點(diǎn)擊了一個(gè)鼠標鍵，點(diǎn)擊被瀏覽器事件觸發(fā)線(xiàn)程捕捉后形成一個(gè)鼠標點(diǎn)擊事件，由圖可知，對于JavaScript引擎線(xiàn)程來(lái)說(shuō)，這事件是由其它線(xiàn)程異步傳到任務(wù)隊列尾的,由于引擎正在處理t1時(shí)的任務(wù)，這個(gè)鼠標點(diǎn)擊事件正在等待處理。
3、定時(shí)觸發(fā)線(xiàn)程：
這里的瀏覽器模型定時(shí)計數器并不是由JavaScript引擎計數的，因為JavaScript引擎是單線(xiàn)程的，如果處于阻塞線(xiàn)程狀態(tài)就計不了時(shí)，它必須依賴(lài)外部來(lái)計時(shí)并觸發(fā)定時(shí)，所以隊列中的定時(shí)事件是異步事件。
4、在這t1的時(shí)間段內，繼鼠標點(diǎn)擊事件觸發(fā)后，先前已設置的setTimeout定時(shí)也到達了,此刻對JavaScript引擎來(lái)說(shuō)，定時(shí)觸發(fā)線(xiàn)程產(chǎn)生了一個(gè)異步定時(shí)事件并放到任務(wù)隊列中，該事件被排到點(diǎn)擊事件回調之后，等待處理。同理，還是在t1時(shí)間段內，接下來(lái)某個(gè)setInterval定時(shí)器也被添加了，由于是間隔定時(shí)，在t1段內連續被觸發(fā)了兩次，這兩個(gè)事件被排到隊尾等待處理。
5、ajax異步請求：
瀏覽器新開(kāi)一個(gè)http線(xiàn)程請求，當請求的狀態(tài)變更時(shí)，如果先前已設置回調，這異步線(xiàn)程就產(chǎn)生狀態(tài)變更事件放到JavaScript引擎的處理隊列中等待處理。
二、任務(wù)的執行順序不同，顯示結果也不同
1）未使用setTimeout函數
在網(wǎng)上找到的一段代碼實(shí)例，這里用來(lái)演示一下。
do something
我在firefox中執行了上面的代碼。計劃是點(diǎn)擊“do something”按鈕，然后顯示“doing...please wait...”，接著(zhù)執行sleep，最后顯示“done”。
但是結果是點(diǎn)擊后，瀏覽器卡住3秒左右，最后直接顯示done。
分析下看出，在做status.innerHTML設置的時(shí)候，是需要執行GUI渲染線(xiàn)程的，但是現在還在執行JavaScript引擎線(xiàn)程，而JavaScript引擎線(xiàn)程與GUI渲染線(xiàn)程是互斥的，所以就最后顯示了done。
2）使用了setTimeout函數
do something timer
在“doing...please wait...”后面加了個(gè)setTimeout，延時(shí)執行，給了瀏覽器渲染的時(shí)間，這個(gè)時(shí)候會(huì )顯示出“doing...please wait...”的字樣，然后執行sleep函數，最后顯示“done”。
后面有網(wǎng)友發(fā)現在firefox中不起作用，的確有這個(gè)問(wèn)題，后面我修改了一下代碼，將局部變量的聲明，onclick的綁定放到了window.onload事件中，等頁(yè)面結構加載完成后，我再做腳本操作。
【淺談javascript中的單線(xiàn)程理解】相關(guān)文章：
對javascript的理解03-29
有關(guān)深入理解JavaScript中的并行處理的介紹03-30
理解JavaScript原型鏈教程03-30
淺談如何深入學(xué)習Javascript中的this關(guān)鍵字04-02
javascript的閉包概念怎么理解03-29
在Java中執行JavaScript代碼04-01