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

1.單線程處理機制

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

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

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

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

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

3.消息隊列

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

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

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

4.IO線程

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

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

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

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

二、setTimeout

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

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

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

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

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

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

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

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

三、宏任務(wù)和微任務(wù)

1.宏任務(wù)

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

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

JavaScript腳本執(zhí)行事件

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

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

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

2.微任務(wù)

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

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

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

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

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

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

最新評論