相關解釋
? 在打開瀏覽器的時候會創建出來若干行程，以便于完成相關任務，其實最重要的是渲染行程，
? 渲染行程的主要作業為：決議HTML，繪制CSS樣式，執行JS代碼等，
? 其中在執行JS代碼的時候，會根據代碼任務的型別創建出來若干佇列，其中常見的有：
- 延時佇列(
setInterval,setTimeout...) - 互動佇列(
click,resize,scroll...) - 微佇列(
Promise,MutationObserver...)
? 但是，在執行代碼的時候，所有的代碼也就是被稱之任務的是不分優先級的，也就是說在一個js檔案中，依舊按照從上到下的順序去決議執行代碼，
? 然后在執行代碼的時候會將不普通的任務進行分類，放到相應的佇列中，比如在執行到延遲函式(setInterval,setTimeout)的時候就會將任務放到延時佇列中，遇到Promise函式就將任務放到微佇列中，
雖然代碼任務是不分優先級的，但是佇列是分優先級的，其中微佇列的優先級最高，互動佇列比延時佇列優先級高
? 在渲染主執行緒從上到下執行完所有的代碼后，將會從不同的佇列中讀取任務繼續執行，在從佇列中讀取的時候，微佇列是最先被讀取的，其次才是其他佇列，
示例 1：
setTimeout(function() {
console.log(1)
}, 0)
console.log(2)
輸出順序是：2 1
? 因為渲染行程在執行的時候會從上到下依次運行，首先是運行到setTimeout計時器，這時候會有有一個負責計時的行程進行該任務，但是因為計時時間是0，所以會將回呼函式所對應的任務放入延時行程中，與此同時，渲染行程仍然在繼續進行中，緊接著就執行到了console.log(2)，因此2將會被輸出，然后所有的js代碼都被執行完了，渲染行程會先去微佇列中查詢是否有任務，發現沒有就去延時佇列中，發現有任務，于是就執行該任務，所以輸出了1，
示例 2:
function delay(duration) {
var start = Date.now()
while(Date.now() - start < duration) {};
}
setTimeout(function() {
console.log(1)
}, 0)
delay(2000)
console.log(2)
輸出順序是：2 1
? 首先是定義了一個普通的函式，然后遇到了計時器，因此會將該計時器結束后的任務放入到延時佇列中，然后呼叫了delay函式，并且傳入了2000，該函式的作用是延遲duration時間，在這個函式中雖然是一個什么都沒干的回圈，但是渲染行程仍要等待相應的時間，因為什么都沒干是撰寫人員的想法，但是渲染行程需要去在相應的時間進行執行，然后在duration時間之后，才遇到了console.log(2)，然后執行完了所有的代碼之后，渲染行程去微佇列讀取，去延時佇列讀取，才執行了console.log(1)
示例3:
setTimeout(function() {
console.log(1)
}, 0)
Promise.resolve().then(function () {
console.log(2)
})
console.log(3)
輸出順序是：3 2 1
? 首先是讀取了計時器，然后將計時結束后的任務放入到了延時佇列中，然后遇到了Promise函式，然后會將相應的任務放入到微佇列中，然后執行了console.log(3)，然后渲染行程先去讀取微佇列發現其中有一個任務，所以將會立即執行微佇列中的第一個任務，然后繼續檢測微佇列中是否還有其他任務，發現沒有任務了，將去讀取延時佇列中的任務
示例4:
function a() {
console.log(1)
Promise.resolve().then(function () {
console.log(2)
})
}
setTimeout(function() {
console.log(3)
Promise.resolve().then(a)
}, 0)
Promise.resolve().then(function () {
console.log(4)
})
console.log(5)
輸出順序是：5 4 3 1 2
? 首先遇到函式a，不執行，然后遇到定時器setTimeout，計時執行緒將會在時間結束后將任務放入到延時佇列中，然后遇到Promise函式，在結束后會將回呼任務放入到微佇列中，然后遇到了console.log(5)將輸出5，然后所有的代碼執行完，去微佇列中讀取是否有任務，然后輸出4，然后微佇列中沒有任務了，就去延時佇列中讀取是否有任務，讀取到有任務，隨即輸出3，然后又遇到了Promise函式，在當前的任務完成后，渲染行程又會先去微佇列中讀取是否有任務，然后輸出了1，然后又有一個任務被放入到了微佇列中，然后又先讀取微佇列中的任務，然后輸出2
面試題1: 簡述一下 JS 的事件回圈
事件回圈又叫做訊息回圈，是瀏覽器渲染主執行緒的作業方式，
在 Chrome 的原始碼中，它開啟一個不會結束的
for回圈，每次回圈從訊息佇列中取出第一個任務執行，而其他執行緒只需要在合適的時候將任務加入到佇列末尾即可，過去把訊息佇列簡單分為宏佇列和微佇列，這種說話目前已無法滿足復雜的瀏覽器環境，取而代之的是一種更加靈活多變的處理方式，
根據W3C官方的解釋，每個任務有不同的型別，同型別的任務必須在同一個佇列，不同的任務可以屬于不同的佇列，不同任務佇列有不同的優先級，在一次事件回圈中，由瀏覽器自行決定哪一個佇列的任務先執行，但瀏覽器必須有一個微佇列，微佇列的任務一定具有最高的優先級，必須優先調度執行，
面試題2: Js中的計時器能做到精確計時嗎，為什么
不行，因為：
- 計算機的硬體沒有原子鐘，無法做到精確計時
- 作業系統的計時函式本身就有少量偏差，由于JS 的計時器最終呼叫的的是作業系統的函式，也就攜帶了這些偏差
- 按照W3C的標準，瀏覽器實作計時器時，如果嵌套層級超過5層，則會帶有4毫秒的最少時間，這樣在計時時間少于4毫秒時又帶來了偏差
- 受事件回圈的影響，計時器的回呼函式只能在主執行緒空閑時運行，因此又帶來了偏差
單執行緒是異步產生的原因
事件回圈是異步的實作方式
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546643.html
標籤：其他
上一篇：前端設計模式——配接器模式
下一篇：初識web