JavaScript: mejore los resultados del análisis de rendimiento con marcas de usuario

Cuando trabaje en código JavaScript avanzado, como un motor 3D, puede preguntarse qué puede hacer para optimizar y cuánto tiempo debe dedicar a algunas partes específicas del código. En este tutorial, compartiré varias herramientas que brindan información sobre el rendimiento de su código y le mostrarán cómo aprovechar al máximo las marcas de usuario en el gráfico de memoria para analizar su rendimiento.

¿No puedes esperar a ver de qué trata este artículo? Mira este video.

Siéntete libre de hacerme ping en Twitter (@deltakosh) si desea discutir sobre este artículo!

¿Necesitas un perfilador?

Uno que me viene a la mente es el generador de perfiles integrado que puede encontrar usando el nuevo actualizaciones de Internet Explorer F12 Dev Tools — mejoras que también estarán disponibles para Borde de Microsoft. Por supuesto, también puede usar cualquier herramienta similar que prefiera en su caja de desarrollo.

Si desea probar esto en Android, iOS o Mac OS, también puede usar remoto.ES para obtener una instancia de Vista previa técnica de Windows 10 funcionando en minutos. Luego abra Internet Explorer «e» que ha estado evitando (es un shell de cliente temporal que tiene configurado el nuevo motor de renderizado de Microsoft Edge), presione «F12» y ahora puede ver lo que le mostraré:

Tenga en cuenta que con las nuevas herramientas F12 que enviamos con Vista previa técnica de Windows 10el generador de perfiles ahora forma parte de la ventana de capacidad de respuesta de la interfaz de usuario:

Veamos otras opciones que pueden brindarle más información sobre el rendimiento de su código.

consola.tiempo

solo tienes que llamar consola.tiempo() y consola.timeEnd() alrededor de la pieza de código que desea evaluar. El resultado es una cadena en su consola que muestra el tiempo transcurrido entre tiempo y tiempoTerminar.

Esto es bastante básico y se puede emular fácilmente, pero esta función me pareció muy fácil de usar.

Aún más interesante, puede especificar una cadena para obtener una etiqueta para su medida.

Esto es, por ejemplo, lo que hice para Babilonia.js:

console.time("Active meshes evaluation");
this._evaluateActiveMeshes();
console.timeEnd("Active meshes evaluation");

Este tipo de código se puede encontrar en todas las funciones principales y luego, cuando el registro de rendimiento está habilitado, puede obtener información realmente excelente:

Debe tener en cuenta que la representación de texto en la consola puede consumir energía de la CPU

Incluso si esta función no es en sí misma una función estándar, la compatibilidad del navegador es bastante buena. Chrome, Firefox, IE, Opera y Safari lo admiten.

Objeto de rendimiento

Si desea algo más visual, también puede usar el objeto de rendimiento. Entre otras características interesantes para ayudarlo a medir el rendimiento de una página web, puede encontrar una función llamada Marcos que puede emitir una marca de usuario.

Una marca de usuario es la asociación de un nombre con un valor de tiempo. Puede medir porciones de código con esta API para obtener valores precisos. Puede encontrar un excelente artículo sobre esta API de Aurelio de Rosa en SitePoint también.

La idea de hoy es utilizar esta API para visualizar marcas de usuario específicas en la pantalla de capacidad de respuesta de la interfaz de usuario:

Esta herramienta le permite capturar una sesión y analizar cómo se usa la CPU:

Luego podemos hacer zoom en un marco específico seleccionando una entrada llamada «Devolución de llamada de cuadro de animación” y haciendo clic derecho sobre él para seleccionar “filtrar por evento”.

El marco seleccionado será filtrado entonces:

Gracias a la nueva herramienta F12, puede cambiar a las pilas de llamadas de JavaScript para obtener más detalles sobre lo que sucedió durante este evento:

El principal problema aquí es que no es fácil saber cómo se envía el código durante el evento.

Y aquí es donde las marcas de usuario entran en el juego.. Podemos agregar el nuestro marcadores y luego ser capaz de descomponer un marco y ver qué característica es la más costosa y así sucesivamente.

performance.mark("Begin of something…just now!");

Además, cuando crea su propio marco, es muy útil poder instrumentar su código con mediciones:

performance.mark("Active meshes evaluation-Begin");
this._evaluateActiveMeshes();
performance.mark("Active meshes evaluation-End");
performance.measure("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");

Veamos qué puedes conseguir con babylon.js por ejemplo con el “V8” escena:

Puedes pedir babylon.js para emitir marcas de usuario y medidas para usted mediante el uso de la capa de depuración:

Luego, usando el analizador de capacidad de respuesta de la interfaz de usuario, puede obtener esta pantalla:

Puede ver que las marcas de usuario se muestran encima del evento en sí (los triángulos naranjas), así como segmentos para cada medida:

Entonces es muy fácil determinar que, por ejemplo, [Render targets] y [Main render] Las fases son las más caras.

El código completo utilizado por babylon.js para permitir a los usuarios medir el rendimiento de varias funciones es la siguiente:

  Tools._StartUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-Begin");
};

Tools._EndUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-End");
    Tools._performance.measure(counterName, counterName + "-Begin", counterName + "-End");
};

Tools._StartPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._StartUserMark(counterName, condition);

    if (console.time) {
        console.time(counterName);
    }
};

Tools._EndPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._EndUserMark(counterName, condition);

    if (console.time) {
        console.timeEnd(counterName);
    }
};

Gracias a las herramientas F12 y las marcas de usuario, ahora puede obtener un excelente panel sobre cómo funcionan juntas las diferentes partes de su código.

Más prácticas con JavaScript

Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript y tenemos la misión de crear mucho más con Viene Microsoft Edge. Echa un vistazo a la mía:

• Introducción a WebGL 3D y HTML5 y Babylon.JS
• Creación de una aplicación de una sola página con ASP.NET y AngularJS
• Gráficos de vanguardia en HTML

O la serie de aprendizaje de nuestro equipo:

• Consejos prácticos de rendimiento para hacer que su HTML/JavaScript sea más rápido (una serie de 7 partes desde el diseño receptivo hasta los juegos casuales y la optimización del rendimiento)
• La plataforma web moderna JumpStart (los fundamentos de HTML, CSS y JS)
• Desarrollo de aplicaciones universales de Windows con HTML y JavaScript JumpStart (use el JS que ya ha creado para crear una aplicación)

Y algunas herramientas gratuitas: Comunidad de Visual Studio, Prueba de Azurey herramientas de prueba de navegador cruzado para Mac, Linux o Windows.

Este artículo es parte de la serie de tecnología de desarrollo web de Microsoft. Estamos emocionados de compartir Borde de Microsoft y es nuevo motor de renderizado contigo. Obtenga máquinas virtuales gratuitas o realice pruebas de forma remota en su dispositivo Mac, iOS, Android o Windows @ moderno.ES.

(dpe)