一文彻底搞懂事件循环1. 什么是进程？程序的执行需要自己专属的内存空间，可以把这个内存空间理解为进程 2. 什么是线

1. 什么是进程？

程序的执行需要自己专属的内存空间，可以把这个内存空间理解为进程

2. 什么是线程？

有了内存空间之后，就可以运行代码了，运行代码的就是线程。每一个进程至少有一个线程，进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。如果程序需要执行多块代码，那么主线程就会启动多个线程来运行代码，所以一个进程可以包含多个线程。

例如王者荣耀，当启动后，系统给王者荣耀分配了内存空间，也就有了王者荣耀这个进程，该进程的主线程就会创建其他的线程，如网络线程负责通络通信。游戏线程负责用户操作等。

3. 浏览器有哪些进程和线程了？

浏览器是一个多进程，多线程的应用程序。它的内部工作极其复杂，为了避免互相影响，减少连续崩溃的几率，当浏览器启动时，会自动启动多个进程。也就意味着浏览器占用着多个内存空间。

可以在浏览器的任务管理器中查看当前的所有进程

其中主要的进程有

浏览器进程：负责页面显示，用户交互，子进程管理等。浏览器进程内部会使用多个线程来处理不同的任务。
网络进程：负责加载网络资源。网络进程内部会使用多个线程来处理不同的任务。
渲染进程：渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML、CSS，JS代码。默认的情况下，浏览器会为每一个标签页开启一个新的渲染进程。以保证每一个标签页占用独立的内存空间，不相互影响。

4. 渲染主线程是如何工作的？

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

解析HTML
解析CSS
计算样式
布局
处理图层
每秒把页面画60次
执行全局JS代码
执行事件处理函数
执行计时器的回调函数
...

思考题：为什么渲染进程不使用多个线程来处理这些事情？

要处理这么多的任务，但是只有一个主线程来做事，怎么办，如何调度这么多的任务？？？？渲染主线程想出了一个绝妙的主意来处理这个问题：排队。

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

这样一来，每一个任务都可以有条不紊的、持续的进行下去。整个过程，被称之为事件循环（W3C叫做事件循环，但是在谷歌浏览器的源码中叫做消息循环）。

5. 若干解释

5.1 何为异步？

在代码的执行过程中，主线程会遇到无法立即处理的任务，比如：

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

如果主线程一直等待这些任务的执行，就会造成主线程长期处于阻塞状态，从而导致页面卡死。渲染主线程承担着极其重要的作用，无论何如都不能阻塞。因此浏览器选择异步来执行这个问题。使用异步的方式，使得主线程永不阻塞。

面试题：何如理解JS的异步？

参考答案:
JS是一门单线程的语言，它运行在浏览器的渲染主进程中，而渲染主线程只有一个，它承担的诸多的工作，如解析HTML，解析CSS，渲染页面等。如果使用同步的方式，当遇到不能立即执行的任务时，就会极有可能造成主线程阻塞，从而导致消息队列中的其他任务无法执行。这样一来，会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
所以浏览器使用异步的方式来避免，具体的做法是当某些任务发生时，比如计时器、网络请求、事件监听，主线程会将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续的代码。当其他线程执行完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队,等待主线程调度执行。
在这种异步模式下，渲染主线程永不阻塞，从而最大程度上的保证了它的流畅运行。

5.2 JS为何会阻塞渲染？

先看代码

<body>
    <h1>hello vue3</h1>
    <button>点击我</button>
</body>
<script>
    const h1 = document.querySelector('h1');
    const btn = document.querySelector('button');
    
    // 死循环模拟对应时间
    function delay(delayTime) {
        const time = Date.now();
        while (Date.now() - time < delayTime) {
            continue;
        }
    }

    // 点击按钮时，修改h1的文本内容
    btn.addEventListener('click', () => {
        // 点击后不会立即更新h1的文本内容，需要等2秒后才会更新
        h1.textContent = '你好 vue3';
        delay(2000);
    });
</script>

现象：点击按钮两秒，页面才更新渲染，为什么？

主要原因是在运行h1.textContent = '你好 vue3';时产生了新的渲染任务，这个新产生的任务要重新去排队，等待渲染主线程调度执行。只有当死循环结束后，才会执行渲染的任务。所以等待两秒后页面才更新。但是实际上文本已经修改了。

根本的原因就是执行JS跟渲染都在浏览器的渲染主线程完成，执行JS时，渲染就只能排队，反之同理。

5.3 任务有优先级吗？

任务是没有优先级的，在消息队列中先进先出。

但是任务队列是有优先级的

在目前chrome的实现中，至少包含了下面的队列：

延时队列：用于存放计时器到达后的回调任务，优先级【中】
交互队列：用于存放用户操作后产生的事件处理任务，优先级【高】
微队列：用于存放需要最快执行的任务，优先级【最高】

添加一个任务到微队列的方式主要方式是使用Promise
例如：
// 立即把一个函数添加到微队列
Promise.reslove().then(fn)

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

console.log(2);

// 2
// 1

function delay(delayTime) {
    const time = Date.now();
    while (Date.now() - time < delayTime) {
        continue;
    }
}

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

delay(1000);

console.log(2);

// 等待1s后同时输出
// 2
// 1

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


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

console.log(2);

// 微队列优先级大于延时队列
// 2
// 3
// 1

function a() {
    console.log(1);
    Promise.resolve().then(function () {
        console.log(2);
    })
}

setTimeout(function () {
    console.log(3);
    Promise.resolve().then(a)
}, 0);

Promise.resolve().then(function () {
    console.log(4);
})

console.log(5);

// 5
// 4
// 3
// 1
// 2

面试题：阐述一下JS的事件循环？

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
在chrome的源码中，它开启了一个不会结束的for循环，每一次循环从消息队列中取出一个任务执行，而其他线程只需要在合适的时候将其他任务加入到队列末尾即可。
过去把消息队列简单的分为宏队列与微队列，这种说法已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据W3C的解释，每一个任务有不同的类型，同一个类型的任务必须在同一个队列中，不同的任务可以属于不同的队列。不同的队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务执行，但浏览器必须有一个微队列，微队列有最高的优先级，浏览器必须优先调度执行。

JS中的计时器能够精确计时吗？为什么？
不能，因为：

计时器依赖于操作系统时钟精度，但是系统时钟精度有限。

浏览器对计时器嵌套有最小延迟限制，通常为4ms。按照W3C标准，浏览器实现计时器时，如果嵌套超过5层，则会带来4ms的最少时间。

计算机硬件没有原子钟，无法做到精确计时。

受到事件循环的影响，计时器的回调函数只能在计时完成后，主线程的空余时间执行，也会带来偏差。

一文彻底搞懂 事件循环