JavaScript Academy · Leçon

queueMicrotask et ordre d’exécution

Contrôlez précisément l’ordre d’exécution.

queueMicrotask et ordre d’exécution est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Découvrez queueMicrotask

queueMicrotask permet de planifier directement une microtâche sans créer de promesse. Le rappel s'exécute après le code synchrone actuel, mais avant toute macrotâche.

C'est l'outil le plus clair pour différer une tâche jusqu'au point de contrôle de microtâches suivant.

Utilisation de base

Passez une fonction à queueMicrotask. Elle s'exécute une fois le code synchrone terminé.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Même priorité que les promesses

Un rappel de queueMicrotask et un .then de promesse partagent la file des microtâches. Ils s'exécutent dans l'ordre où ils ont été planifiés.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Devance setTimeout

Comme toutes les microtâches, un rappel de queueMicrotask s'exécute avant toute macrotâche setTimeout, même si celle-ci a été planifiée plus tôt.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Ordre d'exécution pendant la vidange

Les microtâches s'exécutent dans l'ordre FIFO. La première mise en file s'exécute en premier lorsque la file est vidée.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Imbrication de microtâches

Une microtâche peut mettre une autre microtâche en file. La nouvelle s'exécute pendant la même vidange, après celles déjà en file, mais avant toute macrotâche.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Démonstration complète de l'ordre

Combinez du code synchrone, des microtâches et une macrotâche. Suivez la règle : d'abord le code synchrone, puis les microtâches dans l'ordre, et enfin le minuteur.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Entrelacement avec async/await

Une continuation après un await est également une microtâche ; elle s'entrelace donc avec queueMicrotask selon l'ordre de planification.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Pourquoi utiliser queueMicrotask

Utilisez-le lorsque vous devez différer une petite tâche après la pile d'appels actuelle, mais avant que le navigateur n'effectue le rendu ou qu'un minuteur ne se déclenche. Cela évite la surcharge et la sémantique de résolution liées à la création d'une promesse temporaire.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Évitez les boucles infinies de microtâches

Comme les microtâches sont entièrement exécutées avant les macrotâches, un rappel qui se remet toujours en file bloquera indéfiniment les minuteurs et le rendu. Prévoyez toujours une condition d'arrêt.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Le modèle mental complet

À chaque tour de la boucle d'événements : exécutez une macrotâche (ou le script initial), puis videz toutes les microtâches, effectuez le rendu, et recommencez. queueMicrotask vous permet de vous insérer précisément dans cette phase de vidange.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Vérification rapide

À quel moment un rappel de queueMicrotask s'exécute-t-il par rapport à setTimeout(fn, 0) ?

Récapitulatif : queueMicrotask et l'ordre d'exécution

Vous maîtrisez désormais la planification précise :

queueMicrotask planifie une microtâche sans promesse.
Il partage la file des microtâches avec les rappels de promesse, selon l'ordre FIFO.
Toutes les microtâches sont exécutées avant toute macrotâche et avant le rendu.
Le modèle de la boucle est le suivant : macrotâche, vidange des microtâches, rendu, puis répétition.

Questions Fréquemment Posées

La leçon « queueMicrotask et ordre d’exécution » est-elle gratuite ?

Oui — le texte complet de « queueMicrotask et ordre d’exécution » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « queueMicrotask et ordre d’exécution » ?

Contrôlez précisément l’ordre d’exécution. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « queueMicrotask et ordre d’exécution » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

La pile d’appels
Macrotâches et file d’attente des tâches
Microtâches et promesses
queueMicrotask et ordre d’exécution

← Retour à JavaScript Academy