Tutorial: Mejorar la capacidad de respuesta de la interfaz de usuario (HTML)

Artículo
06/05/2015

Se aplica a Windows y a Windows Phone

Este tutorial te guía por el proceso de identificación y corrección de un problema de rendimiento mediante el generador de perfiles de capacidad de respuesta de la IU de HTML. El generador de perfiles está disponible en Visual Studio para aplicaciones de la Tienda Windows basadas en Windows con JavaScript. En este escenario, crearás una aplicación de prueba de rendimiento que actualiza los elementos DOM con demasiada frecuencia, y usarás el generador de perfiles para identificar y corregir este problema.

Crear y ejecutar la aplicación de prueba de rendimiento

En Visual Studio, elige Archivo, Nuevo, Proyecto.
Elige JavaScript en el panel izquierdo y, a continuación, elige Tienda Windows, Universal o Windows Phone.
Elige una de las plantillas de proyecto en blanco en el panel central, como Aplicación en blanco.
En el cuadro Nombre, especifica un nombre como JS_Perf_Tester y elige Aceptar.
En el Explorador de soluciones, abra default.html y pegue el siguiente código entre las etiquetas <body>:
```
<div class="wrapper">
    <button id="content">Waiting for values</button>
</div>
```

Abre default.css y agrega el código CSS siguiente:

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

Abre default.js y reemplaza todo el código con este código:

(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();
    }

})();

Elige la tecla F5 para iniciar la depuración. Comprueba que el botón Waiting for values aparece en la página.
Elige Waiting for values y comprueba que el texto y el color del botón se actualizan aproximadamente una vez por segundo. Esto es así de forma intencionada.
Vuelve a Visual Studio (Alt+Tab) y presiona Mayús+F5 para detener la depuración.

Ahora que has comprobado que la aplicación funciona, puedes examinar el rendimiento utilizando el generador de perfiles.

Analizar los datos de rendimiento

En la barra de herramientas Depurar, en la lista Iniciar depuración, elige uno de los emuladores de Windows Phone o Simulador.

Sugerencia

En una aplicación de la Tienda Windows, también puedes elegir Equipo local o Equipo remoto en esta lista.En cambio, la ventaja de utilizar el emulador o simulador es que puedes colocarlo junto a Visual Studio y cambiar sin problemas entre la aplicación en ejecución y el generador de perfiles de capacidad de respuesta de la IU de HTML.Para obtener más información, consulta Ejecutar aplicaciones de la Tienda desde Visual Studio y Ejecutar aplicaciones de la Tienda Windows en un equipo remoto desde Visual Studio.
En el menú Depurar, elige Rendimiento y diagnósticos.
En Herramientas disponibles, elige Capacidad de respuesta de la IU de HTML y elige Iniciar.

En este tutorial, asociarás el generador de perfiles al proyecto de inicio. Para obtener información sobre otras opciones, como asociar el generador de perfiles a una aplicación instalada, consulta Analizar la capacidad de respuesta de la interfaz de usuario (HTML).

Al iniciar el generador de perfiles, puede aparecer un Control de cuentas de usuario que solicite tu permiso para ejecutar VsEtwCollector.exe. Elige Sí.
En la aplicación en ejecución, elige Waiting for values y espera unos 10 segundos. Comprueba que el texto y el color del botón se actualizan más o menos una vez por segundo.
Desde la aplicación en ejecución, cambia a Visual Studio (Alt+Tab).
Elige Detener colección.

El generador de perfiles muestra información en una nueva pestaña en Visual Studio. Cuando examines los datos de utilización de CPU y rendimiento visual (FPS), podrás identificar fácilmente algunas tendencias:
- La utilización de CPU aumenta de forma considerable después de unos 3 segundos (cuando presionaste el botón Waiting for values) y muestra un patrón claro de eventos (una combinación sistemática de eventos de script, aplicación de estilo y presentación) a partir de ese momento.
- El rendimiento visual no resulta afectado y el valor de FPS permanece en una velocidad de 60 (es decir, no se han eliminado fotogramas).
Veamos una sección típica del gráfico de utilización de CPU para averiguar lo que está haciendo la aplicación en este período de alta actividad.
Selecciona una sección de uno o dos segundos en el centro del gráfico de utilización de CPU (haz clic en la sección y arrástrala o usa las teclas de tabulación y de dirección). En la siguiente ilustración se muestra el gráfico de utilización de CPU después de hacer la selección. El área no compartida es la selección.
Elige Acercar.

El gráfico cambia para mostrar el período seleccionado con más detalle. En la siguiente ilustración se muestra el gráfico de utilización de CPU después de acercarlo. (Los datos concretos pueden variar, pero el patrón general será parecido).

Los detalles de escala de tiempo del panel inferior muestran un ejemplo de los detalles del período seleccionado.

Los eventos de los detalles de la escala de tiempo confirman tendencias visibles en el gráfico de utilización de CPU: hay muchos eventos que tienen lugar durante breves períodos de tiempo. En la vista de detalles de la escala de tiempo se indica que estos eventos son eventos Timer, Layout y Paint.
Utiliza el menú contextual o el botón secundario sobre uno de los eventos Timer del panel inferior y elige Filtro para evento. En la ilustración siguiente se muestra un ejemplo de detalles típico de uno de los eventos Timer de esta aplicación de prueba.

Se pueden deducir varios hechos de los datos. Por ejemplo:
- Cada evento Timer, con un código de color que lo identifica como evento de scripting, incluye una llamada a document.createElement, seguida de un cálculo de estilos y una llamada a style.backgroundColor y appendChild().
- En el breve intervalo de tiempo seleccionado (aproximadamente uno o dos segundos), se produce una gran cantidad de eventos Timer, Layout y Paint. Los eventos Timer se producen con mucha más frecuencia, incluso más de una vez por segundo, lo que resulta evidente después de ejecutar la aplicación y elegir el botón Waiting for values.
Para investigar este problema, elige el vínculo a la función anónima de uno de los eventos Timer en el panel izquierdo inferior. La siguiente función se abre en default.js:
```
function update() {

    setTimeout(function () {

        setValues();
        if (count < max) { update(); }
    });
}
```
Esta función recursiva define un bucle que llama a la función setValues(), que actualiza el botón de la interfaz de usuario. Al examinar los distintos eventos del temporizador del generador de perfiles, descubre que la mayoría o todos ellos se deben a este código, que se ejecuta con demasiada frecuencia, así que parece probable que el problema se origine ahí.

Corregir el problema de rendimiento

Reemplaza la función update() por el código siguiente:
```
function update() {

    setTimeout(function () {

        setValues();
        if (count < max) { update(); }
    }, 1000 );
}
```
Esta versión corregida del código incluye un retraso de 1.000 milisegundos, que estaba omitido en la versión anterior del código, que permite el uso de un valor predeterminado de retraso. A tenor de los datos del generador de perfiles, parece que el valor predeterminado son cero milisegundos, lo que hace que la función setValues() se ejecute con demasiada frecuencia.
Ejecuta de nuevo el generador de perfiles de capacidad de respuesta de la IU de HTML y consulta el gráfico de utilización de CPU. Verás que los eventos que se producían con demasiada frecuencia han desaparecido y que la utilización de la CPU ha disminuido a un nivel próximo al cero. ¡Arreglado!

Vea también

Conceptos

Analizar la capacidad de respuesta de la interfaz de usuario (HTML)

Compartir a través de