Lea un artículo para comprender qué es Event Loop

Event Loop es un modelo de ejecución de programas informáticos para manejar eventos asincrónicos y escribir código sin bloqueo, que ocupa una posición extremadamente importante en el desarrollo web moderno. Este artículo brindará una introducción detallada al principio de funcionamiento, la clasificación de tareas y los escenarios de aplicación de Event Loop para ayudar a los lectores a comprender este concepto de manera más completa y profunda.

1. Principio de funcionamiento

1. JavaScript es un lenguaje de subproceso único que solo puede manejar una tarea a la vez mientras ejecuta código. Si las tareas ejecutadas en el script JS se bloquean o tardan mucho tiempo, toda la página se volverá lenta o no responderá. Para resolver este problema, surgió Event Loop.
2. La lógica de trabajo de Event Loop es muy simple: ejecutar código y procesar eventos continuamente en el hilo principal, y esperar la llegada de eventos si no hay ningún evento actual para procesar. Todos los eventos se colocan en una cola de primero en entrar, primero en salir y el bucle de eventos los procesa uno por uno en el siguiente tic. Cada tick se divide en dos tipos de tareas: macrotareas y microtareas.
   • Las tareas macro se agregan al final de la cola de eventos a través de setTimeout, setInterval, script (código general), E/S, etc.;
   • Las microtareas se agregan al encabezado de la cola de eventos mediante Promise.then(), Process.nextTick, Object.observe, etc.;
3. Antes de ejecutar cada macrotarea, todas las microtareas en cola se ejecutan primero. De manera similar, una macrotarea puede contener múltiples microtareas. Este método de administración de colas de tareas garantiza el orden de ejecución de las tareas asincrónicas y también garantiza que el hilo principal pueda realizar otras tareas sin ser bloqueado.

2. Clasificación de tareas

La macrotarea y la microtarea se han presentado brevemente anteriormente y ambas se explicarán en detalle a continuación.

2.1 Macrotarea

Las tareas macro comunes incluyen setTimeout/setInterval, E/S y espera de eventos. Las tareas macro en JavaScript se ejecutan en función del modo "controlado por eventos". Por ejemplo:

console.log('1');

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

console.log('3');

En este ejemplo, la primera línea imprime '1', luego agrega un evento de temporizador, luego genera '3' y, finalmente, la función de devolución de llamada del evento de temporizador genera '2'. Dado que el tiempo del temporizador es 0 milisegundos, en realidad no espera ningún momento, sino que agrega la función de devolución de llamada a la cola de tareas macro y comienza a ejecutarla en el siguiente tic (el final de la cola de la pantalla gigante).

2.2 Microtareas

Una microtarea es un grupo de pequeñas tareas en una macrotarea cuyos resultados pueden estar dominados por la macrotarea. Deben ejecutarse antes del final del tick actual; de lo contrario, es posible que no se ejecuten normalmente en el siguiente tick. Las microtareas comunes incluyen Promise.then(), Process.nextTick API específica de Node.js y Object.observe.

Cabe señalar que las microtareas generadas dentro de la misma macrotarea se ejecutarán antes de la siguiente macrotarea . Por ejemplo:

console.log('1');

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

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

console.log('5');

Los resultados de salida son: 1, 5, 4, 2, 3. El proceso de análisis es el siguiente:

1. la primera marca
   • Primero imprima '1', luego ejecute la microtarea Promise.then() y agregue una tarea que genere '4' al principio de la cola de microtarea.
   • Ahora solo hay un evento de temporizador en la cola de tareas macro, que se asigna al siguiente tick para su ejecución.
2. el segundo tic
   • Comience a ejecutar el evento del temporizador, salida '2'.
   • Luego, se genera un Promise.then() en el evento del temporizador y se agrega a la cola de microtareas de la ronda actual.
   • Después de ejecutar todas las macrotareas de la ronda actual, comience a procesar la cola de microtareas de la ronda actual, genere '4' y luego genere '3'.
3. Entonces el resultado de salida es 1, 5, 4, 2, 3.

3. Escenarios de aplicación

1. Event Loop se utiliza a menudo en el desarrollo web para manejar la programación asincrónica. Por ejemplo, se debe utilizar una solicitud Ajax asincrónica al obtener datos del servidor; de lo contrario, la página esperará demasiado, la experiencia del usuario será deficiente y el navegador puede fallar. La existencia de Event Loop puede facilitar a los ingenieros de front-end la gestión de estas tareas asincrónicas.

2. Event Loop también se usa ampliamente en Node.js para manejar operaciones de E/S. Node.js proporciona una variedad de interfaces API, como módulos fs, net o http, que implementan operaciones asincrónicas basadas en funciones de devolución de llamada y evitan bloquear el hilo principal.

• En resumen, ya sea desarrollo front-end, desarrollo back-end o desarrollo móvil, Event Loop juega un papel vital. Aprender a dominar Event Loop es muy útil para lograr una computación asincrónica eficiente y fluida y optimizar el rendimiento.

4. Ejemplos

Aquí hay algunos ejemplos de código para ilustrar cómo funciona el bucle de eventos:

1. Ejemplo de orden de ejecución de macrotareas y microtareas

// 同步任务，输出 '1'
console.log('1');

setTimeout(() => {
    
    
  // 定时器回调函数，宏任务
  console.log('2 - Macro Task');
  // 添加一个微任务到队列中
  Promise.resolve().then(() => console.log('3 - Micro Task'));
}, 0);
// 添加一个微任务到队列中
Promise.resolve().then(() => console.log('4 - Micro Task'));
// 同步任务，输出 '5'
console.log('5');

La salida del código anterior es:

1
5
4 - Micro Task
2 - Macro Task
3 - Micro Task

La explicación es la siguiente:

• salida '1' primero
• Agregue la función de devolución de llamada setTimeout a la cola de tareas macro.
• Agregue la función de devolución de llamada de la primera Promesa (para microtareas) a la cola de microtareas.
• salida '5'
• Ejecute la primera tarea en la cola de microtask y genere '4 - Micro Task'
• Comience a ejecutar la cola de tareas macro, ejecute la función de devolución de llamada setTimeout al principio de la cola y genere '2 - Tarea macro'. Luego agregue la función de devolución de llamada Promise a la cola de microtask
• Ejecute la primera tarea en la cola de microtask y genere '3 - Micro Task'

2. Usando Event Loop en Node.js:

const fs = require('fs');

console.log('Start reading a file...'); // 同步输出提示信息

fs.readFile('file.md', 'utf-8', (err, content) => {
    
     // 异步读取文件内容
  if (err) {
    
    
    console.log('Error:', err); // 如果报错打印错误信息
    return;
  }

  console.log(content); // 异步输出文件内容
});

console.log('Carry on executing...'); // 同步输出提示信息

• En el código anterior, Node.js proporciona el método readFile para leer archivos de forma asincrónica a través del módulo fs. Todo el proceso de lectura de archivos es asincrónico y sin bloqueo. El programa ejecutará la salida 'Continuar ejecutando...' inmediatamente después de ejecutar readFile, y luego esperará hasta que se complete la tarea readFile, el bucle de eventos detectará y ejecutará la función de devolución de llamada y generará el contenido del archivo leído.

• En resumen, Event Loop se usa ampliamente en programación asincrónica y modelos de E / S, y es una parte indispensable del desarrollo web.