Faster asynchronous execution (setTimeout multiple browsers) _ javascript skills

If you want to execute a function asynchronously, the first method we think of will certainly be setTimeout. Here is a brief introduction to make it easier for a friend who needs to execute a function asynchronously, the first method we thought of was setTimeout.
For example: setTimeout (function (/* do something after 1 S */) {}, 1000}

So what if we want to execute a function asynchronously in the fastest way?
Will it be:

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

Unfortunately, the browser sets the minimum execution interval for setTimeout to avoid the possibility of getting stuck in the ui thread due to setTimeout nesting. The minimum execution interval varies with browsers. The actual execution interval of setTimeout 0 in chrome is about 12 ms.

Is there any way to speed up the asynchronous execution of a function as soon as possible?

Let's take a look at some common asynchronous execution methods on the browser end.

SetImmediate: This method implements asynchronous execution faster than setTimeout 0. The execution time is closer to 0 ms, but only supported by IE/node.

RequestAnimationFrame: This method is often used for animation loop. This method is executed only when the browser refreshes the ui. the maximum frequency of refreshing the ui is 60fps, therefore, requestAnimationFrame is generally slower than setTimeout 0.

In addition to using asynchronous functions, there are also some ways to Implement Asynchronous calls.

Onmessage:
The onmessage method is often used for communication with iframe. But what if the same window postMessage is sent 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 use the script tag to Implement Asynchronous function execution. For example:



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



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

Who is the fastest among these methods?

Tested,

Chrome:

SetImmediate: unavailable.
SetTimeout 0: 12 ms
Onmessage: 6 ms
Onreadystatechange: not supported

In chrome, onmessage is faster than setTimeout 0.

In firefox:

SetImmediate: unavailable.
SetTimeout 0: 7 ms
Onmessage: 7 ms
Onreadystatechange: not supported

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

IE9:

SetImmediate: unavailable.
SetTimeout 0: 11 ms
Onmessage: 7 ms 10 ms
Onreadystatechange: 2 ms

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

In general, setImmediate <readystatechange <onmessage <setTimeout 0 <requestAnimationFrame
Therefore, we can simply encapsulate a method for fast asynchronous function execution:

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