Exécution asynchrone plus rapide (Settimeout multiples navigateurs)

Si nous voulons exécuter une fonction de manière asynchrone, la première méthode à laquelle nous pensons serait certainement Settimeout

Par exemple: setTimeout (fonction (/ * faire quelque chose après 1s * /) {}, 1000}

Et si vous voulez exécuter une fonction de manière asynchrone la plus rapide?

Ce sera:

 setTimeout (fonction (/ * faire quelque chose dès que possible * /) {}, 0}

Malheureusement, afin d'éviter la possibilité de bloquer le thread d'interface utilisateur dans le nid Settimeout, le navigateur définit l'intervalle de temps d'exécution minimum pour Settimeout, et l'intervalle de temps d'exécution minimum pour différents navigateurs est différent. L'intervalle de temps d'exécution réel de Settimeout 0 dans Chrome est d'environ 12 ms.

Donc, si vous souhaitez exécuter une fonction de manière asynchrone de manière asynchrone que possible, y a-t-il un moyen d'accélérer?

Jetons un coup d'œil au côté navigateur, quelles sont les méthodes d'exécution asynchrones couramment utilisées

SetImMediate: Cette méthode implémente l'exécution asynchrone plus rapidement que Settimeout 0, avec un temps d'exécution plus proche de 0 ms, mais seul IE / Node le prend en charge.

RequestanimationFrame: cette méthode est souvent utilisée lors des boucles d'animation. Cette méthode ne sera exécutée que lorsque le navigateur rafraîchit l'interface utilisateur. La fréquence maximale de rafraîchissement de l'interface utilisateur est généralement de 60 images par seconde, donc le châque de demande est généralement plus lent que Settimeout 0.

En plus d'utiliser des fonctions asynchrones, certaines méthodes peuvent implémenter des appels asynchrones.

Utilisez le remun:

Lors de la communication avec des iframes, la méthode OnMessage est souvent utilisée, mais que se passe-t-il si le même postmessage de fenêtre est donné à lui-même? En fait, il équivaut à l'exécution d'une fonction de manière asynchrone

Par exemple:

 var dosth = function () {} window.addeventListener ("message", dosth, true); window.postMessage ("", "*");

De plus, vous pouvez également utiliser des balises de script pour implémenter l'exécution asynchrone des fonctions, telles que:

 var newscript = document.createElement ("script"); newscript.onreadystatechange = dosth; document.documentElement.ApendChild (newscript);

L'ajout de script au document exécutera également OnReadyStateChange, mais cette méthode ne peut être utilisée que dans les navigateurs sous IE.

Alors, qui est le plus rapide avec ces méthodes?

L'a testé,

Sous Chrome:

Settimmediate: non disponible.

setTimeout 0: 12ms

OnMessage: 6 ms

onreadystatechange: non pris en charge

Sous Chrome, OnMessage est plus rapide que Settimeout 0.

Firefox:

Settimmediate: non disponible.

setTimeout 0: 7ms

OnMessage: 7 ms

onreadystatechange: non pris en charge

Sous Firefox, OnMessage et Settimeout 0 sont à la même vitesse.

IE9:

Settimmediate: non disponible.

setTimeout 0: 11ms

OnMessage: 7ms 10ms

onreadystatechange: 2 ms

Dans IE9, le temps OnReadyStateChange est beaucoup plus rapide que les deux autres.

Dans l'ensemble, SetImMediate <ReadyStateChange <OnMessage <setTimeout 0 <DequestanimationFrame

Par conséquent, nous pouvons simplement encapsuler une méthode pour exécuter rapidement la fonction asynchrone:

 var setzeroTimeout = (function () {if (window.setimMediate) {// ie10 + version, utilisez natif setImMmeDiateTurn window.setimmediate;} else if ("onreadystatechange" dans document.CreateElement ("script")) {return function () {/ * version using onReadystatechange * /}} function () {/ * version utilisant onMessage * /}} else {return window.setTimeout;}}) ();