Séquence d'exécution de la boucle d'événement (Event Loop) en javascript

Le contenu de cet article concerne la séquence d'exécution de la boucle d'événement (Event Loop) en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Brève introduction : Parlez de l'ordre d'exécution de promise.resove, setTimeout, setImmediate, process.nextTick dans la file d'attente EvenLoop

La source du problème

La boucle d'événements est familière à tout le monde. Elle fait référence au thread principal lisant cycliquement les tâches à partir de la "file d'attente des tâches", comme

例1：

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

console.log(2)

//输出2,1

Dans l'exemple ci-dessus, nous comprenons que la synchronisation La tâche dans le thread principal est exécutée en premier, lorsque la tâche du thread principal est exécutée, la tâche est lue à partir de la boucle d'événements, donc 2 est sorti en premier, puis 1 est sorti.

L'ordre dans lequel la boucle d'événements lit les tâches dépend des restrictions sur les différentes règles de lecture des tâches dans la file d'attente des tâches (file d'attente des tâches). Par exemple, l'exemple suivant :

例2：

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

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

génère 1 en premier. Il n'y a pas de problème car la tâche de synchronisation est exécutée en premier dans le thread principal. Le problème ici est la priorité d'exécution de setTimeout et Promise. puis les tâches sont définies.

Ordre d'exécution

La file d'attente dans la file d'attente des Jobs est divisée en deux types : macro-tâche et micro-tâche. Prenons un exemple pour regarder les règles de l'ordre d'exécution. Supposons que l'ordre d'exécution de

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

est : exécutez d'abord la tâche au début de la file d'attente marco-task, qui est le a1 (a1). représente la tâche principale de synchronisation). Une fois l'exécution terminée, exécutez toutes les tâches dans la file d'attente des micro-tâches, c'est-à-dire exécutez b1, b2, b3 (de manière asynchrone) dans séquence, effacez les tâches dans la micro-tâche après l'exécution, puis exécutez la deuxième tâche (asynchrone) dans la marco-tâche, en boucle en séquence.

Après avoir compris l'ordre d'exécution des files d'attente de macro-tâches et de micro-tâches, regardons les tâches réellement incluses dans ces deux types de files d'attente dans des scénarios réels (on prend comme exemple le moteur du nœud V8), en nœud V8, l'ordre réel des tâches de ces deux types est le suivant :

la file d'attente de macro-tâches contient en réalité des tâches :

script(主程序代码)[对应上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering

la file d'attente de micro-tâches contient en réalité des tâches :

process.nextTick, Promises, Object.observe, MutationObserver

L'ordre d'exécution que nous en obtenons devrait être :

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

Dans ES6, la file d'attente des macro-tâches est également appelée ScriptJobs, et la micro-tâche est également appelée PromiseJobs

Exemples

(1) setTimeout et promise

例3:

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

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

console.log(1);

(2) process.nextTick et promise, setTimeout

例子4：
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

(3) Exemples plus complexes

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

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

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

Veuillez juger les raisons de ces exemples en fonction de l'ordre d'exécution, je ne les expliquerai pas un par un ici

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!