Faster asynchronous execution (setTimeout multiple browsers)

If we want to execute a function asynchronously, the first method we think of would definitely be setTimeout

For example: setTimeout(function(/* do something after 1s*/){},1000}

So what if you want to execute a function asynchronously the fastest?

Will it be:

 setTimeout(function( /* do something as soon as possible*/){},0}

Unfortunately, in order to avoid the possibility of jamming the ui thread in the setTimeout nest, the browser sets the minimum execution time interval for setTimeout, and the minimum execution time interval for different browsers is different. The actual execution time interval of setTimeout 0 in chrome is about 12ms.

So if you want to execute a function asynchronously asynchronously as possible, is there any way to speed up?

Let’s take a look at the browser side, what are the commonly used asynchronous execution methods

setImmediate: This method implements asynchronous execution faster than setTimeout 0, with an execution time closer to 0ms, but only IE/node supports it.

requestAnimationFrame: This method is often used when doing animation loops. This method will only be executed when the browser refreshes the ui. The maximum frequency of refreshing the ui is generally 60fps, so requestAnimationFrame is generally slower than setTimeout 0.

In addition to using asynchronous functions, there are some methods that can implement asynchronous calls.

Use onmessage:

When communicating with iframes, the onmessage method is often used, but what happens if the same window postMessage is given to itself? In fact, it is equivalent to executing a function asynchronously

For example:

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

In addition, you can also use script tags to implement asynchronous execution of functions, such as:

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

Adding script to the document will also execute onreadystatechange, but this method can only be used in browsers under IE.

So who is the fastest with these methods?

Tested it,

Under chrome:

setImmediate: Not available.

setTimeout 0:12ms

onmessage: 6ms

onreadystatechange: Not supported

Under chrome, onmessage is faster than setTimeout 0.

firefox:

setImmediate: Not available.

setTimeout 0: 7ms

onmessage: 7ms

onreadystatechange: Not supported

Under firefox, onmessage and setTimeout 0 are at the same speed.

IE9:

setImmediate: Not available.

setTimeout 0:11ms

onmessage: 7ms 10ms

onreadystatechange: 2ms

In IE9, the time onreadystatechange is much faster than the other two.

Overall, setImmediate < readystatechange < onmessage < setTimeout 0 < requestAnimationFrame

Therefore, we can simply encapsulate a method to quickly execute asynchronous function:

 var setZeroTimeout = (function(){if(window.setImmediate){//IE10+ version, use native setImmediatereturn window.setImmediate;}else if("onreadystatechange" in document.createElement("script")){return function(){/* version using onreadystatechange*/}}else if(window.postMessage){return function(){/* version using onmessage*/}}else {return window.setTimeout;}})();