由script標簽引發了我對setTimeout異步的思考

eternalshallow 發布于2019-08-23 14:25 / 3085人閱讀

摘要：我們都知道在中是異步執行機制的像這樣如果在這條語句后面還有很多的同步任務，它必須要等這些同步任務完成才會執行里面的內容不好意思，我要等循環的同步任務完成才能執行這里的任務完成了，才會執行的內容那么我所發現的這個問題如下如代碼所示在中插入兩個

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

如果在這條語句后面還有很多的同步任務，
它必須要等這些同步任務完成才會執行setTimeout里面的內容

setTimeout(function(){
    不好意思，我要等for循環的同步任務完成才能執行
},0)
for(var i = 0; i < 99999999999; i++){
    這里的任務完成了，才會執行setTimeout的內容
}

那么我所發現的這個問題如下：
如代碼所示：在body中插入兩個script標簽

這里所用的測試字符串是中文
這里需要做3個實驗，分為A、B、C

實驗A：用比較短的字符串，(有5個中文字體)來測試，執行的彈窗結果是：
fir-script -> sec-script -> "測試字符串" -> setTime

實驗B：用較長的字符串，(有45000個中文字體)來測試，結果發現了變化 執行的彈窗結果是： 
fir-script ->setTime -> sec-script -> "測試字符串"

實驗C：減少部分字符串，(有43000個中文字體)來測試，執行的彈窗結果是： 
fir-script -> sec-script -> "測試字符串" -> setTime

在其他條件沒有變化的情況下(注意：三次測試setTiemout的時間都是0)
程序執行的順序似乎和字符串的長度有關
(那其實可以說是和script里面的內容大小有關，那也可以進一步理解為和解析script內容的時間有關)

為了驗證上述結論(執行順序和解析script內容的時間有關)
在實驗B的基礎上，對setTiemout的時間進行更改，其他保持不變
如B(5)為5ms后執行，即setTimeout(()=>{alert("setTime");},5);
下面我們看一下結果：

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

從上面幾個實驗我們可以在側面看出一個現象
setTime 不會出現在 sec-script 和 "測試字符串" 之間，
這也反映了JS是單線程執行的,而且在同步任務里，不受其他script標簽的影響

通過這個案例，發現了一些問題，總結如下：

如有其他外部腳本(即使這些腳本都是同步任務)，像setTiemout這些異步任務，不會等待所有同步任務執行完成
只有在同一個script標簽里，異步任務要等待該標簽的所有同步任務完成才會執行 
因為需要去解析腳本，而解析腳本與執行另外的腳本不沖突

最后的最后，如果你在嘗試過程中發現與本文的結果不相同，請把測試用的案例”加強“，如把字符串加到10W，這是因為setTimeout的不確定性
歡迎大家一起來探討

GPU云服務器云服務器人工智能的思考對人工智能的思考人工智能由誰提出的由匯編語言寫的程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100565.html

「今日頭條」前端面試題和思路解析

摘要：一篇文章和一道面試題最近，有篇名為張圖幫你一步步看清和的執行順序的文章引起了我的關注。作者用一道年今日頭條的前端面試題為引子，分步講解了最終結果的執行原因。從字面意思理解，讓我們等等。當前的最新版本，在這里的執行順序上，的確存在有問題。一篇文章和一道面試題最近，有篇名為《8張圖幫你一步步看清 async/await 和 promise 的執行順序》的文章引起了我的關注。作者用...

寵來也 2019-08-23 14:14 評論0 收藏0
一道面試題引發的思考 --- Event Loop

摘要：想必面試題刷的多的同學對下面這道題目不陌生，能夠立即回答出輸出個，可是你真的懂為什么嗎為什么是輸出為什么是輸出個這兩個問題在我腦邊縈繞。同步任務都好理解，一個執行完執行下一個。本文只是我對這道面試題的一點思考，有誤的地方望批評指正。想必面試題刷的多的同學對下面這道題目不陌生，能夠立即回答出輸出10個10，可是你真的懂為什么嗎？為什么是輸出10？為什么是輸出10個10？這兩個問題在我腦...

betacat 2019-08-23 14:13 評論0 收藏0
一道setTimeout async promise執行順序的筆試題引發的思考

摘要：如果你要問他和誰當進去的快，要從下面兩個方面考慮結束時。至于什么，查了很多的資料，了解到一個瀏覽器環境只能有一個事件循環，而一個事件循環可以有多個任務隊列。 ====據說這是今日頭條去年的一道筆試題，主要考察的是setTimeout async promise執行順序～先雙手奉上這道題目～ async function async1() { consol...

soasme 2019-08-23 13:53 評論0 收藏0
try catch引發的性能優化深度思考

摘要：進一步最終定位發現如果為的時候，效率驟降，如果為合法的字符串的時候，效率是正常值。每次執行該子句都會發生這種情況，將捕獲的異常對象分配給一個變量。盡可能將它們與其他代碼隔離，以免影響其性能。關鍵代碼拆解成如下圖所示（無關部分已省略）：起初我認為可能是這個 getRowDataItemNumberFormat 函數里面某些方法執行太慢，從 formatData.replace 到 unesca...

番茄西紅柿 2021-11-29 10:50 評論0 收藏2637
前端面試--瀏覽器

摘要：打開一個網頁，看到服務器返回給客戶端瀏覽器的各種文件類型圖片構建瀏覽器會遵守一套步驟將文件轉換為樹。因為瀏覽器有渲染線程與引擎線程，為了防止渲染出現不可預期的結果，這兩個線程是互斥的關系。 1. 瀏覽器架構用戶界面主進程內核渲染引擎 JS 引擎執行棧事件觸發線程消息隊列微任務宏任務網絡異步線程定時器線程 2. 從輸入 url 到頁面展示...

bigdevil_s 2019-08-23 17:20 評論0 收藏0