Explication détaillée du concept de mécanisme de boucle d'événement en js

Le contenu de cet article est une explication détaillée du concept du mécanisme de boucle d'événements de js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

Avant-propos.

En lisant Callbacks et Deferred, je tombe souvent sur le concept de programmation asynchrone. La programmation asynchrone est étroitement liée au mécanisme de boucle d'événements et je ne connaissais pas grand-chose aux boucles d'événements. programmation asynchrone auparavant, j'ai donc pris du temps pour trier les événements. Connaissance des boucles et de la programmation asynchrone.

1. Heap, Stack, Queue

Heap  : Les objets sont alloués dans un tas, une zone utilisée pour représenter une zone non organisée en mémoire. Nous savons que les fonctions sont des objets de première classe et que les fonctions sont des « objets appelables ». Ainsi, avant que la fonction ne soit appelée, le moteur JavaScript effectuera une compilation (analyse lexicale, analyse syntaxique, génération de code) sur la fonction. Une fois la compilation terminée, la fonction (ici ne se limite pas aux fonctions, tous les objets JavaScript sont des objets, à l'exception des objets non définis et nuls) sera placée dans le tas, l'espace mémoire sera alloué et elle attendra l'exécution ou l'appel.

Pile (Stack) : Lorsqu'une fonction est appelée, une "pile d'exécution" sera formée.

Task Queue : (File d'attente)  : Un environnement d'exécution JavaScript qui contient une file d'attente de messages en attente. Chaque message est associé à une fonction. Lorsque la pile dispose de suffisamment de mémoire, un message est extrait de la file d'attente pour être traité. Ce traitement consiste à appeler la fonction associée au message (et ainsi à créer un stack frame initial). Lorsque la pile est à nouveau vide, cela signifie que le traitement du message est terminé. Une fois que toutes les tâches synchrones du thread principal sont exécutées, les tâches asynchrones de la file d'attente des tâches sont lues. Ce processus est cyclique. Par conséquent, l’ensemble du mécanisme de fonctionnement est appelé Event Loop. Les
Tâches synchrones font référence aux tâches mises en file d'attente pour exécution sur le thread principal. La tâche suivante ne sera pas exécutée tant que la tâche précédente n'est pas exécutée. Les Tâches asynchrones font référence aux tâches qui ne le sont pas ; Pour les tâches qui entrent dans le thread principal et entrent dans la file d'attente des tâches, ce n'est qu'une fois que toutes les tâches synchrones sur le thread principal ont été exécutées que le thread principal lira la file d'attente des tâches et commencera à exécuter des tâches asynchrones.

2. Comprendre la boucle d'événements dans le navigateur

    demo1    function A(){
         console.log("2");
    }
    console.log("1");

    setTimeout(A，1000);

    console.log("3");    //output:
    //1
    //3
    //2

    demo2
    function A(){
         console.log("2");
    }
    console.log("1");

    setTimeout(A，0);

    console.log("3");    //output:
    //1
    //3
    //2

Le processus d'exécution de la démo1 ressemble à ceci :
- console.log("1") entre dans la pile d'exécution, sort 1 et apparaît
une fois l'exécution terminée - setTimeout( A ，1000) entre dans la pile d'exécution, la fait apparaître et place A dans la file d'attente asynchrone après 1 s
- console.log("3") entre dans la pile d'exécution, sort 3 et apparaît
une fois l'exécution terminée - À ce stade la file d'attente de synchronisation (file d'attente du thread principal) est terminée, commencez à vérifier s'il y a encore des tâches dans la file d'attente asynchrone
- A entre dans la pile d'exécution, sort 2 et fait apparaître la pile. Le processus d'exécution de

demo2 ressemble à peu près à ceci :
- console.log("1") entre dans la pile d'exécution, sort 1 et apparaît
une fois l'exécution terminée - setTimeout( A ，1000) Entrez dans la pile d'exécution, ouvrez-la et en même temps immédiatement placez A dans la file d'attente asynchrone
- console.log("3") entre dans la pile d'exécution, sort 3 et apparaît
une fois l'exécution terminée - À ce stade la file d'attente de synchronisation (file d'attente du thread principal) est terminée, commencez à vérifier s'il y a encore des tâches dans la file d'attente asynchrone
- A entre dans la pile d'exécution, sort 2 et sort de la pile.

Quelles opérations doivent être placées dans la file d'attente asynchrone et quelles opérations appartiennent à la file d'attente synchrone ? Vous pouvez vous référer à l'image ci-dessous. Pour une classification plus spécifique, veuillez consulter l'article suivant Mécanisme de boucle d'événement js (2)

3 Article de référence

1. boucle d'événement (1) — boucle d'événement

2.Modèle de concurrence MDN et boucle d'événement

3.Qu'est-ce que c'est que la boucle d'événement de toute façon ?

4. Explication détaillée du mécanisme de fonctionnement de JavaScript : reparlons d'Event Loop

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!