JavaScript console.log verursacht den Fehler: "Synchroner XMLHttpRequest im Hauptthread ist veraltet..."

Question

Ich habe Logs zur Konsole hinzugefügt, um den Status verschiedener Variablen zu überprüfen, ohne den Firefox-Debugger zu verwenden.

Jedoch erhalte ich an vielen Stellen, an denen ich ein console.log in meiner main.js Datei hinzufüge, anstelle meiner schönen kleinen handschriftlichen Nachrichten an mich selbst den folgenden Fehler:

Synchrone XMLHttpRequest im Hauptthread ist veraltet aufgrund seiner schädlichen Auswirkungen auf die Benutzererfahrung. Für weitere Hilfe http://xhr.spec.whatwg.org/

Welche Alternativen oder Wrappers für console.log kann ich in meinem Code verwenden, die diesen Fehler nicht verursachen werden?

Mache ich etwas falsch?

Answer 1

Dies ist mir passiert, als ich faul war und ein Skript-Tag als Teil des zurückgegebenen Inhalts inkludiert habe. Wie folgt:

Teilinhalt des HTML:

 EINIGER INHALT HIER

Es scheint, zumindest in meinem Fall, dass wenn Sie HTML-Inhalt auf diese Weise über XHR zurückgeben, jQuery einen Aufruf macht, um dieses Skript abzurufen. Dieser Aufruf erfolgt mit einem async-Flag false, da es davon ausgeht, dass Sie das Skript benötigen, um mit dem Laden fortzufahren.

In Situationen wie dieser wäre es besser, sich mit einem Bindungsframework zu befassen und einfach ein JSON-Objekt zurückzugeben, oder je nach Ihrer Backend- und Templating-Technologie könnten Sie ändern, wie Sie Ihre Skripte laden.

Sie können auch jQuery's getScript() verwenden, um relevante Skripte abzurufen. Hier ist ein Beispielfiddle, es ist nur eine direkte Kopie des jQuery-Beispiels, aber ich sehe keine Warnungen, wenn die Skripte auf diese Weise geladen werden.

Beispiel

var url = "/scripts/script.js";
$.getScript(url);

http://jsfiddle.net/49tkL0qd/

Answer 2

Die Warnmeldung KANN darauf zurückzuführen sein, dass eine XMLHttpRequest-Anfrage im Hauptthread mit dem async-Flag auf false gesetzt wurde.

https://xhr.spec.whatwg.org/#synchronous-flag:

Synchrones XMLHttpRequest außerhalb von Workern wird aus der Webplattform entfernt, da es negative Auswirkungen auf die Benutzererfahrung hat. (Dies ist ein langer Prozess, der viele Jahre dauert.) Entwickler dürfen nicht false für das async-Argument übergeben, wenn die JavaScript-Globale Umgebung eine Dokumentumgebung ist. Benutzeragenten werden dringend davon abgeraten, vor einer solchen Verwendung in den Entwicklertools zu warnen und können experimentell darüber nachdenken, eine InvalidAccessError-Ausnahme zu werfen, wenn dies auftritt.

Die zukünftige Ausrichtung besteht darin, XMLHttpRequests nur in Worker-Threads zuzulassen. Die Nachricht soll als Warnung in diesem Sinne verstanden werden.

Answer 3

Ich hatte auch mit dem gleichen Problem zu kämpfen, konnte es jedoch durch das Setzen von async: true beheben. Ich weiß, dass es standardmäßig true ist, aber es funktioniert, wenn ich es explizit schreibe

$.ajax({
   async: true,   // das wird das Problem lösen
   type: "POST",
   url: "/Page/Method",
   contentType: "application/json",
   data: JSON.stringify({ ParameterName: paramValue }),
});

Answer 4

Der Live-Debugger von Visual Studio 2015/2017 injiziert Code, der den veralteten Aufruf enthält.

Answer 5

Manchmal ist es notwendig, ein Skript über Ajax zu laden, aber dokumentenbereit zu verzögern, bis das Skript geladen ist.

jQuery unterstützt dies mit der holdReady()-Funktion.

Beispiel Verwendung:

$.holdReady(true);                              // Halten einstellen
function releaseHold() { $.holdReady(false); }  // Rückruf zum Freigeben
$.getScript('script.js', releaseHold);          // Skript laden und dann Halten freigeben

Das tatsächliche Laden des Skripts erfolgt asynchron (kein Fehler), aber der Effekt ist synchron, wenn der restliche JavaScript nach dokumentenbereit ausgeführt wird.

Dieses fortgeschrittene Feature würde normalerweise von dynamischen Skript-Ladern verwendet, die zusätzliches JavaScript wie jQuery-Plugins laden möchten, bevor sie das Bereit-Ereignis zulassen, auch wenn das DOM bereits bereit ist.

Dokumentation:
https://api.jquery.com/jquery.holdready

---

UPDATE 7. Januar 2019

Von JQMIGRATE:

jQuery.holdReady() ist veraltet

Ursache: Die jQuery.holdReady()-Methode wurde aufgrund ihrer nachteiligen Auswirkungen auf die globale Leistung der Seite veraltet. Diese Methode kann verhindern, dass der gesamte Code auf der Seite über längere Zeiträume initialisiert wird.

Lösung: Die Seite so umschreiben, dass nicht alle jQuery-Bereit-Handler verzögert werden müssen. Dies könnte beispielsweise erreicht werden, indem nur der Code spät geladen wird, der die Verzögerung erfordert, wenn es sicher ist, ihn auszuführen. Aufgrund der Komplexität dieser Methode versucht jQuery Migrate nicht, die Funktionalität zu übernehmen. Wenn die zugrunde liegende Version von jQuery, die mit jQuery Migrate verwendet wird, jQuery.holdReady() nicht mehr enthält, wird der Code kurz nach dem Erscheinen dieser Warnung fehlschlagen.