Schnellere asynchrone Ausführung (SetTimeout Mehrere Browser)

Wenn wir asynchron eine Funktion ausführen wollen, wäre die erste Methode, an die wir denken, definitiv SetTimeout

Zum Beispiel: setTimeout (Funktion (/* etwas nach 1s*/) {}, 1000} machen

Was ist, wenn Sie eine Funktion asynchron ausführen möchten?

Wird es sein:

 setTimeout (Funktion ( /* Machen Sie so schnell wie möglich etwas* /) {}, 0}

Um die Möglichkeit zu vermeiden, den UI -Thread im SetTimeout -Nest zu verkleinern, legt der Browser leider das minimale Ausführungszeitintervall für SetTimeOut fest, und das minimale Ausführungszeitintervall für verschiedene Browser ist unterschiedlich. Das tatsächliche Ausführungszeitintervall von SetTimeout 0 in Chrom beträgt etwa 12 ms.

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

Schauen wir uns die Browser -Seite an, was sind die häufig verwendeten asynchronen Ausführungsmethoden

SetMediate: Diese Methode implementiert eine asynchrone Ausführung schneller als SetTimeout 0, wobei eine Ausführungszeit näher an 0 ms ist, aber nur IE/Knoten unterstützt sie.

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 des Auffrischens der Benutzeroberfläche beträgt im Allgemeinen 60 fps, so

Zusätzlich zur Verwendung asynchroner Funktionen gibt es einige Methoden, die asynchrone Anrufe implementieren können.

Verwenden Sie OnMessage:

Bei der Kommunikation mit IFrames wird die OnMessage -Methode häufig verwendet. Was passiert jedoch, wenn sich selbst das gleiche Fensterpostmessage selbst gegeben wird? Tatsächlich ist es gleichwertig, eine Funktion asynchron auszuführen

Zum Beispiel:

 var dosth = function () {} window.adDeVentListener ("meldung", dosth, true); window.postMessage ("", "*");

Darüber hinaus können Sie auch Skript -Tags verwenden, um die asynchrone Ausführung von Funktionen zu implementieren, wie z. B.:

 var newscript = document.createElement ("script"); newscript.onReadyStatechange = dosth; document.documentElement.AppendChild (newscript);

Durch das Hinzufügen von Skript zum Dokument wird auch OnReadyStatEchange ausgeführt. Diese Methode kann jedoch nur in Browsern unter IE verwendet werden.

Wer ist mit diesen Methoden am schnellsten?

Getestet, es,

Unter Chrome:

SetMediate: Nicht verfügbar.

setTimeout 0: 12 ms

OnMessage: 6ms

OnreadyStatechange: Nicht unterstützt

Unter Chrome ist OnMessage schneller als SetTimeout 0.

Firefox:

SetMediate: Nicht verfügbar.

setTimeout 0: 7 ms

OnMessage: 7 ms

OnreadyStatechange: Nicht unterstützt

Unter Firefox sind OnMessage und SetTimeout 0 mit der gleichen Geschwindigkeit.

IE9:

SetMediate: Nicht verfügbar.

setTimeout 0: 11 ms

OnMessage: 7 ms 10 ms

OnreadyStatechange: 2 ms

In IE9 ist die Zeit onreadyStatechange viel schneller als die anderen beiden.

Insgesamt SetImmediate <readredeStatechange <onMessage <setTimeout 0 <RequestAnimationFrame

Daher können wir einfach eine Methode zusammenfassen, um die asynchrone Funktion schnell auszuführen:

 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 mit OnMessage*/}} else {return window.settimeout;}}) ();