Interagissez avec les ressources HTTP et HTTPS de manière asynchrone

Catégorie : Performance

Potentiel d’impact : Élevé

Symptômes

Les requêtes synchrones bloquent l’exécution d’autres scripts, qui peuvent entraîner comme suit :

• Des applications basées sur des modèles et des applications canevas qui ne répondent pas
• Des interactions lentes avec le client

Recommandation

Interagissez de manière asynchorne avec les ressources HTTP et HTTPS chaque fois que possible Les utilisateurs doivent remarquer des améliorations dans le délai de chargement réel des pages ou la vitesse de chargement de page perçue. La réactivité de la page doit également augmenter.

Les options suivantes sont disponibles dans les navigateurs modernes pour interagir avec des services asynchrones.

Notes

L’ajout d’interactions asynchrones nécessite un style différent de conception des interactions synchrones. Les rappels peuvent s’exécuté dans un ordre non déterministe, ce qui signifie vous devez réfléchir davantage à garantir que le flux et l’intégrité de la page sont corrects à tout moment. Par exemple, vous devrez souvent mettre en place des mesures pour garantir que les contrôles ne sont pas activés jusqu’à ce que tous les appels de services dépendants soient retournés. Effectuer quelques étapes supplémentaires peut garantir une expérience utilisateur plus agréable.

• En règle générale, les règles de ruban ont été entrées avec des demandes synchrones comme true/false devait être renvoyé. Unified Interface prend en charge une promise de retour plutôt qu’une valeur booléenne, ce qui permet aux règles du ruban d’émettre des requêtes réseau asynchrones. Pour plus d’informations, voir Définir les règles d’activation du ruban.

• XMLHttpRequest avec le paramètre asynchrone omis ou défini sur True

  // 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);
  

• Utilisation de l’API Fetch

  Important

  Avant de procéder avec cette option, vérifiez que la prise en charge est disponible pour les navigateurs utilisés pour interagir avec vos personnalisations. Consultez la section Compatibilité du navigateur de la documentation Fetch.

Schémas problématiques

Il existe diverses manières d’interagir avec le serveur ou de demander des ressources. Les méthodes courantes qui permettent des communications synchrones comprennent :

Avertissement

Ces scénarios doivent être évités.

• Utilisation de l’objet XMLHttpRequest transmis en false pour la valeur du paramètre async pour l’appel de fonction 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);
  

• Utilisation de la fonction ajax de jQuery avec false pour la valeur du paramètre 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' });
  

• Spécifiques aux interactions avec les services Dynamics 365, il existe des bibliothèques JavaScript qui fournissent des opérations explicites aux interactions courantes avec le produit. Les bibliothèques courantes incluent (sans y être limitées) : SDK.REST.js, SDK.Soap.js et XrmServiceToolkit.js.

  • Pour ces éléments, certaines fonctions prenant en charge uniquement les opérations synchrones ; d’autres nécessitent le transfert d’une fonction de rappel comme paramètre pour définir l’async sur True. Le comportement par défaut pour la plupart consiste à définir le paramètre sous-jacent d’async sur false pour l’appel ouvert de l’objet XMLHttpRequest.

Informations supplémentaires

Niveau de performance

Un navigateur interprète le script est un thread unique. Si ce thread est utilisé pour exécuter un processus de manière synchrone, le navigateur cessera de répondre aux interactions de l’utilisateur (« se fige ») en attendant que le processus se termine. Les appels synchrones peuvent également supprimer la possibilité d’effectuer plusieurs interaction simultanément, forçant tous les appels à être en série de nature. Dans de nombreux cas, cela provoque de la frustration chez vos utilisateurs. Optimisez la réactivité de l’utilisateur en intégrant des appels de service asynchrones.

Prise en charge par les navigateurs Web

La spécification pour XMLHttpRequest indique que l’utilisation synchrone est supprimée de la norme car elle est maintenant obsolète. Actuellement, les navigateurs présentent uniquement des avertissements, mais une exception InvalidAccessError peut être levée à l’avenir lorsqu’une valeur False est passée au paramètre d’async. Les navigateurs modernes ont déclaré les demandes synchrones exécutées vis-à-vis du thread principal comme obsolètes.

Notes

Des API modernes sont introduites qui ne fourniront plus d’option pour des opérations synchrones. Reportez-vous à la documentation de l’API Fetch pour plus de détails.

window.setTimeout

Bien que l’inclusion de blocs de scripts sous la forme d’un paramètre dans la fonction window.setTimeout interrompt le flux synchrone normal de l’exécution de page, il n’accomplit pas le traitement parallèle.

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

L’approche de cet exemple continue de traiter le thread d’interface utilisateur du navigateur principal, ce qui verrouille le navigateur.

Voir aussi

Définir les règles d’activation du ruban XMLHttpRequest
Spécification XMLHttpRequest (avec notification d’obsolescence synchrone)
Spécification de l’API Fetch
API Fetch

Notes

Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)

Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).