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）在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务执行。

到此这篇关于Javascript前端事件循环机制详细讲解的文章就介绍到这了,更多相关Javascript事件循环机制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！