Procédure pas à pas : amélioration de la réactivité de l'interface utilisateur (HTML)

Article
06/05/2015

S'applique à Windows et Windows Phone

Cette procédure pas à pas vous guide dans le processus d'identification et de résolution d'un problème de performance à l'aide du profileur de réactivité de l'interface utilisateur XAML. Le profileur est disponible dans Visual Studio pour les applications Windows Store générées pour Windows en JavaScript. Dans ce scénario, vous créez une application de test de performance qui met à jour les éléments DOM trop fréquemment, et vous utilisez le profileur pour identifier et résoudre ce problème.

Création et exécution de l'application de test de performance

Dans Visual Studio, sélectionnez Fichier, Nouveau, Projet.
Dans le volet de gauche, sélectionnez JavaScript, puis Windows Store, Universal ou Windows Phone.
Dans le volet central, sélectionnez un des modèles de projet vide, comme Application vide.
Dans la zone Nom, spécifiez un nom, par exemple JS_Perf_Tester, puis choisissez OK.
Dans l'Explorateur de solutions, ouvrez default.html et collez le code suivant entre les balises <body> :
```
<div class="wrapper">
    <button id="content">Waiting for values</button>
</div>
```

Ouvrez default.css et ajoutez le CSS suivant :

#content {
    margin-left: 100px;
    margin-top: 100px;
}

Ouvrez default.js et remplacez l'ensemble du code par le code suivant :

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    var content;
    var wrapper;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

                content = document.getElementById("content");
                wrapper = document.querySelector(".wrapper");

                content.addEventListener("click", handler);

            } else {
            }

            args.setPromise(WinJS.UI.processAll());
        }
    };

    app.oncheckpoint = function (args) {
    };

    app.start();

    var idx = 0;
    var count = 0;
    var max = 5000;
    var text = ["what", "is", "the", "Matrix?"];
    var color = ["red", "crimson", "maroon", "purple"];

    function increment() {

        setTimeout(function () {

            idx++;
            count++;

            if (idx > 3) { idx = 0; }
            if (count < max) { increment(); }

        }, 1000);
    }

    function setValues() {

        content = document.getElementById("content");
        content.removeNode(true);

        var newNode = document.createElement("button");
        newNode.id = "content";
        newNode.textContent = text[idx];
        //newNode.textContent = getData();
        newNode.style.backgroundColor = color[idx];
        //newNode.style.animationName = "move";
        //count++;

        wrapper.appendChild(newNode);

    }

    function update() {

        setTimeout(function () {

            setValues();
            if (count < max) { update(); }
        });
    }

    function handler(args) {

        content.textContent = "eenie";
        increment();
        update();
    }

})();

Appuyez sur la touche F5 pour démarrer le débogage. Vérifiez que le bouton En attente de valeurs apparaît sur la page.
Choisissez En attente de valeurs et vérifiez que le texte et la couleur du bouton se mettent à jour toutes les secondes. Ceci est volontaire.
Basculez à nouveau vers Visual Studio (Alt+Tab) et appuyez sur Maj + F5 pour arrêter le débogage.

Maintenant que vous avez vérifié que l'application s'exécute, vous pouvez examiner ses performances à l'aide du profileur.

Analyse des données de performance

Dans la barre d'outils Déboguer, dans la liste Démarrer le débogage, sélectionnez un des Windows Phone Emulator ou Simulateur.

Conseil

Dans une application Windows Store, vous pouvez également sélectionner Ordinateur local ou Ordinateur distant dans cette liste.Toutefois, l'avantage d'utiliser l'émulateur ou le simulateur est que vous pouvez le placer en regard de Visual Studio et basculer facilement entre l'application en cours d'exécution et le profileur de réactivité de l'interface utilisateur HTML.Pour plus d'informations, consultez Exécuter des applications du Windows Store à partir de Visual Studio et Exécuter des applications du Windows Store sur un ordinateur distant à partir de Visual Studio.
Dans le menu Déboguer, sélectionnez Performances et diagnostics.
Dans Outils disponibles, sélectionnez Réactivité de l'interface utilisateur HTML, puis Démarrer.

Dans ce didacticiel, vous allez attacher le profileur au projet de démarrage. Pour plus d'informations sur les autres options, par exemple celle qui permet d'attacher le profileur à une application installée, consultez Analyser la réactivité de l'interface utilisateur (HTML).

Lorsque vous démarrez le profileur, un message de contrôle de compte d'utilisateur peut demander votre autorisation pour exécuter VsEtwCollector.exe. Cliquez sur Oui.
Dans l'application en cours d'exécution, sélectionnez En attente de valeurs et patientez environ dix secondes. Vérifiez que le texte et la couleur du bouton se mettent à jour toutes les secondes.
À partir de l'application en cours d'exécution, basculez vers Visual Studio (Alt+Tab).
Choisissez Arrêter la collecte.

Le profileur affiche des informations dans un nouvel onglet de Visual Studio. Lorsque vous examinez l'utilisation de l'UC et les données de débit visuel (i/s), vous pouvez facilement identifier quelques tendances :
- L'utilisation de l'UC augmente considérablement après environ trois secondes (lorsque vous avez appuyé sur le bouton En attente de valeurs) et affiche alors un modèle précis des événements (une combinaison cohérente d'événements de script, de style et de rendu).
- Le débit visuel n'est pas impacté et le FPS reste à 60 tout du long du processus (ainsi, il n'y a aucune image supprimée).
Regardons une section standard du graphique d'utilisation de l'UC pour découvrir ce que fait l'application dans cette période de forte activité.
Sélectionnez une seconde partie un-à-deux au milieu du graphique d'utilisation de l'UC (cliquez et faites glisser ou utilisez les touches de tabulation et les touches fléchées). L'illustration suivante montre le graphique d'utilisation de l'UC lorsqu'une sélection a été effectuée. La zone non grisée correspond à la sélection.
Choisissez Zoom avant.

Le graphique change pour afficher la période sélectionnée plus en détail. L'illustration suivante montre le graphique d'utilisation de l'UC après avoir effectué un zoom avant. (Les données spécifiques peuvent varier, mais le modèle général reste le même.)

Les détails de la chronologie dans le volet inférieur présentent un exemple de détails pour la période sélectionnée.

Les événements dans les détails de la chronologie confirment les tendances visibles montrées par le graphique d'utilisation de l'UC : de nombreux événements se produisent sur de courtes périodes. La vue Détails de la chronologie indique les événements Timer, Layout et Paint.
Utilisez le menu contextuel (ou effectuez un clic avec le bouton droit) pour sélectionner un des événements Timer dans le volet inférieur, puis sélectionnez Filtrer jusqu'à l'événement. L'illustration suivante présente un exemple de détails standard pour un des événements Timer dans l'application de tests.

Différentes informations peuvent être collectées à partir des données. Par exemple :
- Chaque événement Timer, coloré pour être identifié comme un événement de script, inclut un appel à document.createElement, suivi d'un calcul de style et d'un appel à style.backgroundColor et appendChild().
- Dans le bref intervalle de temps sélectionné (environ une à deux secondes), un grand nombre d'événements Timer, Layout et Paint se produisent. Les événements Timer se produisent beaucoup plus souvent que ce qui apparaît de la mise à jour effectuée toutes les secondes après le lancement de l'application et l'utilisation du bouton En attente de valeurs.
Pour lancer une analyse, cliquez sur le lien vers la fonction anonyme pour un des événements Timer situés dans la partie inférieure gauche du volet. La fonction suivante s'ouvre dans default.js :
```
function update() {

    setTimeout(function () {

        setValues();
        if (count < max) { update(); }
    });
}
```
Cette fonction récursive installe une boucle qui appelle la fonction setValues(), laquelle met à jour le bouton dans l'interface utilisateur. En examinant les différents événements de la minuterie dans le profileur, vous découvrez que la plupart ou la totalité des événements de la minuterie découlent de ce code, qui s'exécute trop fréquemment. Le problème semble donc provenir de là.

Résoudre le problème de performance

Remplacez la fonction update() par le code suivant :
```
function update() {

    setTimeout(function () {

        setValues();
        if (count < max) { update(); }
    }, 1000 );
}
```
Cette version corrigée du code inclut un délai de 1000 millisecondes qui a été omis de la version antérieure du code, ce qui provoque l'utilisation d'une valeur de délai par défaut. À partir de données de profileur, la valeur par défaut est zéro milliseconde, ce qui entraîne l'exécution de la fonction setValues() trop fréquemment.
Exécutez à nouveau le profileur de réactivité de l'interface utilisateur HTML et consultez le graphique d'utilisation de l'UC. Vous constaterez que les événements excessifs ont disparu et que l'utilisation de l'UC s'approche de zéro. Problème résolu !

Voir aussi

Concepts

Analyser la réactivité de l'interface utilisateur (HTML)

Partager via