浏览器事件循环

一、浏览器的进程模型

浏览器是一个多进程多线程的应用程序，浏览器内部工件极其复杂，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程，其中，有以下主要进程：

1.浏览器进程

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

2.网络进程

网络进程主要加载网络资源，也会启动多线程。

3.渲染进程

渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS、JS代码，在默认情况下，浏览器会为每个标签开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

二、渲染主线程的工作

渲染主线程是浏览器中最繁忙的线程，它要处理的任务包括但不限于：

解析HTML
解析CSS
计算样式
进行布局
处理图层
连续渲染画面（FPS帧率，如每秒把页面画60次）
执行全局JS代码
执行事件处理函数
执行计时器的回调函数等

渲染主线程的任务调度方式是排队，浏览器的任务会进入消息队列（事件队列）

三、事件队列（消息队列）

在最开始的时候，渲染主线程会进入一个无线循环
每一次循环会检查事件队列中是否有任务存在，如果有，就取出队头的任务执行（第一个任务），执行完一个后进入下一次循环，如果没有，则进入休眠状态。
其他所有的线程（包括其他进程的线程）可以随时向事件队列添加任务，新任务会加到事件队列的队尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒来继续循环拿取任务。

四、浏览器的异步机制

在代码执行过程中，会遇到一些无法立即处理的任务。例如：：

计时完成后需要执行的任务——setTimeout、setInterval
网络通信完成后需要执行的任务——XHR、Fetch
用户操作后需要执行的任务——addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于阻塞的状态，从而导致浏览器卡死。这是浏览器就会使用异步来解决这个问题。

具体操作

异步的具体做法是当某些任务发生时，比如计时器、网络、事件监听，这是主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到事件队列的队尾排队，等待主线程调度执行。

五、事件队列的优先级

任务没有优先级，但事件队列有优先级

在过去的浏览器中，有一个宏队列和一个微队列（VIP），而现在的浏览器中，每个任务都有一个任务类型，同一个类型的任务必须在一个队列中，不同类型的任务可以分属于不同的队列，在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行，w3c规定，浏览器必须准备好一个微队列（micro task queue），微队列中的任务优先所有其他任务执行。

chrome中的队列优先级

在目前chrome中有延时队列（中）、交互队列（高）、微队列（最高）等，添加到微队列的主要方式是

Promise.MutationObserver

例如：

Promise.resolve().then(函数)； //立即把一个函数加入微队列

这里对上述两个方法进行一定的解释

Promise.MutationObserver

Promise.MutationObserver是一个基于Promise对象的封装实现，用于将MutationObserver和Promise结合起来处理DOM树的变化。

MutationObserver是浏览器提供的一个API，用于监视DOM树的变化。它可以观察DOM节点的增删改操作，并在变化发生时触发回调函数。然而，原生的MutationObserver API并不支持使用Promise来处理异步操作。

为了解决这个问题，Promise.MutationObserver通过封装MutationObserver对象并返回一个Promise对象来处理异步操作。它可以将MutationObserver的回调函数包装成Promise的resolve或reject函数，从而能够使用Promise的链式调用和错误处理机制。

使用Promise.MutationObserver可以实现以下功能：

监视DOM树的变化，并在变化发生后执行一系列的异步操作。
可以通过链式调用的方式依次执行一系列的异步操作，并在最后返回一个Promise对象。
可以通过catch方法捕获错误，并进行相应的错误处理。

以一个例子来说明Promise.MutationObserver的使用：

const observer = new Promise.MutationObserver(callback);observer.observe(document.body, {subtree: true,childList: true,
});observer.then(() => {console.log('DOM树发生了变化');
})
.catch((error) => {console.error(error);
});function callback(mutations, observer) {// 异步操作setTimeout(() => {console.log('异步操作完成');observer.takeRecords(); // 清空记录observer.disconnect(); // 停止观察observer.resolve(); // 触发Promise的resolve函数}, 1000);
}

在上面的例子中，我们创建了一个Promise.MutationObserver对象，并传入一个回调函数。然后通过调用observe方法开始观察DOM树的变化。

当DOM树发生变化时，回调函数会执行一系列的异步操作，最后调用resolve函数来触发Promise对象的resolve。我们可以通过then方法来监听resolve的触发，并执行相应的操作。

如果在异步操作过程中发生了错误，可以通过catch方法来捕获错误并进行处理。

总之，Promise.MutationObserver是一个方便而强大的工具，可以简化DOM树变化的处理，并且提供了Promise的链式调用和错误处理机制。

Promise.resolve().then()

Promise.resolve().then()是Promise对象的一个方法链，用于处理异步操作的结果。

Promise.resolve()是一个静态方法，它返回一个已经被解决（resolved）的Promise对象。它可以接受一个值作为参数，并将这个值封装成一个已经解决的Promise对象返回。如果参数本身就是一个Promise对象，则直接返回该Promise对象。

.then()方法是Promise对象的方法，用于添加回调函数来处理Promise对象的解决结果。它接受两个参数：一个是解决的回调函数，一个是拒绝的回调函数。在Promise对象解决后，会调用对应的回调函数来处理解决的值。

结合起来，Promise.resolve().then()的作用可以总结为：

创建一个已经解决的Promise对象；
添加回调函数来处理解决的结果。

通过这个方法链，我们可以进行一系列的异步操作，并在每个异步操作完成后，使用.then()方法链式地处理结果。这样的代码结构更加简洁，易于理解和维护。

下面是一个简单的例子来说明Promise.resolve().then()的使用：

Promise.resolve(42).then((value) => {console.log(value); // 42return value + 1;}).then((value) => {console.log(value); // 43return Promise.reject('出错了');}).catch((error) => {console.error(error); // 出错了return Promise.resolve('处理错误');}).then((value) => {console.log(value); // 处理错误});

在上面的例子中，我们首先使用Promise.resolve()创建了一个已经解决的Promise对象，并传入值42。

然后通过.then()方法添加了第一个回调函数，打印出了解决的值42，并返回了value + 1。

接下来，在第二个.then()方法里，我们返回了一个被拒绝的Promise对象，并在.catch()方法里捕获了错误，并打印出了错误信息"出错了"。

接着，我们又通过.then()方法添加了一个回调函数，并返回了一个已经解决的Promise对象，并且打印出了返回的值"处理错误"。

通过这个例子，我们可以看到，使用Promise.resolve().then()方法可以方便地处理多个异步操作的结果，并且可以在每个.then()方法里进行相应的处理和错误处理。

总之，Promise.resolve().then()是Promise对象的方法链，用于处理异步操作的结果，它简化了异步操作的处理和错误处理。

六、JS的相关案例及知识

1.JS阻塞渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js阻碍渲染案例</title>
</head>
<body><button>点击我启动函数</button><div><h1>启动函数前</h1></div>
</body>
<script>let btn = document.querySelector("button");let h1 = document.querySelector("h1");btn.addEventListener('click',function(){h1.textContent = "我是函数启动后";function abc(){let start = Date.now();while(Date.now()-start<3000);};abc();});
</script>
</html>

在上述代码中，页面会卡住3秒后再进行重新渲染，死循环函数会占用渲染主线程3秒，这段时间内，如h1的更改操作，滚动页面等都会进入等待，在事件队列中排队。