Exécution asynchrone plus rapide (setTimeout plusieurs navigateurs)_compétences javascript

Si nous voulons exécuter une fonction de manière asynchrone, la première méthode à laquelle nous pensons est définitivement setTimeout
Par exemple : setTimeout(function( /* faire quelque chose après 1 s */){},1000}

Et si vous souhaitez exécuter une fonction de manière asynchrone le plus rapidement possible ?
Sera-ce :

setTimeout(function( /* 尽快做点什么 */){},0}

Malheureusement, afin d'éviter la possibilité de bloquer le thread de l'interface utilisateur en raison de l'imbrication setTimeout, le navigateur définit un intervalle de temps d'exécution minimum pour setTimeout. L'intervalle de temps d'exécution minimum des différents navigateurs est différent. L'intervalle de temps d'exécution réel de setTimeout 0 lorsqu'il est testé sous Chrome est d'environ 12 ms.

Donc, si vous souhaitez exécuter une fonction de manière asynchrone le plus rapidement possible, existe-t-il un moyen de l'accélérer ?

Jetons d'abord un coup d'œil du côté du navigateur pour voir quelles sont les méthodes d'exécution asynchrone couramment utilisées

setImmediate : cette méthode permet une exécution asynchrone plus rapide que setTimeout 0, et le temps d'exécution est plus proche de 0 ms, mais elle n'est prise en charge que par IE/node.

requestAnimationFrame : Cette méthode est souvent utilisée lors de la création de boucles d'animation. Cette méthode ne sera exécutée que lorsque le navigateur actualise l'interface utilisateur. La fréquence maximale d'actualisation de l'interface utilisateur est généralement de 60 ips, donc requestAnimationFrame est généralement plus lente que setTimeout 0. .

En plus d'utiliser des fonctions asynchrones, il existe plusieurs moyens d'implémenter des appels asynchrones

Utiliser sur le message :
La méthode onmessage est souvent utilisée lors de la communication avec des iframes, mais que se passe-t-il si la même fenêtre publie un message sur elle-même ? En fait, cela équivaut à exécuter une fonction de manière asynchrone
Par exemple :

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

<code><br />

De plus, vous pouvez également utiliser des balises de script pour implémenter l'exécution asynchrone de fonctions, par exemple :
<code><br />

var newScript = document.createElement("script");
newScript.onreadystatechange = doSth;
document.documentElement.appendChild(newScript);

<code><br>
L'ajout d'un script au document exécutera également onreadystatechange, mais cette méthode ne peut être utilisée que dans les navigateurs sous IE.

Alors parmi ces méthodes, laquelle est la plus rapide ?

Je l'ai testé,

Sous chrome :

setImmediate : non disponible.
setTimeout 0：12ms
sur message : 6 ms
onreadystatechange : non pris en charge

Sous Chrome, onmessage est plus rapide que setTimeout 0.

Sous Firefox :

setImmediate : non disponible.
setTimeout 0：7ms
sur message : 7 ms
onreadystatechange : non pris en charge

Sous Firefox, onmessage et setTimeout 0 sont tout aussi rapides.

IE9 :

setImmediate : non disponible.
setTimeout 0:11ms
sur message : 7ms 10ms
onreadystatechange : 2 ms

Sous IE9, le temps de changement d'état onready est beaucoup plus rapide que les deux autres.

En général, setImmediate