Explication détaillée des caractéristiques du rappel io asynchrone JS monothread

La plupart de nos premiers contacts avec JavaScript ont commencé avec des scripts js en HTML. Cependant, nous utilisons ce langage apparemment simple depuis plusieurs années sans comprendre certains de ses principes et mécanismes. Au moins, JavaScript utilise divers rappels d'événements. lors de l'utilisation du DOM, comme le bouton, le clic sur un lien, le passage de la souris, l'acquisition du focus, etc. Cet article analyse principalement les caractéristiques des rappels io asynchrones monothread JavaScript. J'espère que le contenu que nous avons compilé pourra vous aider.

Dans ce processus, nous lions une fonction de rappel d'événement sur le dom telle que onclick="doCheck()" Ce processus consiste à enregistrer un événement de clic pour l'élément dom et à lier une fonction de rappel d'événement doCheck ().

Lorsque la souris clique sur cet élément, un événement est déclenché et la fonction de liaison d'événement est immédiatement exécutée et renvoyée.

Plus tard, lorsque je suis entré en contact avec jquery, un grand nombre de

$("#id").click(function(){
alert('点击事件');
});

Je semble être habitué à cette syntaxe jquery au fur et à mesure que j'écris de plus en plus, mais vous avez remarqué que le sélecteur précédent sélectionne et filtre uniquement les nœuds dom, et puis cliquez sur Il s'agit d'un enregistrement d'événement, et la fonction(){} à l'intérieur est en fait un paramètre, le paramètre de la fonction de liaison d'événement. Cela nécessite que vous soyez familier avec la syntaxe de javascript. objet en javascript. Les objets peuvent faire référence à tout dans le monde, les objets peuvent donc contenir de nombreux attributs, méthodes, etc.

Puisqu'il s'agit d'un objet, il peut être passé en paramètre. une fonction d'ordre supérieur.

Et ce genre de fonction n'a pas de nom défini, non ? Bien sûr, vous pouvez lui donner un nom, et c'est la même chose si vous passez le nom, mais c'est le cas. n'a aucun sens car l'objet fonction ici est en fait un paramètre formel, nous avons donc l'habitude de ne pas donner ce nom à la fonction, qui est souvent appelée fonction anonyme

Ensuite, en parlant de $("#id" ).click ci-dessus, lorsque l'événement click est déclenché, la fonction de liaison d'événement doit être exécutée. Et ci-dessus L'attribution directe de la méthode onclick sur le dom a le même effet

Supposons qu'il y ait plusieurs threads dans le navigateur. Pour faire fonctionner le script, pouvez-vous imaginer le chaos ? Le thread 1 est sur le point de modifier la valeur de l'élément A. De manière inattendue, le thread deux a déjà supprimé l'élément A de l'arborescence DOM. À ce moment-là, le thread un n'a pas fonctionné et a signalé une erreur. Cette situation n'est pas terrible. Soit le navigateur ne parvient pas à maintenir la cohérence des données sur plusieurs threads, soit les ingénieurs front-end les maintiennent eux-mêmes, donc... le navigateur n'a qu'un seul thread pour faire fonctionner le dom, ce qui économise beaucoup de temps. problèmes inutiles.

Pensez-vous qu'il y a encore une chance d'alerte('pop-up') après 300 millisecondes

setTimeout(function(){
alert('弹出');
},300);

while(true){
	........
}

Non, il n'y aura jamais de chance. Attendre 300 millisecondes est juste pour tromper vos émotions Parce que le navigateur exécute le script en mode monothread.

Une fois que le thread est en mode boucle infinie et exécute l'instruction while, votre setTimeout n'aura plus aucun effet.

Ensuite, nous entrons dans le monde node.js, qui conserve complètement l'utilisation de javascript. La fonctionnalité du navigateur, le rappel asynchrone monothread, est précisément due à cette fonctionnalité If node. .js est un langage synchrone, même si tous les packages npm sont des extensions C++ (c'est assez rapide), quelle que soit votre vitesse. Ce n'est pas aussi rapide que le traitement du langage C, n'est-ce pas ? Alors node.js a peut-être été méprisé par PHP avant même lui ? est né.

C'est justement grâce à son rappel asynchrone IO qu'il peut améliorer son efficacité, ce qui me rappelle Comparaison entre un fast-food de l'ancienne école et la cafétéria de l'école :

A la cafétéria, tous les élèves se sont alignés devant la fenêtre avec leurs assiettes, et la sœur qui cuisinait le riz l'a rempli un à un et a servi le riz un à un. C'est le résultat de la synchronisation. 🎜>

Les fast-foods scolaires ont également des étudiants qui font la queue pour commander, mais après avoir commandé, vous pouvez prendre votre téléavertisseur et partir chercher une place. De cette façon, le serveur peut servir de nombreuses personnes dans une unité de temps. fournir un service, et les étudiants qui ont commandé des repas peuvent trouver une place pour faire autre chose par eux-mêmes, au lieu de rester bêtement à la fenêtre en attendant le repas, au moment où votre repas sort, le serveur appuiera sur le code en fonction de la commande. numéro, puis vous Le téléavertisseur sur la table sonne, et vous allez simplement chercher le repas. Il s'agit d'un traitement asynchrone. Lorsque le téléavertisseur sonne, il déclenche un événement

Un seul fil peut réduire le gaspillage. Les ressources causées par le changement d'état entre plusieurs threads et la maintenance sont difficiles. Bien sûr, il existe des packages tiers spécialisés pour prendre en charge les scénarios multicœurs et multithreads.

Recommandations associées :

SetTimeout monothread en JavaScript

Comment le langage de programmation monothread PHP implémente les opérations multithreads

Présentation en détail de certaines choses sur le monothreading JavaScript (images)

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!