Une exploration approfondie des compétences javascript timers

Une exploration approfondie des compétences javascript timers_javascript

WBOY

Libérer： 2016-05-16 16:22:40

original

1309 Les gens l'ont consulté

fil unique javascript

Le fil de discussion unique de JavaScript est lié à son objectif. En tant que langage de script de navigateur, l'objectif principal de JavaScript est d'interagir avec les utilisateurs et de manipuler le DOM. Cela détermine qu'il ne peut être qu'un seul thread, sinon cela entraînera des problèmes de synchronisation très complexes. Par exemple, supposons que JavaScript ait deux threads en même temps. Un thread ajoute du contenu à un certain nœud DOM et l'autre thread supprime le nœud. Dans ce cas, quel thread le navigateur doit-il utiliser ? Par conséquent, afin d’éviter toute complexité, JavaScript est monothread depuis sa naissance. Cela est devenu une fonctionnalité essentielle du langage et ne changera pas à l’avenir.

Tâches en file d'attente

Un seul thread signifie que toutes les tâches doivent être mises en file d'attente et que la tâche suivante ne sera pas exécutée tant que la tâche précédente n'est pas terminée. Si la tâche précédente prend beaucoup de temps, la tâche suivante devra attendre.

Asynchrone événementiel

De nombreux comportements dans le navigateur sont asynchrones (asynchronisés), tels que : les événements de clic de souris, les événements de glissement de taille de fenêtre, les événements de déclenchement de minuterie, les rappels d'achèvement XMLHttpRequest, etc. Lorsqu'un événement asynchrone se produit, il entre dans la file d'attente des événements. Le navigateur dispose d'une grande boucle de messages interne, la boucle d'événements, qui interroge une grande file d'attente d'événements et traite les événements. Par exemple, le navigateur est actuellement en train de traiter l'événement onclick. À ce moment-là, un autre événement se produit (comme window onSize). Cet événement asynchrone est placé dans la file d'attente des événements pour attendre le traitement. Il ne sera exécuté que lors du traitement précédent. est terminé et c’est un événement gratuit.

Boucle d'événement

JavaScript est monothread, mais le navigateur n'est pas monothread

Le navigateur aura au moins certains des processus suivants

1. Fil de rendu de l'interface graphique du navigateur

2.Thème du moteur JavaScript

3. Fil de déclenchement programmé du navigateur

4. Fil de déclenchement d'événement du navigateur

5. Fil de requête asynchrone http du navigateur

Le moteur JavaScript étant monothread, le code est d'abord placé dans la file d'attente, puis exécuté par le moteur selon le principe du premier entré, premier sorti. Les fonctions de traitement d'événements et les fonctions d'exécution de minuterie seront également mises en file d'attente dans cette file d'attente, puis une boucle infinie sera utilisée pour retirer continuellement les fonctions de la tête de file d'attente pour exécution. Il s'agit de la boucle d'événements.

Pour résumer, js est monothread, mais les navigateurs sont multithreads. Lorsqu'il rencontre des éléments asynchrones, le navigateur place des rappels asynchrones dans la boucle d'événement. Lorsque le thread js n'est pas occupé, accédez à Lire la boucle d'événement

Principe de la minuterie

Utilisation de la minuterie

setTimeout(fn, délai)

setInterval(fn, délai)

fn est une fonction ou une chaîne, delay est le temps de retard, l'unité est la milliseconde

Il y a les choses suivantes à noter

1.fn peut être une chaîne, mais il n'est jamais recommandé de l'utiliser de cette façon

2. Si la fonction in.fn a ceci, cela pointera vers la fenêtre une fois exécutée

Si vous comprenez le thread unique js et la boucle d'événements, le principe du timer est également facile à comprendre

Si une minuterie est définie, lorsque le délai est atteint, le navigateur placera l'événement d'exécution retardée dans la boucle d'événement. Lorsque le délai est écoulé, il sera exécuté si le thread js est inactif (donc la précision de). la minuterie n'est pas précise)

J'ai lu tout le temps un article présentant la différence entre setTimeout et setInterval dans les fonctions d'interrogation. Le code est le suivant

Copier le code Le code est le suivant :

setTimeout(function(){

                 setTimeout(arguments.callee,100)                                                                           
},100)

setInterval(function(){},1000)

La signification générale de l'article est que setTimeout démarre le minuteur suivant après l'exécution de la fonction de rappel, elle doit donc être exécutée à intervalles réguliers, tandis que setInterval est toujours exécuté S'il rencontre un thread js et continue de s'exécuter, il peut. be Ajoutez plusieurs rappels à la boucle Event Lorsque le thread js n'est pas occupé, plusieurs

seront exécutés à la fois.

Après les tests, il a été constaté que peu importe sous ie, ff, chrome, Opera, Safari, setInterval est défini à un certain intervalle

Le code du test est le suivant

Copier le code Le code est le suivant :

setInterval(function(){
xx.innerHTML=xx.innerHTML 1;
},100);

pour(var i=0;i<6000000;i ){
xx.offsetWidth
>

setTimeout(function(){
débogueur ;
},10)

Au point d'arrêt, un seul 1 a été imprimé

Problème de précision de la minuterie

Parce que js est monothread, s'il est occupé, la minuterie sera certainement inexacte et elle deviendra certainement de plus en plus longue. Il ne semble y avoir aucune solution à cela, aucune solution

Un autre problème de précision est l'intervalle minimum setTimeout(fun,0)

Lorsque le thread js n'est pas occupé, il ne peut pas être exécuté immédiatement après 0 seconde. Il y a toujours un intervalle minimum, et chaque navigateur est différent. Cela n'a pas été testé

J'ai lu un article qui mentionnait la norme w3c. Le temps d'exécution minimum du timer est de 4 ms. Je ne trouve pas la source et je ne peux pas la vérifier ! ! !

Quelques optimisations liées aux timers

Il peut encore y avoir quelques optimisations lors de la création de timers

1. Par exemple, si window.onresize est lié, il sera déclenché très fréquemment lorsque le navigateur effectue un zoom, de sorte que l'exécution peut être retardée et effacée lors de la prochaine exécution pour réduire les exécutions fréquentes

Le pseudo code est le suivant

Copier le code Le code est le suivant :

var minuterie;

Fonction r(){

          clearTimeout(timer);

        timer = setTimeout(function(){

                      //faire quelque chose

         },150 );                                               
>

2. Lorsque la barre de défilement est abaissée, il devrait également y avoir une minuterie pour le chargement paresseux des images afin d'éviter des calculs excessifs

3. Lorsqu'il y a plusieurs endroits qui nécessitent des minuteries, ils peuvent être combinés en une seule minuterie. L'intervalle de temps est basé sur le plus petit. Ensuite, la fonction de rappel qui doit être exécutée est insérée dans le tableau. l'intervalle est atteint, le tableau est parcouru. Il suffit de l'exécuter

Une petite démo

Copier le code Le code est le suivant :

小伙伴们是否对javascript定时器有所了解了呢，如有疑问给我留言吧。