JavaScript單線(xiàn)程和任務(wù)隊(duì)列原理解析
這篇文章主要介紹了JavaScript單線(xiàn)程和任務(wù)隊(duì)列原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、JavaScript為什么設(shè)計(jì)為單線(xiàn)程?
JavaScript語(yǔ)言的一大特點(diǎn)就是單線(xiàn)程,換言之就是同一個(gè)時(shí)間只能做一件事。
for(var j = 0; j < 5; j++) {
console.log(j);
}
console.log('end');
上面的代碼,只有for循環(huán)執(zhí)行完畢,才會(huì)執(zhí)行end;
JavaScript的單線(xiàn)程,與它的用途有關(guān)。作為瀏覽器腳本語(yǔ)言,JavaScript的主要用途就是與用戶(hù)互動(dòng),以及操作DOM。這決定了它只能是單線(xiàn)程,否則會(huì)帶來(lái)很復(fù)雜的同步問(wèn)題。
假定JavaScript同時(shí)有兩個(gè)線(xiàn)程,一個(gè)線(xiàn)程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容,另一個(gè)線(xiàn)程刪除了這個(gè)節(jié)點(diǎn),這時(shí)瀏覽器應(yīng)該以哪個(gè)線(xiàn)程為準(zhǔn)?
所以,為了避免復(fù)雜性,從一誕生,JavaScript就是單線(xiàn)程,這已經(jīng)成了這門(mén)語(yǔ)言的核心特征,將來(lái)也不會(huì)改變。
為了利用多核CPU的計(jì)算能力,HTML5提出Web Worker標(biāo)準(zhǔn),允許JavaScript腳本創(chuàng)建多個(gè)線(xiàn)程,但是子線(xiàn)程完全受主線(xiàn)程控制,且不得操作DOM。所以,這個(gè)新標(biāo)準(zhǔn)并沒(méi)有改變JavaScript單線(xiàn)程的本質(zhì)。
二、任務(wù)隊(duì)列
"任務(wù)隊(duì)列"是一個(gè)事件的隊(duì)列(也可以理解成消息的隊(duì)列),IO設(shè)備完成一項(xiàng)任務(wù),就在"任務(wù)隊(duì)列"中添加一個(gè)事件,表示相關(guān)的異步任務(wù)可以進(jìn)入"執(zhí)行棧"了。主線(xiàn)程讀取"任務(wù)隊(duì)列",就是讀取里面有哪些事件;
我們來(lái)解釋一下:
Javascript是單線(xiàn)程的,單線(xiàn)程就意味著所有任務(wù)需要排隊(duì),前一個(gè)任務(wù)結(jié)束,才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng),后一個(gè)任務(wù)就不得不一直等著。
如果排隊(duì)是因?yàn)橛?jì)算量太大,CPU占用高倒也情有可原,但是很多時(shí)候CPU是處于空閑狀態(tài)或者有很大的空間未被使用,因?yàn)镮O設(shè)備(輸入輸出設(shè)備)很慢(比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù)),只能等結(jié)果出來(lái),才可以往下執(zhí)行。
JavaScript語(yǔ)言的設(shè)計(jì)者意識(shí)到,主線(xiàn)程完全可以不管IO設(shè)備,把這些等待中的任務(wù)掛起,先運(yùn)行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果,再去執(zhí)行掛起的任務(wù)。
因此,所有任務(wù)可以分成兩種,一種是同步任務(wù)(synchronous),另一種是異步任務(wù)(asynchronous)。
同步任務(wù)指的是,在主線(xiàn)程上排隊(duì)執(zhí)行的任務(wù),只有前一個(gè)任務(wù)執(zhí)行完畢,才能執(zhí)行后一個(gè)任務(wù);
異步任務(wù)指的是,不進(jìn)入主線(xiàn)程、而進(jìn)入"任務(wù)隊(duì)列"(task queue)的任務(wù),只有"任務(wù)隊(duì)列"通知主線(xiàn)程,某個(gè)異步任務(wù)可以執(zhí)行了,該任務(wù)才會(huì)進(jìn)入主線(xiàn)程執(zhí)行。
具體來(lái)說(shuō),異步執(zhí)行的運(yùn)行機(jī)制如下。(同步執(zhí)行也是如此,因?yàn)樗梢员灰暈闆](méi)有異步任務(wù)的異步執(zhí)行。)
所有同步任務(wù)都在主線(xiàn)程上執(zhí)行,形成一個(gè)執(zhí)行棧
主線(xiàn)程之外,還存在一個(gè)"任務(wù)隊(duì)列"(task queue)。只要異步任務(wù)有了運(yùn)行結(jié)果,就在"任務(wù)隊(duì)列"之中放置一個(gè)事件。
一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢,系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列",看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù),于是結(jié)束等待狀態(tài),進(jìn)入執(zhí)行棧,開(kāi)始執(zhí)行。
主線(xiàn)程不斷重復(fù)執(zhí)行上面的第三步。
for(var j = 0; j < 5; j++) {
console.log(j);
setTimeout(function() {
console.log('timeout');
}, 0);
}
console.log('end');
//結(jié)果0 1 2 3 4 end timeout timeout timeout timeout timeout
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中獲取出錯(cuò)代碼所在文件及行數(shù)的代碼
之前在做一個(gè)Javascript的日志控制臺(tái)功能模塊,希望能夠在Javascript代碼出錯(cuò)時(shí)捕獲此錯(cuò)誤,并將出錯(cuò)的文件及相應(yīng)的行數(shù)打印到控制臺(tái)并匯報(bào)給服務(wù)器。2010-09-09
return false;和e.preventDefault();的區(qū)別
Have you ever seen those two things (in the title) being used in jQuery? Here is a simple2010-07-07
環(huán)形加載進(jìn)度條封裝(Vue插件版和原生js版)
這篇文章主要為大家詳細(xì)介紹了環(huán)形加載進(jìn)度條封裝,Vue插件版,原生js版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12
JS啟動(dòng)應(yīng)用程序的一個(gè)簡(jiǎn)單例子
用jscript實(shí)現(xiàn)啟動(dòng)程序一個(gè)例子2008-05-05
原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
JS實(shí)現(xiàn)懸浮移動(dòng)窗口(懸浮廣告)的特效
頁(yè)面加載完成之后向頁(yè)面插入窗口,之后向窗口插入關(guān)閉按鈕,使用setInterval()函數(shù)觸發(fā)moves()函數(shù)開(kāi)始動(dòng)畫(huà)2013-03-03

