L'utilisation de navigateurs JS monothread et multithread

Cette fois je vais vous présenter l'utilisation de navigateurs JS mono-thread et multi-thread. Quelles sont les précautions pour l'utilisation de navigateurs JS mono-thread et multi-thread. Voici des cas pratiques ? , jetons un coup d'oeil une fois.

Le langage JS est monothread. Le navigateur n'attribue qu'un seul thread principal à js pour exécuter des tâches (fonctions), mais une seule tâche peut être exécutée à la fois. Ces tâches forment une file d'attente de tâches et sont mises en file d'attente. exécution.

Le navigateur est multithread

Certaines tâches frontales prennent beaucoup de temps, comme les requêtes réseau, les minuteries et l'écoute des événements si elles y sont autorisées. interagir avec les autres Si les tâches sont toutes identiques et mises en file d'attente pour attendre leur exécution, l'efficacité de l'exécution sera très faible et entraînera même le gel de la page. Ainsi, les navigateurs sont multi-thread, comme les moteurs Webkit ou Gecko, qui peuvent avoir les threads suivants :

javascriptFil du moteur

fil de requête http

Fil de rendu d'interface

Fil de déclenchement d'événement de navigateur

JS thread unique et Ajax asynchrone

Puisque JS est censé s'exécuter dans un seul thread, pourquoi XMLHttpRequest après la connexion ? Asynchrone? Ceci est demandé par le navigateur pour ouvrir un nouveau fil de discussion. Lorsque le statut demandé change, si un rappel a été défini précédemment, le thread asynchrone générera un événement de changement de statut et le placera dans la file d'attente Traitement des événements du moteur JavaScript pour attendre le traitement. Lorsque le navigateur est inactif, la tâche retirée de la file d'attente est traitée et le moteur JavaScript exécute toujours la fonction de rappel dans un seul thread. Le moteur JavaScript est en effet une file d'attente de tâches monothread qui peut être comprise comme une file d'attente composée de fonctions ordinaires et de fonctions de rappel. C'est-à-dire que la requête Ajax est effectivement asynchrone. Il s'agit d'une nouvelle requête de thread ouverte par le navigateur. Lorsque l'événement est rappelé, il est placé dans la file d'attente des événements monothread de la boucle d'événement pour attendre son traitement.

Mécanisme de boucle d'événement JS (boucle d'événement)

Javascript a un processus principal de thread principal et une pile d'appels (une pile d'appels). Lors du traitement des tâches dans une pile d'appels, les autres doivent tous attendre. . Lorsque certaines opérations asynchrones telles que setTimeout sont rencontrées lors de l'exécution, elles seront transmises à d'autres modules du navigateur (en prenant webkit comme exemple, le module webcore) pour traitement lorsque le délai d'exécution spécifié par setTimeout est atteint. (fonction de rappel) sera placé dans la file d'attente des tâches. Généralement, les fonctions de rappel de différentes tâches asynchrones seront placées dans différentes files d'attente de tâches. Une fois que toutes les tâches de la pile d'appels ont été exécutées, exécutez les tâches (fonctions de rappel) dans la file d'attente des tâches.

Dans l'image ci-dessus, lorsque des opérations DOM, des requêtes ajax, setTimeout et d'autres WebAPI sont rencontrées dans la pile d'appels, elles seront transmises à d'autres modules du noyau du navigateur pour traitement. Le noyau du webkit est en plus. au moteur d'exécution Javasctipt Un module important est le module webcore. Pour les trois API mentionnées par WebAPI dans la figure, webcore fournit respectivement des modules de liaison DOM, de réseau et de minuterie pour gérer l'implémentation sous-jacente. Lorsque ces modules ont fini de traiter ces opérations, placez la fonction de rappel dans la file d'attente des tâches, puis attendez que les tâches de la pile soient exécutées avant d'exécuter la fonction de rappel dans la file d'attente des tâches.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelques problèmes mineurs concernant la conversion de type en js

Conversion de type implicite en JS

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!