Introducción: ## Debido a que me estoy preparando para una entrevista de front-end recientemente, ciertamente tengo que revisarla como un ciclo de evento muy importante, pero lo que explicaron las grandes vacas es que (muchas palabras) no están incluidas en absoluto así que creo que puedo entenderlo directamente con el tema.
Antes de comprender el bucle de eventos, primero debemos comprender rápidamente qué es el montón y la pila de
Wikipedia: en javaScript, la pila almacena los tipos de datos básicos y el espacio de memoria se asigna y libera automáticamente; el montón almacena los tipos de datos de referencia, La memoria se asigna dinámicamente y el tamaño es variable y no se liberará automáticamente.
Heap heap: también se puede llamar memoria heap; es una estructura de datos de cola primero, primero en entrar, primero en salir;
pila de pila: también conocida como 'pila', también es una estructura de datos, pero almacena datos de acuerdo con la principio de primero en entrar, último en salir.
En esta pieza, quiero entender que puedo buscar otras vacas grandes poderosas, simplemente paso por el proceso (hee
A continuación ingresamos al tema:
Tarea macro y micro tarea
Se puede decir que las macro tareas y las micro tareas son tareas asincrónicas. Si conoce el código fuente de Vue, debe conocer los dos conceptos de macrotask y microtask, y su tiempo de ejecución es diferente. El código fuente de $ nextTick de vue se implementa a través de tareas macro y micro tareas.
Las macrotareas comunes de tareas macro incluyen: setTimeout, setInterval, setImmediate (solo compatible con los navegadores IE e implementado en el propio nodo), Microtasks
comunes de MessageChannel Las microtasks son: promise.then (), process.nextTick (nodo)
setTimeout(() => {
console.log('setTimeout1');
},1000);
Promise.resolve().then(data => {
console.log('then1');
});
console.log(2);
Se recomienda copiar directamente en la salida del depurador, la respuesta que vemos es 2 then1 setTimeout1
Bien, echemos un vistazo a su secuencia de ejecución. El
navegador ejecutará el código de arriba a abajo. Primero encontrará la tarea de sincronización, que es console.log. (2) Cuando la tarea de sincronización termine, comenzará a buscar para las microtareas para la ejecución, promesa, luego espere la macro tarea final después de escanear todas las micro tareas en la pila.
El orden de ejecución es: Sincronización-micro tarea-macro tarea
Después de entender esto, copie el siguiente código para ejecutar
setTimeout(() => {
console.log('setTimeout1');
Promise.resolve().then(data => {
console.log('then3');
});
},1000);
Promise.resolve().then(data => {
console.log('then1');
});
Promise.resolve().then(data => {
console.log('then2');
setTimeout(() => {
console.log('setTimeout2');
},1000);
});
console.log(2);
Podemos ver 2 luego1 luego2 setTimeout1 luego3 setTimeout2
Para resumir:
primero ejecute el contenido de la pila, es decir, el código de sincronización, por
lo que se genera 2; luego se borra la microtarea, por lo que la salida es luego 1 y luego 2 a su vez;
debido a que el código se ejecuta de arriba a abajo, setTimeout1 es ejecutado después de 1 s Salida;
luego borre la microtask nuevamente, luego 3 es salida;
finalmente ejecute salida setTimeout2
Entonces aumentemos la dificultad
setTimeout(() => {
console.log('setTimeout1');
setTimeout(() => {
console.log('setTimeout3');
},1000);
Promise.resolve().then(data => {
console.log('then3');
});
},1000);
Promise.resolve().then(data => {
console.log('then1');
console.log('then4')
Promise.resolve().then(data11=>{console.log('then6')})
});
Promise.resolve().then(data => {
console.log('then2');
console.log('then5')
setTimeout(() => {
console.log('setTimeout2');
},1000);
});
console.log(2)；
答案 是 2 luego1 luego4 luego2 luego5 luego6 setTimeout1 luego3 setTimeout2 setTimeout3
Organicemos el orden
1. Primero se coloca la macro tarea setTimeout, aparecen dos micro tareas principales y el orden de ejecución se convierte en promise-promise-setTimeout, luego en la tarea de sincronización console.log (), y finalmente consola. .Log-promise- promise-setTimeout
2. Después de que se ejecute la consola, ingrese la microtask e ingrese la primera promesa. El primer orden es que las dos consolas se ejecuten primero, y luego una promesa de microtask se deja sola. Mire la segunda También hay dos sincronizaciones tareas en una consola de promesa y una tarea macro setTimeout2 (déjelo solo). El
orden es la tarea de sincronización de la primera promesa. Dos consolas: las dos consolas de la segunda tarea de sincronización. Ahora mire la que está esperando afuera. La macro setTimeout tarea, así que pase lo que pase, continúe viendo que hay una promesa en la micro tarea, por lo que la ejecución se imprime luego 6. En este momento, nuestra tarea de sincronización y micro tarea se han ejecutado, y podemos ejecutar la macro tarea que estaba esperando temprano
. 3. En este momento, regrese temprano Aunque él fue el primero en esperar a setTimeout, quien lo llamaría un estado bajo, y luego comenzar la ejecución también es una tarea micro-tarea sincrónica-macro,
por lo que es muy simple imprime setTimeout1-then3 porque en este momento solo hay macros La tarea ha terminado, así que tengo que ir a la vista global para ver si hay una macro tarea esperando, es decir, setTimeout2 en la segunda promesa. ¿Quién lo llama un macro tarea en la micro tarea, que es más alta que la macro tarea en la macro tarea (¿Cómo se siente como un trabalenguas)
En conclusión
La tarea de sincronización es la más grande, luego la micro tarea y finalmente la macro tarea Cabe mencionar que todas las macro tareas en la micro tarea tienen un estado mayor que las macro tareas en la macro tarea.
Acabo de escribir un poco de comprensión aquí, y también es aplicable a otras tareas macro y micro.Si desea considerar que el principio de bucle de eventos del nodo es el mismo, puede encontrar el blog de Daniel para comprenderlo.
Si aún no comprende bien, imprima algunas preguntas más y comprenda usted mismo ~ De acuerdo, continuaré revisando. Nos vemos si tiene dinero.