Javascript前端事件循环机制详细讲解
目录
文章目录 一、消息队列和事件循环1.单线程处理机制2.事件循环机制3.消息队列4.IO线程5.页面使用单线程的缺点 二、setTimeout1.浏览器怎么实现 setTimeout2.使用setTimeout的一些注意事项 三、宏任务和微任务1.宏任务2.微任务
一、消息队列和事件循环
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）在一个宏任务中，分别创建一个用于回调的宏任务和微任务，无论什么情况下，微任务都早于宏任务执行。
原文地址：https://blog.csdn.net/weixin_49971653/article/details/126317850
- 上一篇 »JavaScript中事件处理机制
- 下一篇 »javaScript中的事件驱动