Schnellere asynchrone Ausführung (setTimeout mehrerer Browser)_Javascript-Kenntnisse

Wenn wir eine Funktion asynchron ausführen möchten, ist die erste Methode, die uns einfällt, definitiv setTimeout
Zum Beispiel: setTimeout(function( /* etwas tun nach 1s */){},1000}

Was ist, wenn Sie eine Funktion so schnell wie möglich asynchron ausführen möchten?
Wird es sein:

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

Um die Möglichkeit einer Blockierung des UI-Threads aufgrund der SetTimeout-Verschachtelung zu vermeiden, legt der Browser leider ein minimales Ausführungszeitintervall für setTimeout fest. Das minimale Ausführungszeitintervall verschiedener Browser ist unterschiedlich. Das tatsächliche Ausführungszeitintervall von setTimeout 0 beträgt beim Testen unter Chrome etwa 12 ms.

Wenn Sie also eine Funktion so schnell wie möglich asynchron ausführen möchten, gibt es eine Möglichkeit, sie zu beschleunigen?

Werfen wir zunächst einen Blick auf die Browserseite, um zu sehen, welche Methoden zur asynchronen Ausführung am häufigsten verwendet werden

setImmediate: Diese Methode erreicht eine schnellere asynchrone Ausführung als setTimeout 0 und die Ausführungszeit liegt näher bei 0 ms, wird jedoch nur von IE/Knoten unterstützt.

requestAnimationFrame: Diese Methode wird häufig bei Animationsschleifen verwendet. Diese Methode wird nur ausgeführt, wenn der Browser die Benutzeroberfläche aktualisiert. Die maximale Häufigkeit der Aktualisierung der Benutzeroberfläche beträgt im Allgemeinen 60 fps, sodass requestAnimationFrame im Allgemeinen langsamer ist als setTimeout 0.

Zusätzlich zur Verwendung asynchroner Funktionen gibt es einige Möglichkeiten, asynchrone Aufrufe zu implementieren

Verwenden Sie onmessage:
Die Methode onmessage wird häufig bei der Kommunikation mit Iframes verwendet. Was passiert jedoch, wenn dasselbe Fenster eine Nachricht an sich selbst sendet? Tatsächlich entspricht es der asynchronen Ausführung einer Funktion
Zum Beispiel:

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

<code><br />

Darüber hinaus können Sie auch Skript-Tags verwenden, um die asynchrone Ausführung von Funktionen zu implementieren, zum Beispiel:
<code><br />

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

<code><br />
Durch das Hinzufügen eines Skripts zum Dokument wird auch onreadystatechange ausgeführt, diese Methode kann jedoch nur in Browsern unter IE verwendet werden.

Welche dieser Methoden ist also die schnellste?

Getestet,

Unter Chrom:

setImmediate: Nicht verfügbar.
setTimeout 0:12ms
onmessage: 6ms
onreadystatechange: nicht unterstützt

Unter Chrome ist onmessage schneller als setTimeout 0.

Unter Firefox:

setImmediate: Nicht verfügbar.
setTimeout 0:7ms
onmessage: 7ms
onreadystatechange: nicht unterstützt

Unter Firefox sind onmessage und setTimeout 0 gleich schnell.

IE9:

setImmediate: Nicht verfügbar.
setTimeout 0:11ms
onmessage: 7ms 10ms
onreadystatechange: 2ms

Unter IE9 ist die onreadystatechange-Zeit viel schneller als bei den anderen beiden.

Im Allgemeinen ist setImmediate < onmessage < requestAnimationFrame
Daher können wir einfach eine Methode kapseln, die asynchrone Funktionen schnell ausführt:

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;
}

})();