亲宝软件园·资讯

展开

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

volit_ 人气:0

一、消息队列和事件循环

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)事件循环机制

2.微任务

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

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

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

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

加载全部内容

相关教程
猜你喜欢
用户评论