Share
Cuando trabaje con un código JavaScript avanzado, como un motor 3D, puede preguntarse qué puede hacer para optimizar y cuánto tiempo debe dedicar a ciertas piezas de código específicas. En este tutorial, compartiré varias herramientas que brindan información sobre el rendimiento de su código y le mostraré cómo aprovechar al máximo las marcas de usuario en el gráfico de memoria para analizar su rendimiento..
¿No puedo esperar para ver de qué se trata este tutorial? Mira este video:
Siéntete libre de hacerme ping en Twitter (@deltakosh) si quieres discutir este articulo!
Un generador de perfiles que viene a la mente es el generador de perfiles integrado que puede encontrar al utilizar nuevas actualizaciones de las herramientas de desarrollo de Internet Explorer F12, que también estarán disponibles para Microsoft Edge. Por supuesto, puedes usar cualquier herramienta similar que prefieras también en tu caja de desarrollo..
Si desea probar esto en Android, iOS o Mac OS, también puede usar remote.IE para obtener una instancia de Windows 10 Technical Preview en minutos. Luego, abra la “e” de Internet Explorer que ha estado evitando (es un shell de cliente temporal que tiene configurado el nuevo motor de renderizado de Project Spartan), presione F12 Y ahora puedes ver lo que te mostraré:
Tenga en cuenta que con las nuevas herramientas F12 que incluimos con la vista previa técnica de Windows 10, el generador de perfiles ahora forma parte de la ventana de respuesta de la interfaz de usuario:
Veamos otras opciones que pueden brindarle más información sobre el rendimiento de su código..
Solo tienes que llamar console.time () y console.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 hora y tiempo.
Esto es bastante básico y puede ser fácilmente emulado, pero encontré esta función realmente fácil de usar.
Aún más interesante, puede especificar una cadena para obtener una etiqueta para su medición.
Esto es, por ejemplo, lo que hice para Babylon.js:
Accentsconagua
console.time ("Evaluación de mallas activas"); this._evaluateActiveMeshes (); console.timeEnd ("Evaluación de mallas activas");Este tipo de código se puede encontrar en todas las funciones principales y luego, cuando se habilita el registro de rendimiento, puede obtener información realmente importante:
Tenga 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 per se una función estándar, la compatibilidad del navegador es bastante grande. Chrome, Firefox, IE, Opera y Safari lo soportan.
Si desea algo más visual, también puede utilizar 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 marca 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. También puede encontrar un gran artículo sobre esta API de Aurelio de Rosa en SitePoint.
La idea hoy es usar esta API para visualizar marcas de usuarios específicos en la pantalla de respuesta de la interfaz de usuario:
Esta herramienta le permite capturar una sesión y analizar cómo se utiliza la CPU:
Luego podemos ampliar un marco específico seleccionando una entrada llamada Retroceso de marco de animación y haciendo clic derecho sobre él para seleccionar filtrar al evento.
El cuadro seleccionado se filtrará entonces:
Gracias a la nueva herramienta F12, puedes 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 distribuye el código durante el evento.
Y aquí es donde las marcas de usuario entran al juego.. Podemos añadir nuestro propio marcadores y luego ser capaz de descomponer un marco y ver qué característica es la más cara y así sucesivamente.
performance.mark ("¡Comienza con algo ... ahora mismo!");Además, cuando creas tu propio marco, es muy útil poder instrumentar tu código con mediciones:
performance.mark ("Active mallas evaluación-Comenzar"); this._evaluateActiveMeshes (); performance.mark ("Evaluación de mallas activas-Fin"); performance.measure ("Evaluación de mallas activas", "Evaluación de mallas activas-Comenzar", "Evaluación de mallas activas-Fin");Veamos qué se puede obtener con Babylon.js, por ejemplo, con el "V8" escena:
Puedes pedir a Babylon.js que emita marcas y medidas de usuario por ti usando Capa de depuración:
Luego, utilizando el analizador de respuesta de la interfaz de usuario, puede obtener esta pantalla:
Puede ver que las marcas de usuario se muestran en la parte superior del evento en sí (los triángulos naranjas), así como los segmentos para cada medida:
Entonces es muy fácil determinar que, por ejemplo, las fases [Objetivos de representación] y [Representación principal] son las más caras.
El código completo utilizado por Babylon.jsPara permitir a los usuarios medir el rendimiento de varias características es lo 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 gran panel de control sobre cómo trabajan juntas diferentes partes de su código.
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 estamos en la misión de crear mucho más con la llegada de Microsoft Edge. Echa un vistazo a mi propia:
O la serie de aprendizaje de nuestro equipo:
Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba en varios navegadores para Mac, Linux o Windows.
Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
