Faster asynchronous execution (settimeout multiple browsers) _javascript tips

If you want to execute a function asynchronously, the first way we think of it is settimeout
For example: settimeout (function (/* 1s after doing something * * *) {},1000}

So what if you're going to execute a function asynchronously, most quickly?
Whether it will be:

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

Unfortunately, the minimum execution time interval for the settimeout is not the same for the browser, in order to avoid the possibility that the settimeout nesting might occur with a card-dead UI thread. The actual execution time interval of the chrome test settimeout 0 is about 12ms.

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

First look at the browser side, what are the common methods of asynchronous execution

Setimmediate: This method achieves faster asynchronous execution than settimeout 0, execution time is closer to 0ms, but only ie/node support.

Requestanimationframe: This method is often used when doing animation loops, which only executes when the browser refreshes the UI, and the maximum frequency for refreshing the UI is typically 60fps, So requestanimationframe is generally slower than settimeout 0.

In addition to using asynchronous functions, there are ways to implement asynchronous calls

Using OnMessage:
The OnMessage method is often used when communicating with an IFRAME, but what happens if the same window PostMessage to itself? In fact, it is equivalent to performing a function asynchronously
For example:

var dosth = function () {}
Window.addeventlistener ("message", Dosth, true);
Window.postmessage ("", "*");




In addition, you can use the script tag 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 also executes onreadystatechange but this method can only be used in IE browser.

So which of these methods is the quickest?

Tested a bit,

Chrome bottom:

Setimmediate: Not available.
SetTimeout 0:12ms
Onmessage:6ms
onReadyStateChange: Not supported

Under Chrome, OnMessage is faster than settimeout 0.

Firefox under:

Setimmediate: Not available.
SetTimeout 0:7ms
Onmessage:7ms
onReadyStateChange: Not supported

Firefox, OnMessage and settimeout 0 speed equivalent.

IE9:

Setimmediate: Not available.
SetTimeout 0:11ms
Onmessage:7ms 10ms
Onreadystatechange:2ms

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

Overall, Setimmediate < ReadyStateChange < OnMessage < settimeout 0 < Requestanimationframe
So we can simply encapsulate a quick way to execute an asynchronous function:

var setzerotimeout = (function () {
if (window.setimmediate) {
//ie10+ version, using native setimmediate return
window.setimmediate;
}
else if ("onReadyStateChange" in Document.createelement ("script")} {return
function () {*/* uses the version of onReadyStateChange * *
/else if (window.postmessage) {return
function () {*/* using onmessage Asynchronous execution Version/}
}
else {
Return window.settimeout
}

}) ();