Compréhension approfondie du mécanisme d'exécution de JavaScript

Le contenu de cet article porte sur une compréhension approfondie du mécanisme d'exécution de JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Tout d'abord, nous savons tous que JavaScript est un langage monothread, nous pouvons donc conclure :

JavaScript est exécuté dans l'ordre des instructions

Premier aperçu :

let a = '1'
console.log(a)

let b = '2'
console.log(b)

Évidemment tout le monde connaît le résultat, sortie 1, 2 dans l'ordre

Cependant, une autre façon :

setTimeout(function() {
    console.log(1)
})

new Promise(function(resolve) {
    console.log(2)
    for(var i = 0;i< 10;i++){
        i === 10 && resolve()
    }
}).then(function() {
    console.log(3)
})
console.log(4)

A ce moment, regardez l'exécution séquentielle du code, sortie 1 , 2, 3, 4. D'accord, mettez-le dans le navigateur et exécutez-le, quoi ? La sortie est en réalité 2, 4, 3, 1. Et si vous les exécutiez dans l’ordre comme promis ? Ensuite, nous devons comprendre le mécanisme d’exécution de JavaScript.

Mono-thread

Tout d'abord, JavaScript est un langage à thread unique. Dans le dernier lancement HTML5 de Web-worker, le principe selon lequel JavaScript est un langage à thread unique n'a pas changé. . Par conséquent, le multithreading JavaScript est simulé sur la base d’un seul thread. Gardez donc à l’esprit que JavaScript est un langage monothread.

Boucle d'événements

Les tâches sont divisées en deux catégories :

• Tâches synchrones

• Tâches asynchrones

Tâches asynchrones

1. Lorsque nous ouvrons la page, le rendu de la page est constitué de nombreuses tâches synchrones, et les tâches fastidieuses comme le chargement d'images et de ressources audio sont des tâches asynchrones. Le contenu principal de la boucle temporelle est :

2. Lorsqu'une tâche entre dans la pile d'exécution, déterminez s'il s'agit d'une tâche synchrone ou d'une tâche asynchrone. S'il s'agit d'une tâche synchrone, saisissez le. thread principal pour l'exécution et entrez dans la fonction d'enregistrement de la table d'événements de manière asynchrone.

3. Lorsque l'événement spécifié est terminé, la table des événements déplace cette fonction dans la file d'attente des événements

4. Une fois la tâche dans le fil principal terminée , allez La file d'attente des tâches lit la fonction correspondante et entre dans le thread principal pour exécuter

Le processus ci-dessus est répété en continu, ce qui constitue une boucle d'événements

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

parmi lesquels js Le moteur dispose d'un processus de surveillance qui vérifie en permanence si la pile d'exécution du thread principal est vide. Une fois vide, il ira dans la file d'attente temporelle pour vérifier s'il y a des fonctions en attente d'appel.

• Par exemple :

• D'abord setTimeout et entrez dans la table des événements

• Exécutez console.log(2)

• La fonction exécutée par setTimeout entre dans la file d'attente des événements

Le thread principal lit l'exécution de la fonction à partir de la file d'attente des événementssetTimeout(fn, 0)

C'est pourquoi même si la fonction

est définie, elle ne sera pas exécutée immédiatement. Cependant, même si le thread principal est vide, 0 ms ne peut pas être atteint. Selon le standard HTML, le minimum est de 4 ms. setTimeoutsetIntervalsetIntervalsetInterval

a également une fonction similaire à

Pour setInterval(fn, ms), il est exécuté en boucle. Concernant la séquence d'exécution, ms placera la fonction enregistrée dans la file d'attente des événements à des intervalles spécifiés. Si la tâche précédente prend trop de temps, vous devez également attendre. msfn Mais une chose à noter est que pour setInterval, il n'est pas exécuté à chaque fois que ms passe, mais à chaque fois que

passe,

entrera dans la file d'attente des tâches. C'est-à-dire que si l'événement d'exécution de la fonction de rappel de

dépasse le délai

, alors l'intervalle d'événement ne sera pas visible.

Promise et process.nextTick(callback)

• En plus des tâches synchrones généralisées et des tâches asynchrones, il existe également des divisions plus détaillées des tâches, qui sont divisées en :

• macro-tâche (macro-tâche) : incluant le script de code global, setTimeout, setInterval

micro-tâche (micro-tâche) : Promise, process.nextTick

setTimeout(function() {
    console.log('1');
})

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

console.log('4');

L'ordre de la boucle d'événements détermine l'ordre d'exécution du code js. Après avoir saisi le code global (macro-tâche), le premier cycle démarre. Exécutez ensuite toutes les microtâches. Recommencez ensuite à partir de la macro-tâche, recherchez l'une des files d'attente de tâches à exécuter, puis exécutez toutes les micro-tâches.

• Utilisez un morceau de code pour illustrer :

• Ce code agit comme une macro-tâche et démarre le premier cyclesetTimeout

• Rencontrez

  d'abord, puis sa fonction de rappel entre dans la file d'attente des événements de tâches macro PromisePromisethen

  Lors de la rencontre avec
,
• est exécuté immédiatement et génère 2,

  La tâche entre dans la file d'attente des événements de microtâche

• La console est rencontrée ci-dessous et 4 est sortiethen

• La première tâche macro se termine, voir la microtâche file d'attente des événements, exécutez

  , sortie 3

• Le premier tour de boucle se termine, voir l'exécution de la fonction de rappel setTimeout dans la file d'attente des tâches macro, sortie 1

Tous les résultats sont : 2, 4, 3, 1

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

Maintenant que nous comprenons les principes de base, regardons un principe plus compliqué :

Je ne sais pas quelle est votre réponse ? Ensuite, analysons-le :

1. Premier tour : console.log()

2. Tout d'abord, l'intégralité du code entre dans le thread principal en tant que tâche macro et rencontre pour la première fois

   sortie 1 setTimeout()

3. Rencontrez le premier

   et entrez dans la file d'attente des tâches macroProcess.nextTick()

   Entrez le premier et entrez dans la file d'attente des micro-tâches

4. rencontre ensuite Promise, s'exécute immédiatement, génère 7 et then est ajouté à la file d'attente des microtâches

5. rencontre le deuxième setTimeout, entrez dans la file d'attente des tâches macro

6. puis exécutez deux micro-tâches

7. exécutez la Process.nextTick()sortie 6

8. Exécuterthen, sortie 8

De cette façon, le premier tour de boucle est complètement terminé et le deuxième tour de boucle d'événement est effectué, qui est le premier setTimeout

1. premières rencontres console.log(), sorties 2

2. rencontres Process.nextTick(), entre dans la file d'attente des microtâches

3. Lorsque vous rencontrez Promise, exécutez immédiatement la sortie 4, then entrez dans la file d'attente des microtâches

4. puis exécutez la première microtâche, sortie 3

5. Exécutez ensuite, sortie 5

De cette façon, le deuxième tour de boucle d'événement est terminé, et enfin exécutez le deuxième setTimeout, le deuxième setTimeout est similaire au principe ci-dessus, je ne répéterai donc pas l'explication. Le résultat final est donc : 1,7,6,8,2,4,3,5,9,11,10,12

Recommandations associées :

Explication détaillée des exemples de mécanismes d'exécution js

JavaScript mécanisme d'exécution Boucle d'événement

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!