Ejecución asíncrona más rápida (setTimeout múltiples navegadores)

Si queremos ejecutar una función de manera asincrónica, el primer método en el que pensamos definitivamente sería SetTimeOut

Por ejemplo: setTimeout (function (/* do algo después de 1s*/) {}, 1000}

Entonces, ¿qué pasa si desea ejecutar una función de manera asincrónica más rápida?

Será:

 setTimeout (function ( /* do algo lo antes posible* /) {}, 0}

Desafortunadamente, para evitar la posibilidad de atascar el hilo de la interfaz de usuario en el nido de SetTimeout, el navegador establece el intervalo de tiempo de ejecución mínimo para SetTimeout, y el intervalo de tiempo de ejecución mínimo para diferentes navegadores es diferente. El intervalo de tiempo de ejecución real de SetTimout 0 en Chrome es de aproximadamente 12 ms.

Entonces, si desea ejecutar una función de manera asincrónicamente asincrónica posible, ¿hay alguna forma de acelerar?

Echemos un vistazo al lado del navegador, ¿cuáles son los métodos de ejecución asincrónicos comúnmente utilizados?

SetImmediate: este método implementa la ejecución asincrónica más rápido que SetTimeout 0, con un tiempo de ejecución más cercano a 0 ms, pero solo IE/Node lo admite.

RequestAnimationFrame: este método a menudo se usa al hacer bucles de animación. Este método solo se ejecutará cuando el navegador actualice la interfaz de usuario. La frecuencia máxima de refrescar la interfaz de usuario generalmente es de 60 fps, por lo que SquitingAnimationFrame es generalmente más lenta que SetTimeout 0.

Además de usar funciones asincrónicas, existen algunos métodos que pueden implementar llamadas asíncronas.

Use OnMessage:

Al comunicarse con Iframes, el método de OnMessage a menudo se usa, pero ¿qué sucede si el mismo postmessage de la ventana se da a sí mismo? De hecho, es equivalente a ejecutar una función de manera asincrónica

Por ejemplo:

 var dosth = function () {} window.adDeventListener ("Mensaje", Dosth, true); Window.PostMessage ("", "*");

Además, también puede usar etiquetas de script para implementar la ejecución asincrónica de funciones, como:

 var periodista = document.createElement ("script"); periódico.

Agregar script al documento también ejecutará OnreadyStateChange, pero este método solo se puede usar en navegadores en IE.

Entonces, ¿quién es el más rápido con estos métodos?

Lo probó,

Bajo Chrome:

setimmediate: no disponible.

setTimeOut 0: 12ms

Onmessage: 6ms

OnreadyStateChange: no compatible

Bajo Chrome, OnMessage es más rápido que SetTimeout 0.

Firefox:

setimmediate: no disponible.

setTimeOut 0: 7ms

Onmessage: 7ms

OnreadyStateChange: no compatible

Bajo Firefox, OnMessage y SetTimeout 0 están a la misma velocidad.

IE9:

setimmediate: no disponible.

setTimeOut 0: 11ms

Onmessage: 7ms 10ms

OnreadyStateChange: 2ms

En IE9, el tiempo OnreadyStateChange es mucho más rápido que los otros dos.

En general, setimmediate <ReadyStateChange <OnMessage <setTimeOut 0 <requestAnimationFrame

Por lo tanto, simplemente podemos encapsular un método para ejecutar rápidamente la función asíncrona:

 var setzeroTimeOut = (function () {if (window.setImmediate) {// ie10+ versión, use setimmediatereturn national window.setimmediate;} else if ("onreadyStateChange" en document.createElement ("script")) {return function () {/* versión usando onreadyStateChange*/}} más if (window.postMessage) { function () {/* versión usando onMessage*/}} else {return window.setTimeout;}}) ();