Javascript前端事件循环机制详细讲解

一、消息队列和事件循环

1.单线程处理机制

如果有一些确定好的任务，可以使用一个单一的线程来按顺序处理这些事情，等到所有任务执行完毕之后，退出当前线程。

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

2.事件循环机制

在单线程处理机制中，如果需要接收并处理新的任务，需要引入事件循环机制。

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

3.消息队列

如果需要处理其他线程的任务，需要使用消息队列。

消息队列是一种数据结构，存放要执行的任务。它符合队列“先进先出”的特点，新增任务添加到队列的尾部，队列头部取出任务。

主线程在执行过程中，通过事件循环机制从消息队列中读取任务。

4.IO线程

在浏览器的渲染进程中，专门有一个IO线程用来接收其他进程传进来的消息。接收到消息后，会将这些消息组装成任务发送给主线程放入消息队列中。

5.页面使用单线程的缺点

（1）如何处理高优先级的任务

（2）如何解决单个任务执行时长过久的问题

二、setTimeout

1.浏览器怎么实现 setTimeout

在浏览器中，除了普通的消息队列之外，还有一个延迟任务的消息队列，包括了定时器和 Chromium 内部一些需要延迟执行的任务。所以当通过JavaScript创建定时器时，渲染进程会将该定时器的回调任务添加到延迟队列中。

加入延迟队列之后，事件循环线程中的执行过程就变成了，先执行一次正常消息队列中的任务，如果当前任务中有延迟事件，将该延迟事件加入到延迟任务消息队列，在该任务执行完之后，依次执行延迟队列中的到期任务。然后依次循环执行下去。

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

（1）当前任务执行时间过长会影响定时器任务的执行。

（2）如果setTimeout存在嵌套调用，那么系统会设置最短时间间隔为4毫秒

（3）未激活的页面，setTimeout执行最小间隔是1000毫秒

（4）延时执行时间有最大值

三、宏任务和微任务

1.宏任务

渲染事件（如解析DOM、计算布局、绘制页面）

用户交互事件（点击、滚动、缩放）

JavaScript脚本执行事件

网络请求、文件读写完成

（1）事件循环机制

• 先从消息队列中选出一个最老的任务，这个任务称为oldestTask
• 然后循环系统记录任务开始执行时间，并将oldestTask设置为当前正在执行的任务
• 当任务执行完成之后，删除当前正在执行的任务，并从消息队列中删除oldestTask
• 最后统计执行完成的时长等信息

2.微任务

微任务就是一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前。

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

（1）微任务和宏任务是绑定的，每个宏任务在执行时，会创建自己的微任务队列。

（2）微任务的执行时长会影响到当前宏任务的时长

（3）在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务执行。