一、消息隊列和事件循環(huán)

1.單線程處理機制

如果有一些確定好的任務，可以使用一個單一的線程來按順序處理這些事情，等到所有任務執(zhí)行完畢之后，退出當前線程。

int main(){
    int a, b;
    cin >> a;
    cin >> b;
    cout << a + b << endl;
    return 0;
}

2.事件循環(huán)機制

在單線程處理機制中，如果需要接收并處理新的任務，需要引入事件循環(huán)機制。

int main(){
    int a, b;
    while (true) {
        cin >> a;
        cin >> b;
        cout << a + b;
    }
    return 0;
}

3.消息隊列

如果需要處理其他線程的任務，需要使用消息隊列。

消息隊列是一種數(shù)據(jù)結(jié)構(gòu)，存放要執(zhí)行的任務。它符合隊列“先進先出”的特點，新增任務添加到隊列的尾部，隊列頭部取出任務。

主線程在執(zhí)行過程中，通過事件循環(huán)機制從消息隊列中讀取任務。

4.IO線程

在瀏覽器的渲染進程中，專門有一個IO線程用來接收其他進程傳進來的消息。接收到消息后，會將這些消息組裝成任務發(fā)送給主線程放入消息隊列中。

5.頁面使用單線程的缺點

（1）如何處理高優(yōu)先級的任務

（2）如何解決單個任務執(zhí)行時長過久的問題

二、setTimeout

1.瀏覽器怎么實現(xiàn) setTimeout

在瀏覽器中，除了普通的消息隊列之外，還有一個延遲任務的消息隊列，包括了定時器和 Chromium 內(nèi)部一些需要延遲執(zhí)行的任務。所以當通過JavaScript創(chuàng)建定時器時，渲染進程會將該定時器的回調(diào)任務添加到延遲隊列中。

加入延遲隊列之后，事件循環(huán)線程中的執(zhí)行過程就變成了，先執(zhí)行一次正常消息隊列中的任務，如果當前任務中有延遲事件，將該延遲事件加入到延遲任務消息隊列，在該任務執(zhí)行完之后，依次執(zhí)行延遲隊列中的到期任務。然后依次循環(huán)執(zhí)行下去。

2.使用setTimeout的一些注意事項

（1）當前任務執(zhí)行時間過長會影響定時器任務的執(zhí)行。

（2）如果setTimeout存在嵌套調(diào)用，那么系統(tǒng)會設置最短時間間隔為4毫秒

（3）未激活的頁面，setTimeout執(zhí)行最小間隔是1000毫秒

（4）延時執(zhí)行時間有最大值

三、宏任務和微任務

1.宏任務

渲染事件（如解析DOM、計算布局、繪制頁面）

用戶交互事件（點擊、滾動、縮放）

JavaScript腳本執(zhí)行事件

網(wǎng)絡請求、文件讀寫完成

（1）事件循環(huán)機制

• 先從消息隊列中選出一個最老的任務，這個任務稱為oldestTask
• 然后循環(huán)系統(tǒng)記錄任務開始執(zhí)行時間，并將oldestTask設置為當前正在執(zhí)行的任務
• 當任務執(zhí)行完成之后，刪除當前正在執(zhí)行的任務，并從消息隊列中刪除oldestTask
• 最后統(tǒng)計執(zhí)行完成的時長等信息

2.微任務

微任務就是一個需要異步執(zhí)行的函數(shù)，執(zhí)行時機是在主函數(shù)執(zhí)行結(jié)束之后、當前宏任務結(jié)束之前。

• Dom添加、刪除等操作
• Promise resolve和reject

（1）微任務和宏任務是綁定的，每個宏任務在執(zhí)行時，會創(chuàng)建自己的微任務隊列。

（2）微任務的執(zhí)行時長會影響到當前宏任務的時長

（3）在一個宏任務中，分別創(chuàng)建一個用于回調(diào)的宏任務和微任務，無論什么情況下，微任務都早于宏任務執(zhí)行。

到此這篇關(guān)于Javascript前端事件循環(huán)機制詳細講解的文章就介紹到這了,更多相關(guān)Javascript事件循環(huán)機制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論