如何理解JS的單執行緒?
JS本質是單執行緒的。也就是說,它並不能像JAVA語言那樣,兩個執行緒併發執行。
但我們平時看到的JS,分明是可以同時運作很多工的,這又是怎麼回事呢?
首先,JS的程式碼,大致分為兩類,同步程式碼和非同步程式碼。
console.log(1)
console.log(2)
console.log(3)
這是典型的同步程式碼,編寫順序就是執行順序。
JS引擎的主執行緒負責執行程式碼,由於只有這一個執行緒,執行當然是同步的,即按照順序來。
另外,還有一個叫做任務佇列的東西,所有的非同步程式碼都是從佇列當中來。
所以實際上我們會發現,JS根本不可能同時執行兩個任務,本質上還是單執行緒。
在JS中,所謂的非同步任務,有三種:
第一, 滑鼠鍵盤事件觸發,例如onclick、onkeydown等等
第二, 網路事件觸發,例如onload、onerror等等
第三, 定時器,例如setTimeout、setInterval
因為這些任務的發生都不是在當下,而是過段時間以後再執行。因此時間不可控,你不能因為5秒後要執行一個函式,就讓主執行緒閒置5秒什麼都不幹吧?所以你只能繼續執行後續的同步程式碼。而當你單擊滑鼠或滾動視窗時,主執行緒可能正在執行其它程式碼,忙著呢!沒工夫處理,因此,事件觸發執行緒就負責來接收這個事件,並把要執行的任務暫時儲存在任務佇列當中。等主執行緒把手裡的同步程式碼執行完,就立刻會向任務佇列提取最新的任務。
這也就解釋了為什麼我們總把JS的非同步函式叫做回撥了,因為真的不是馬上執行,而是回頭再調的!
我們來看個簡單的例子:
setTimeout(“console.log(2)”, 0);
console.log(1);
反覆執行這段程式碼,結果都是先列印1再列印2
因為,setTimeout是個非同步任務,第二個引數真正的含義是,在0毫秒之後,將程式碼插入任務佇列,而不是在0毫秒之後執行。
當插入任務佇列後,主執行緒會繼續執行後續的程式碼,也就是列印結果1,如果此時當前的同步程式碼已經執行完畢,則主執行緒立刻會從任務佇列中取出最新任務執行。再列印結果2。
平時我們使用定時器,時間往往不準確,就是因為在加入任務佇列時,前面可能已經有好多工在排隊了,你明明寫了80ms的延遲,可是卻等了100ms才出現結果。
同時,我們也理解了,為什麼setInterval的時間間隔不能設為0,一般情況下瀏覽器允許的最小值為16ms,因為如果設成0的話,對於瀏覽器來講,壓力簡直太大了,定時器觸發執行緒會玩命兒的往佇列中插入任務,而不是完成一個再插入一個。
我們再看一個關於ajax的例子
var req = newXMLHttpRequest();
req.open(“get“, ““);
req.>
req.send();
send方法和onload可以交換順序嗎?
實際上完全沒有影響。
為什麼說send方法和onload交換順序完全沒有問題呢?
因為send是一個非同步方法,也就是當我們把程式碼寫成這樣:
var req = newXMLHttpRequest();
req.open(“get“, ““);
req.send();
req.>
主執行緒在send方法執行時,由於是非同步方法,因此它不會立刻執行,而是存入任務佇列,然後繼續向下執行程式碼,新增onload事件。所以send方法無論如何都會在新增onload事件之後再執行,因此順序顛倒是無關要緊的。不過需要提醒的是,onload事件在新增時,並不會加入任務佇列,而是通知網路事件觸發執行緒,一旦網路請求結束,事件被觸發,該執行緒便會立刻向任務佇列中加入這個onload函式,從而完成回撥。
最後我們用一個完整的例子來觀察一下JS如何以單執行緒執行程式碼
setTimeout( a, 0);
setInterval( b,500);
for(......){
//假設迴圈執行了大量操作,花費時間1000ms
//而在for迴圈執行期間,使用者透過滑鼠觸發了一次單擊事件
}
console.log(123);
setInterval(c,250);
那麼任務佇列的情況如下:
我們按順序來解釋一下:
任務a,由於延遲為0,則以最短時間立即加入佇列。
任務b,等待500ms後,加入佇列,此時for迴圈執行過半
任務click,由於發生在for迴圈執行期間,所以此時出現
任務b,for迴圈結束時,又過了500ms,因此加入b
任務c,從for迴圈結束時開始計時,250ms後加入c
任務c,因為又過了250ms
任務b,與此同時,距離上次加入b間隔為500ms,因此加入b
往後,每出現兩次c,出現一次b
OK!今天的課到此結束!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996644/viewspace-2774719/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 單執行緒的js是如何工作的執行緒JS
- 好程式設計師web前端分享如何理解JS的單執行緒程式設計師Web前端JS執行緒
- web前端教程:如何理解JavaScript的單執行緒?Web前端JavaScript執行緒
- 如何理解執行緒執行緒
- 瀏覽器多執行緒和js單執行緒瀏覽器執行緒JS
- 詭異的JS非同步單執行緒是如何工作的JS非同步執行緒
- JS單執行緒和非同步JS執行緒非同步
- Concurrency(一:如何理解多執行緒)執行緒
- 單執行緒的JS如何實現多個互動同時進行執行緒JS
- 深入理解JVM(③)執行緒與Java的執行緒JVM執行緒Java
- 理解執行緒同步執行緒
- Node.js 執行緒你理解的可能是錯的Node.js執行緒
- 如何優雅的使用和理解執行緒池執行緒
- Node.js 的單執行緒事件驅動模型和內建的執行緒池模型Node.js執行緒事件模型
- 淺談JS中的非同步和單執行緒JS非同步執行緒
- 寶付初識單執行緒的 Node.js執行緒Node.js
- 深入理解執行緒池的執行流程執行緒
- 多執行緒Demo學習(執行緒的同步,簡單的執行緒通訊)執行緒
- js內部事件機制–單執行緒原理JS事件執行緒
- 簡單案例淺析JS執行緒機制JS執行緒
- 程式和執行緒理解執行緒
- 多執行緒:執行緒池理解和使用總結執行緒
- SingleThreadExecutor(單執行緒執行器)thread執行緒
- 淺談JS執行緒JS執行緒
- redis 單執行緒Redis執行緒
- 簡單的執行緒池執行緒
- JS定時器和單執行緒非同步特性JS定時器執行緒非同步
- 執行緒池中多餘的執行緒是如何回收的?執行緒
- 用VBoxDbg除錯並理解單執行緒版髒牛除錯執行緒
- 執行緒池的阻塞佇列的理解執行緒佇列
- 前端之JS的執行緒(最易懂)前端JS執行緒
- 【高併發】深入理解執行緒的執行順序執行緒
- Java 執行緒池中的執行緒複用是如何實現的?Java執行緒
- node.js的非同步I/O、事件驅動、單執行緒Node.js非同步事件執行緒
- 簡單的執行緒池(六)執行緒
- 簡單的執行緒池(四)執行緒
- 簡單的執行緒池(三)執行緒
- 簡單的執行緒池(九)執行緒