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

1.單線程處理機(jī)制

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

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

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

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

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

3.消息隊(duì)列

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

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

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

4.IO線程

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

5.頁面使用單線程的缺點(diǎn)

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

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

二、setTimeout

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

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

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

2.使用setTimeout的一些注意事項(xiàng)

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

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

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

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

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

1.宏任務(wù)

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

用戶交互事件（點(diǎn)擊、滾動(dòng)、縮放）

JavaScript腳本執(zhí)行事件

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

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

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

2.微任務(wù)

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

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

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

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

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

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