瀏覽器線程與setTimeout(...,0)

crossoverJie 發(fā)布于2019-08-22 10:49 / 399人閱讀

摘要：參考可否多線程深入理解定時機制到這里就要說另一個問題的異步問題在中我們常常使用的方式來處理的異步炒個栗子輸出不信點我試試并沒有把你的回調(diào)函數(shù)掛在事件循環(huán)隊列中。

瀏覽器三個常駐線程

瀏覽器的內(nèi)核是多線程的，它們在內(nèi)核制控下相互配合以保持同步，一個瀏覽器至少實現(xiàn)三個常駐線程:

javascript引擎線程

javascript引擎是基于事件驅(qū)動單線程執(zhí)行的，JS引擎一直等待著任務(wù)隊列中任務(wù)的到來，然后加以處理，瀏覽器無論什么時候都只有一個JS線程在運行JS程序

GUI渲染線程

GUI渲染線程負(fù)責(zé)渲染瀏覽器界面,當(dāng)頁面需要重繪(repaint)或由于某種操作引發(fā)的回流(reflow)時,該線程就會執(zhí)行.但是,需要注意的是GUI渲染線程與javascript引擎線程是互斥的,當(dāng)js引擎執(zhí)行時,GUI線程就會被掛起,GUI更新會被保存在一個隊列中,等待js引擎空閑時立即被執(zhí)行.

事件觸發(fā)線程

事件觸發(fā)線程，當(dāng)一個事件被觸發(fā)時,該線程會把事件添加到待處理隊列的隊尾，等待JS引擎的處理。這些事件可來自JavaScript引擎當(dāng)前執(zhí)行的代碼塊如setTimeOut、也可來自瀏覽器內(nèi)核的其他線程如鼠標(biāo)點擊、AJAX異步請求等，但由于JS的單線程關(guān)系所有這些事件都得排隊等待JS引擎處理。
參考:
JavaScript可否多線程? 深入理解JavaScript定時機制

到這里, 就要說另一個問題, js的異步問題

setTimeout(...,0)

在js中,我們常常使用setTimeout(function(){},0)的方式來處理js的異步.
炒個栗子

console.log(1);
setTimeout(function(){console.log(2)},0);
console.log(3);

輸出: 1 , 3, 2
不信點我試試
setTimeout(..) 并沒有把你的回調(diào)函數(shù)掛在事件循環(huán)隊列中。它所做的是設(shè) 定一個定時器。
當(dāng)定時器到時后,環(huán)境會把你的回調(diào)函數(shù)放在事件隊列中,如果這時候事件循環(huán)中已經(jīng)有 20 個項目了會怎樣呢?你的回調(diào)就會等待,定時器只能確保你的回調(diào)函數(shù)不會在指定的時間間隔之前運行,但可能會在那個時刻運行,也可能在那之后運行,要根據(jù)事件隊列的狀態(tài)而定(PS: 這就是造成定時器不準(zhǔn)確的緣由)。

setTimeout(..0)(hack)進行異步調(diào)度,基本上它的意思就是把這個函數(shù)插入到當(dāng)前事件循環(huán)隊列的結(jié)尾處。

正常情況下javascript都是按照順序執(zhí)行的。但是我們可能讓該語句后面的語句執(zhí)行完再執(zhí)行本身，先執(zhí)行所有的同步再執(zhí)行所有的異步.
炒個栗子

for(var i = 0;i < 3;i++){
setTimeout(function(){
alert("知乎");
},0)
alert(i);
}

點我看看
輸出: 0 1 2 知乎知乎知乎，
setTimeout第二個參數(shù)為0表示立即執(zhí)行。當(dāng)使用這個方法的時候，瀏覽器會另起一個線程，來執(zhí)行setTimeout里面的函數(shù)，而原有的線程繼續(xù)執(zhí)行, 待原有線程結(jié)束后,在執(zhí)行后面的線程(js單線程)。