prefacio

El bucle de eventos del navegador y el bucle de eventos de Node son los puntos de conocimiento que todo ingeniero front-end debe dominar. Este artículo primero presenta el bucle de eventos del navegador. El autor analiza el problema desde las siguientes perspectivas y conduce a ¿qué es el bucle de eventos?

¿Sabes qué es un proceso en un sistema operativo? ¿Qué es un hilo?
¿JS es de subproceso único o de subprocesos múltiples?
¿El navegador es multiproceso o de un solo proceso? ¿Por qué?
Si JS tiene un solo subproceso, ¿cómo logra el procesamiento asíncrono?
Sacar el bucle de eventos

1. ¿Qué es un proceso? ¿Qué es un hilo?

En primer lugar, le recomiendo un libro "Sistema operativo moderno".Si realmente comprende la esencia del sistema operativo, muchos problemas de desarrollo se aclararán de repente. 在操作系统中无论是运行系统中的什么应用，最终都是会编译成二进制交CPU给执行。
En nuestro uso diario de las computadoras, podemos escuchar música, escribir código y bloguear al mismo tiempo. En estas aplicaciones, se abrirá uno o varios procesos en el sistema operativo, y los procesos abiertos por diferentes aplicaciones son diferentes. En aras de la comprensión de todos, se compara que solo se abrirá un proceso en una aplicación y se abrirán varios subprocesos en un proceso. Si solo hay un hilo, lo llamamos el hilo principal. 结论:一个进程当中包含多个线程或只有一个主线程。
Haz un dibujo para que todos entiendan la relación entre los procesos y los subprocesos de manera más intuitiva.

En esta imagen, la capa más externa es equivalente al sistema operativo. Descargaremos muchas aplicaciones en el sistema operativo. Cuando ejecutamos VsCode, Netease Cloud Music, una carta, etc.,
iniciarán uno o varios procesos. (Esto está relacionado con la aplicación en sí), y un proceso contiene varios subprocesos. Si solo hay un subproceso, se denomina subproceso principal.
Si todavía no sabe mucho acerca de procesos y subprocesos cuando ve esto, permítame describir la relación entre ellos con un ejemplo fácil de entender.
操作系统就跟工厂一样，一个工厂会包含多个车间，其中多个车间就好比是我们的应用程序有多个进程，车间里面有工人在工作，就相当于是线程的概念。

2. ¿JS es de subproceso único o multiproceso?

答案：JS是单线程。Si profundizas en ¿por qué es de un solo subproceso?
De hecho, esto está relacionado con su uso, porque JS es un lenguaje de secuencias de comandos del navegador, y su objetivo principal es realizar operaciones de usuario y manipular DOM, por lo que solo puede ser de un solo subproceso, de lo contrario traerá muchos problemas complejos de sincronización.

3. ¿El navegador es multiproceso o monoproceso?

答案：浏览器是多进程的。为什么说是多进程的？你说是就是吗？凭什么呢？
当我们浏览网页的时候，有的时候是不是会遇到浏览器卡死的情况。如果我们开了多个会话，就假如我们一边刷力扣，一边开发程序，写循环的时候，写了一个死循环，导致了我们开发的这个会话的崩溃，如果浏览器是单进程的情况下，力扣这个时候也会崩溃。
当然浏览器肯定不会允许这样的事情发生，它就是多进程的，多个会话互相不影响，你要崩溃你崩溃去，跟我可没关系，哈哈哈哈哈。

4.JS实现异步处理

首先当您看到了这里，其实你们离成功只有一步之遥了，跟着我继续探讨下去，把Event Loop一点一点捣碎了，喂进你们的嘴里。

我们先来看一段同步的JS代码

const foo = 'foo'

function bar() {
  console.log('bar')
}

console.log(foo) //foo
bar() //bar

复制代码

JS的代码执行顺序是从上至下进行的，所以答案如注释所示，我们是毫无疑问的

现在玩点花样，来一点同步和异步代码给大家看看

const foo = 'foo'

function bar() {
  console.log('bar')
}

queueMicrotask(() => {
  console.log('microtask')
})

console.log(foo) 

setTimeout(() => {
  console.log('setTimeout')
},1000)

bar()

//主线程: foo bar
//微任务队列:microtask
//宏任务队列:setTimeout
//执行顺序: foo bar microtask setTimeout(1s过后)

复制代码

现在穿插了异步的代码，如果把上面从上至下运行代码的结论用到异步，肯定是错误的！正确的执行顺序的答案，大家可以先看一下，可能对异步不太了解的人会产生疑惑，不要慌，我们一点一点来看，引出下面的事件循环。

5.事件循环

首先我们又回到 JS 代码是单线程开始讲起，当我们编写的同步的代码的时候，代码的执行顺序是从上至下的，但是当有异步操作或者一些耗时操作的时候，如果还是按照之前的结论从上至下的话，那么一定会堵塞我们主线程的代码也就是 main script中的代码，这样在js当中肯定是不被允许的。假如我有耗时操作（setTimeout）或者网络请求（ajax），延迟了5s才执行，那我后面的代码都堵塞了。
用文字的形式，还是有点抽象，我们直接上图，到底是一个怎么样的机制，完美解决这一问题。

Describa brevemente esta imagen: primero, el código js ejecuta el código del hilo principal, es decir, el código síncrono. De arriba a abajo, cuando se encuentra el código asíncrono, se entrega al navegador y el navegador abre un subproceso especial, en el que el subproceso del navegador Mantener estas dos colas, 一个微任务队列，一个宏任务队列.
注意:每一次执行宏任务之前，都是要确保我微任务的队列是空的，也就是说从代码执行的顺序来说微任务优先于宏任务。
Sin embargo, hay una situación de corte de cola, es decir, cuando termino de ejecutar la microtarea y comienzo a ejecutar la macrotarea (hay varias macrotareas), cuando el código en la cola de la macro- se ejecuta la cola de tareas, hay otro código de microtarea en la cola de macrotareas. , y coloque la microtarea en la cola de microtareas.
¡Presta especial atención en este momento! ! ! Estrictamente hablando, le sigue la tarea macro que se compila primero, pero en este momento, hay una cola de tareas micro en la tarea micro que se ejecuta antes de que se ejecute la tarea, en lugar de ejecutarse directamente. Estos códigos asincrónicos se entregan a js para su ejecución 这样三者形成了一个闭环，我们称之为事件循环.

Una comprensión profunda del bucle de eventos del bucle de eventos del navegador