Asynchrones Interagieren mit HTTP- und HTTPS-Ressourcen

Kategorie: Leistung

Wirkungspotential: Hoch

Symptome

Synchrone Anfragen blockieren die Ausführung anderer Skripte, was Folgendes bewirken kann:

• Nicht reaktionsfähige modellgetriebene und Canvas-Anwendungen
• Langsame Kundeninteraktionen

Anleitung

Interagieren Sie nach Möglichkeit asynchron mit HTTP- und HTTPS-Ressourcen. Benutzer sollten Verbesserungen in der tatsächlichen Ladezeit der Seite oder der wahrgenommenen Geschwindigkeit des Seitenaufbaus feststellen. Auch die Reaktionsfähigkeit der Seite sollte zunehmen.

Die folgenden Optionen stehen in modernen Browsern zur Verfügung, um asynchron mit Diensten zu interagieren.

Hinweis

Das Hinzufügen von asynchronen Interaktionen erfordert einen anderen Designstil als synchrone Interaktionen. Callbacks können in einer nicht deterministischen Reihenfolge ausgeführt werden, d.h. Sie müssen mehr darüber nachdenken, ob der Seitenfluss und die Integrität jederzeit korrekt sind. Beispielsweise müssen Sie oft Maßnahmen ergreifen, um sicherzustellen, dass die Kontrollen erst aktiviert werden, wenn alle abhängigen Serviceaufrufe zurückgegeben wurden. Mit ein paar zusätzlichen Schritten kann ein angenehmeres Benutzererlebnis gewährleistet werden.

• Traditionell wurden Ribbon-Regeln mit synchronen Anforderungen geschrieben, da true/false zurückgegeben werden musste. Einheitliche Oberfläche unterstützt die Rückgabe eines Versprechens anstelle eines Bools, wodurch Ribbon-Regeln asynchrone Netzwerkanforderungen ausgeben können. Weitere Informationen finden Sie unter Aktivierungsregeln für Multifunktionsleisten definieren.

• XMLHttpRequest, wobei der Async-Parameter weggelassen oder auf true gesetzt wurde.

  // Missing the async parameter, which is the third parameter. It defaults to true, which is the value you want.
  var requestXhr = new XMLHttpRequest();
  requestXhr.open('GET', '/test/test.txt');
  
  // Explicitly setting the async parameter.
  requestXhr.open('GET', '/test/test.txt', true);
  

• Fetch API-Nutzung

  Wichtig

  Bevor Sie mit dieser Option fortfahren, stellen Sie sicher, dass die Browser, die zur Interaktion mit Ihren Anpassungen verwendet werden, unterstützt werden. Lesen Sie den Abschnitt Browser-Kompatibilität der Fetch-Dokumentation.

Problematische Muster

Es gibt mehrere Möglichkeiten, mit dem Server zu interagieren oder Ressourcen anzufordern. Gängige Ansätze, die eine synchrone Kommunikation ermöglichen, sind die folgenden:

Warnung

Diese Szenarien sollten vermieden werden.

• Verwendung des in false übergebenen Objekts XMLHttpRequest für den Wert des Parameters async für den Funktionsaufruf open.

  var requestXhr = new XMLHttpRequest();
  
  // Explicitly setting the async parameter to false or supplying a variable with a value of false will force this as a synchronous call.
  requestXhr.open('GET', '/test/test.txt', false);
  

• Verwendung der jQuery Funktion ajax, Übergabe von false für den Wert des Parameters async.

  // Explicitly setting the async parameter to false or supplying a variable with a value of false will force this as a synchronous call.
  var requestAjax = $.ajax({ async: false, url: '/test/test.txt' });
  

• Speziell für Interaktionen mit den Dynamics 365-Diensten gibt es JavaScript-Bibliotheken, die explizite Operationen für gemeinsame Interaktionen mit dem Produkt bereitstellen. Zu den gängigen Bibliotheken gehören (sind aber nicht beschränkt auf): SDK.REST.js, SDK.Soap.js und XrmServiceToolkit.js.

  • Für diese gibt es einige Funktionen, die nur synchrone Operationen unterstützen; andere erfordern die Übergabe einer Callback-Funktion als Parameter, um async auf true zu setzen. Das Standardverhalten für die meisten ist, den zugrunde liegenden Async-Parameter für den offenen Aufruf des Objekts XMLHttpRequest auf false zu setzen.

Weitere Informationen

Leistung

Ein Browser interpretiert Skript auf einem einzelnen Thread. Wenn dieser Thread verwendet wird, um einen Prozess synchron auszuführen, reagiert der Browser nicht mehr auf die Interaktionen des Benutzers ("einfrieren"), während er auf das Ende des Prozesses wartet. Synchrone Aufrufe verhindern auch die Möglichkeit, mehr als eine Interaktion gleichzeitig auszuführen, was dazu führt, dass alle Aufrufe serieller Natur sind. In vielen Fällen führt dies zur Frustration Ihrer Benutzer. Optimieren Sie die Reaktionsfähigkeit der Benutzer durch die Integration asynchroner Service-Aufrufe.

Browserunterstützung

Die Spezifikation für XMLHttpRequest besagt, dass die synchrone Verwendung aus dem Standard entfernt wird, weil sie nun veraltet ist. Derzeit zeigen Browser nur Warnungen an, aber eine InvalidAccessError-Ausnahme kann in Zukunft ausgelöst werden, wenn ein Wert von false an den asynchronen Parameter übergeben wird. Moderne Browser haben synchrone Anfragen, die auf dem Hauptthread ausgeführt werden, als veraltet erklärt.

Hinweis

Es werden moderne APIs eingeführt, die keine Möglichkeit mehr für synchrone Operationen bieten. Weitere Informationen finden Sie in der Dokumentation der Fetch-API.

window.setTimeout

Obwohl die Aufnahme von Skriptblöcken als Parameter für die Funktion window.setTimeout den normalen synchronen Ablauf der Seitenausführung unterbricht, wird keine Parallelverarbeitung durchgeführt.

window.setTimeout(
    function () {
        var oReq = new XMLHttpRequest();
        oReq.open('GET', '/test/action', false);
    }, 0);

Der Ansatz in diesem Beispiel verarbeitet noch auf dem Main Browser UI-Thread und sperrt den Browser.

Siehe auch

Definieren Sie die Ribbon-Enable-Regeln XMLHttpRequest
XMLHttpRequest-Spezifikation (mit synchroner Deprecation-Anweisung)
Fetch-API-Spezifikation
Fetch API

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).