浏览器的事件循环机制

[chao]

已于 2022-11-25 00:06:35 修改

阅读量598

点赞数 1

分类专栏：浏览器文章标签： java javascript 前端

于 2022-11-15 14:07:17 首次发布

本文链接：https://blog.csdn.net/kjc513/article/details/127864714

版权

浏览器专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在了解事件循环之前，需要清楚几个重要的概念，进程和线程是什么，同步和异步是什么，然后再了解浏览器的进程模型是怎么样的，最后才能清楚究竟什么是事件循环。

重要概念

一、进程和线程

进程：是一个在内存中运行的应用程序。
线程：是一个在进程中执行的任务。
区别：

1）进程是资源分配的最小单位，而线程是程序执行的最小单位
2）一个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
3）一个进程至少有一个线程，线程之间可以共享数据。
比如你开了微信，就会有微信的进程，开了游戏，就有游戏的进程，而微信进程和游戏进程中各自又有很多线程在执行，它们各自线程之间的数据是共享的，但是微信进程和游戏进程之间是各自独立的，如果需要通信，就得授权。

线程和进程

二、同步和异步

同步和异步通常形容方法的调用方式

同步：表示调用一旦开始，调用者必须等待方法执行完成，才能继续执行后续方法；
异步：表示方法一旦开始，立即返回，调用者无需等待方法执行完成，就可以执行后续方法。

三、浏览器的进程模型

浏览器是一个多进程多线程的应用程序。主要的进程有：

1、浏览器进程：

主要负责页面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2、网络进程：

负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3、渲染进程：

不同的标签页有不同的渲染进程，以保证之间互不影响。
渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS、JS代码。渲染主线程是浏览器中最繁忙的线程，它处理的任务主要包括：解析HTML/CSS、计算样式等。

面试题

一、如何理解事件循环

1、含义

事件循环(也叫消息循环，Event Loop)，是浏览器渲染主线程的工作方式。

2、如何循环

在Chrome源码中，渲染主线程会进入一个无限循环；for(；；){}
每一次循环都会检查消息队列中是否有任务存在，如果有，就取出第一个任务执行，执行完后进入下一个循环；如果没有，则进入休眠状态。
其他线程可以随时向消息队列添加任务。新任务会被添加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会被换唤醒以继续循环拿取任务。

3、队列类型

过去把消息队列简单分为宏队列和微队列，这种说法已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

微队列：优先级最高，promise、mutatuinObserver
交互队列：优先级高，用户操作后产生的事件处理任务,addEventListener
延时队列：优先级中，计时器到达后的回调任务。如setTimeout、setInterval

4、 W3C标准

每个任务都有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。
不同的任务队列有不同的优先级，在一次事件循环中，浏览器自行决定取哪一个队列的任务。
浏览器必须有一个微队列，微队列具有最高的优先级，必须优先调度执行。

代码示例

new Promise(function (resolve) {
  console.log('1');
  resolve();
}).then(function () {
  console.log('3');
})

console.log('2');

setTimeout(function () {
  console.log('4');
}, 0);

结果：1234。
过程分析：

1、第一次循环
1）渲染主线程直接执行同步代码console.log(1)和console.log(2)，随后结束当前循环。
2）而promise、setTimeout的执行会交给其他线程去处理。
2、休眠状态
第一次循环执行完毕后分别查看微任务队列、交互任务队列、延时队列都没有任务，此时浏览器进入休眠状态。
3、第二次循环
当其他线程将任务执行完毕后，会将任务放入各任务队列中，此时promise放入微任务队列，setTimeout放入延时队列。而任务队列的优先级是由W3C标准和浏览器来决定的。
此时微任务队列有promise的异步代码的任务要执行，浏览器渲染主线程就会被唤醒，执行console.log(3)，结束当前循环。
4、第三次循环
此时微任务队列和交互任务队列都没有任务，而延时队列有任务，所以执行console.log(4)，结束当前循环。
5、再次回到休眠状态，直接队列中有任务被再次唤醒