Faster asynchronous execution (setTimeout multiple browsers)_javascript skills

If we want to execute a function asynchronously, the first method we think of is definitely setTimeout
For example: setTimeout(function( /* do something after 1s */){},1000}

What if you want to execute a function asynchronously as quickly as possible?
Will it be:

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

Unfortunately, in order to avoid the possibility of blocking the ui thread due to setTimeout nesting, the browser sets a minimum execution time interval for setTimeout. The minimum execution time interval of different browsers is different. The actual execution time interval of setTimeout 0 when tested under chrome is about 12ms.

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

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

setImmediate: This method achieves faster asynchronous execution than setTimeout 0, and the execution time is closer to 0ms, but it is only supported by IE/node.

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 ways to implement asynchronous calls

Use onmessage:
The onmessage method is often used when communicating with iframes, but what happens if the same window postsMessage to itself? In fact, it is equivalent to executing a function asynchronously
For example:

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

<code><br>

In addition, you can also use script tags to implement asynchronous execution of functions, for example:
<code><br>

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

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

So among these methods, which one is the fastest?

Tested it,

Under chrome:

setImmediate: Not available.
setTimeout 0：12ms
onmessage: 6ms
onreadystatechange: not supported

Under chrome, onmessage is faster than setTimeout 0.

Under firefox:

setImmediate: Not available.
setTimeout 0：7ms
onmessage: 7ms
onreadystatechange: not supported

Under Firefox, onmessage and setTimeout 0 are equally fast.

IE9:

setImmediate: Not available.
setTimeout 0:11ms
onmessage: 7ms 10ms
onreadystatechange: 2ms

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

In general, setImmediate < readystatechange < onmessage < setTimeout 0 < requestAnimationFrame
Therefore, we can simply encapsulate a method that quickly executes asynchronous functions:

var setZeroTimeout = (function(){
if(window.setImmediate){
//IE10+版本，使用原生setImmediate
return window.setImmediate;
}
else if("onreadystatechange" in document.createElement("script")){
return function(){/* 使用onreadystatechange的版本 */}
}
else if(window.postMessage){
return function(){/* 使用onmessage的异步执行版本 */}
}
else {
return window.setTimeout;
}

})();