Comprendre un seul thread dans les compétences javascript timer_javascript

1. Le moteur JavaScript est monothread

Comme vous pouvez le voir dans le code ci-dessous, le premier code utilisant setTimeout est une boucle infinie puisqu'il s'agit d'un seul thread, les deux timers suivants n'ont aucune chance de s'exécuter.

<script type="text/javascript">
 setTimeout( function(){ while(true){} } , 100); 
 setTimeout( function(){ alert('你好!setTimeout'); } , 200); 
 setInterval( function(){ alert('你好!setInterval'); } , 200); 
</script>

Le noyau du navigateur est multithread. Ils coopèrent les uns avec les autres sous le contrôle du noyau pour maintenir la synchronisation. Un navigateur implémente au moins 3 threads résidents : le thread du moteur javascript, le thread de rendu de l'interface graphique et le thread de déclenchement des événements du navigateur. .

Le moteur JavaScript est basé sur une exécution monothread basée sur les événements. Le moteur JS attend l'arrivée des tâches dans la file d'attente des tâches, puis les traite. Le navigateur n'a qu'un seul thread JS exécutant le programme JS. temps.
Le thread de rendu GUI est responsable du rendu de l'interface du navigateur. Ce thread sera exécuté lorsque l'interface doit être repeinte (Repaint) ou lorsqu'une redistribution (reflow) est provoquée par une certaine opération. Cependant, il convient de noter que le thread de rendu GUI et le moteur JS s'excluent mutuellement lorsque le moteur JS est exécuté, le thread GUI sera suspendu et les mises à jour de l'interface graphique seront enregistrées dans une file d'attente et exécutées immédiatement lorsque le moteur JS sera exécuté. inactif.
Le thread de déclenchement d'événement du navigateur Lorsqu'un événement est déclenché, le thread ajoute l'événement à la fin de la file d'attente en attente et attend son traitement par le moteur JS. Ces événements peuvent provenir du bloc de code actuellement exécuté par le moteur JavaScript tel que setTimeOut, ou d'autres threads du noyau du navigateur tels que des clics de souris, des requêtes asynchrones AJAX, etc. Cependant, en raison de la relation monothread de JS, tous ces événements doivent être mis en file d'attente pour être traités par le moteur JS.

Comme le montre l'image ci-dessus, le moteur JavaScript du navigateur est piloté par les événements. Les événements ici peuvent être considérés comme diverses tâches qui lui sont assignées par le navigateur. dans la file d'attente des tâches, en raison de la relation monothread, ces tâches doivent être mises en file d'attente et traitées par le moteur les unes après les autres.

t1, t2....tn représente différents moments, et les petits carrés correspondants en dessous de tn représentent les tâches à ce moment-là.

heure t1 :

1. Fil de rendu de l'interface graphique
2. Fil de déclenchement d'événements du navigateur :
Au cours de la période t1, l'utilisateur clique d'abord sur un bouton de la souris. Le clic est capturé par le thread déclencheur d'événement du navigateur et forme un événement de clic de souris. Comme le montre la figure, pour le thread du moteur JavaScript, cet événement est transmis de manière asynchrone. à partir d'autres threads. À la fin de la file d'attente des tâches, étant donné que le moteur traite la tâche à t1, cet événement de clic de souris attend d'être traité.
3. Fil de déclenchement du timing :
Le compteur de synchronisation du modèle de navigateur ici n'est pas compté par le moteur JavaScript, car le moteur JavaScript est monothread, s'il est dans un état de thread bloqué, il ne peut pas compter le temps et doit compter sur l'extérieur. donc l'événement de synchronisation dans la file d'attente est constitué d'événements asynchrones.
4. Pendant cette période de temps t1, après le déclenchement de l'événement de clic de souris, le timing setTimeout précédemment défini arrive également. À ce moment-là, pour le moteur JavaScript, le thread de déclenchement de timing génère un événement de timing asynchrone et le place dans la file d'attente des tâches. . Cet événement est mis en file d'attente après le rappel de l'événement click, en attente d'être traité. De la même manière, toujours dans la période t1, un temporisateur setInterval est également ajouté ensuite. Puisqu'il s'agit d'un temporisateur d'intervalle, il est déclenché deux fois de suite au cours de la période t1. Ces deux événements sont mis en file d'attente jusqu'à la fin de la file d'attente. être traité.
5. Requête asynchrone Ajax :
Le navigateur ouvre une nouvelle requête de thread http Lorsque l'état de la requête change, si un rappel a été défini précédemment, le thread asynchrone générera un événement de changement d'état et le placera dans la file d'attente de traitement du moteur JavaScript pour attendre le traitement.
2. L'ordre d'exécution des tâches est différent, et les résultats d'affichage sont également différents

1) La fonction setTimeout n'est pas utilisée

Un exemple de code trouvé sur Internet est utilisé ici pour démontrer.

<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
  var doBtn = document.getElementById('doBtn')
   , status = document.getElementById('status');

  function sleep(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn.onclick = function(e) {
   status.innerHTML = 'doing...please wait...'; 
   sleep(3000); // 模拟一个耗时较长的计算过程，3s
   status.innerHTML = 'done'; 
   return false;
  };
</script>

J'ai exécuté le code ci-dessus dans Firefox. Le plan est de cliquer sur le bouton « faire quelque chose », puis d'afficher « en cours... veuillez patienter... », puis d'exécuter sleep et enfin d'afficher « terminé ».

Mais le résultat est qu'après avoir cliqué, le navigateur reste bloqué pendant environ 3 secondes, et affiche finalement done directement.

D'après l'analyse, on peut voir que lors de la définition de status.innerHTML, le thread de rendu GUI doit être exécuté, mais le thread du moteur JavaScript est toujours exécuté, et le thread du moteur JavaScript et le thread de rendu GUI s'excluent mutuellement, donc à la fin, le fait est affiché.

2) Utilisez la fonction setTimeout

<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
  var doBtn2 = document.getElementById('doBtn2')
   , status2 = document.getElementById('status2');

  function sleep2(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn2.onclick = function(e) {
   status2.innerHTML = 'doing...please wait...'; 
   setTimeout(function() {
   sleep2(3000); 
   status2.innerHTML = 'done'; 
   }, 100); 
   return false;
  };
</script>

Ajoutez un setTimeout après "doing...please wait..." pour retarder l'exécution et donner au navigateur le temps de restituer. À ce moment, "doing...please wait..." sera affiché. puis exécutez la fonction sleep, et enfin affichez « terminé ».

Certains internautes ont découvert plus tard que cela ne fonctionnait pas dans Firefox. Ce problème existait plus tard. Plus tard, j'ai modifié le code et mis la déclaration des variables locales et la liaison de onclick dans l'événement window.onload. , , je vais refaire l'opération de script.

<script type="text/javascript">
  function sleep(ms) {
  //...
  }
  window.onload = function() {
   var doBtn = document.getElementById('doBtn'),
   status = document.getElementById('status');
   
   var doBtn2 = document.getElementById('doBtn2')
    , status2 = document.getElementById('status2');
    
   doBtn.onclick = function(e) {
    //...
   };
   doBtn2.onclick = function(e) {
    //...
   };
  };
</script>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.