由script標(biāo)簽引發(fā)了我對(duì)setTimeout異步的思考

eternalshallow 發(fā)布于2019-08-23 14:25 / 3116人閱讀

摘要：我們都知道在中是異步執(zhí)行機(jī)制的像這樣如果在這條語(yǔ)句后面還有很多的同步任務(wù)，它必須要等這些同步任務(wù)完成才會(huì)執(zhí)行里面的內(nèi)容不好意思，我要等循環(huán)的同步任務(wù)完成才能執(zhí)行這里的任務(wù)完成了，才會(huì)執(zhí)行的內(nèi)容那么我所發(fā)現(xiàn)的這個(gè)問(wèn)題如下如代碼所示在中插入兩個(gè)

我們都知道在JS中setTimeout是異步執(zhí)行機(jī)制的 像setTimeout(function(){},0)這樣

如果在這條語(yǔ)句后面還有很多的同步任務(wù)，
它必須要等這些同步任務(wù)完成才會(huì)執(zhí)行setTimeout里面的內(nèi)容

setTimeout(function(){
    不好意思，我要等f(wàn)or循環(huán)的同步任務(wù)完成才能執(zhí)行
},0)
for(var i = 0; i < 99999999999; i++){
    這里的任務(wù)完成了，才會(huì)執(zhí)行setTimeout的內(nèi)容
}

那么我所發(fā)現(xiàn)的這個(gè)問(wèn)題如下：
如代碼所示：在body中插入兩個(gè)script標(biāo)簽

這里所用的測(cè)試字符串是中文
這里需要做3個(gè)實(shí)驗(yàn)，分為A、B、C

實(shí)驗(yàn)A：用比較短的字符串，(有5個(gè)中文字體)來(lái)測(cè)試，執(zhí)行的彈窗結(jié)果是：
fir-script -> sec-script -> "測(cè)試字符串" -> setTime

實(shí)驗(yàn)B：用較長(zhǎng)的字符串，(有45000個(gè)中文字體)來(lái)測(cè)試，結(jié)果發(fā)現(xiàn)了變化 執(zhí)行的彈窗結(jié)果是： 
fir-script ->setTime -> sec-script -> "測(cè)試字符串"

實(shí)驗(yàn)C：減少部分字符串，(有43000個(gè)中文字體)來(lái)測(cè)試，執(zhí)行的彈窗結(jié)果是： 
fir-script -> sec-script -> "測(cè)試字符串" -> setTime

在其他條件沒(méi)有變化的情況下(注意：三次測(cè)試setTiemout的時(shí)間都是0)
程序執(zhí)行的順序似乎和字符串的長(zhǎng)度有關(guān)
(那其實(shí)可以說(shuō)是和script里面的內(nèi)容大小有關(guān)，那也可以進(jìn)一步理解為和解析script內(nèi)容的時(shí)間有關(guān))

為了驗(yàn)證上述結(jié)論(執(zhí)行順序和解析script內(nèi)容的時(shí)間有關(guān))
在實(shí)驗(yàn)B的基礎(chǔ)上，對(duì)setTiemout的時(shí)間進(jìn)行更改，其他保持不變
如B(5)為5ms后執(zhí)行，即setTimeout(()=>{alert("setTime");},5);
下面我們看一下結(jié)果：

B(0):  fir-script -> setTime -> sec-script -> "測(cè)試字符串"  
B(5): fir-script -> setTime -> sec-script -> "測(cè)試字符串"  
B(10): fir-script ->sec-script -> "測(cè)試字符串" -> setTime  
B(15): fir-script -> sec-script ->"測(cè)試字符串" -> setTime

從上面幾個(gè)實(shí)驗(yàn)我們可以在側(cè)面看出一個(gè)現(xiàn)象
setTime 不會(huì)出現(xiàn)在 sec-script 和 "測(cè)試字符串" 之間，
這也反映了JS是單線程執(zhí)行的,而且在同步任務(wù)里，不受其他script標(biāo)簽的影響

通過(guò)這個(gè)案例，發(fā)現(xiàn)了一些問(wèn)題，總結(jié)如下：

如有其他外部腳本(即使這些腳本都是同步任務(wù))，像setTiemout這些異步任務(wù)，不會(huì)等待所有同步任務(wù)執(zhí)行完成
只有在同一個(gè)script標(biāo)簽里，異步任務(wù)要等待該標(biāo)簽的所有同步任務(wù)完成才會(huì)執(zhí)行 
因?yàn)樾枰ソ馕瞿_本，而解析腳本與執(zhí)行另外的腳本不沖突

最后的最后，如果你在嘗試過(guò)程中發(fā)現(xiàn)與本文的結(jié)果不相同，請(qǐng)把測(cè)試用的案例”加強(qiáng)“，如把字符串加到10W，這是因?yàn)閟etTimeout的不確定性
歡迎大家一起來(lái)探討