Cómo maximizar el rendimiento de HTML5
HTML5 se está volviendo cada vez más popular como campo emergente. Sin embargo, en el contexto de que el rendimiento del hardware de los dispositivos móviles es más débil que el de las PC, la demanda de rendimiento se vuelve más importante. Hay una gran diferencia en el rendimiento de HTML5 antes y después de la optimización. rendimiento Y poco. Este artículo utiliza el motor LayaAir como ejemplo para ilustrar cómo utilizar este motor para optimizar el rendimiento de HTML5 a través de ejemplos de código.
Los temas incluyen: ??
¿Conceptos básicos de ejecución de código?
¿Prueba de referencia?
¿Optimización de la memoria?
¿Rendimiento de renderizado de gráficos?
¿Reducir el uso de CPU?
Otras estrategias de optimización
Parte 1: Conceptos básicos de ejecución de código
El motor LayaAir admite el desarrollo de AS3, TypeScript y JavaScript, pero no importa qué lenguaje de desarrollo se utilice, en al final Todo lo que se ejecuta es código JavaScript. Todas las imágenes que ve son dibujadas por el motor y la frecuencia de las actualizaciones depende del FPS especificado por el desarrollador. Por ejemplo, si especifica una velocidad de fotogramas de 60 FPS, cada fotograma tardará una sexagésima parte de segundos en ejecutarse. Cuanto mayor sea la velocidad de fotogramas, más suave se sentirá visualmente, y 60 fps es un fotograma completo.
Dado que el entorno de ejecución real es el navegador, el rendimiento también depende de la eficiencia del intérprete de JavaScript. Es posible que la velocidad de fotogramas FPS especificada no se logre en un intérprete de bajo rendimiento. No. Lo que los desarrolladores pueden decidir, lo que pueden hacer, es mejorar el rendimiento del navegador optimizando los dispositivos de gama baja o los navegadores de bajo rendimiento tanto como sea posible para aumentar la velocidad de fotogramas de FPS. Entonces esta parte no la deciden los desarrolladores.
El motor LayaAir volverá a dibujar cada cuadro, agregue un grupo. Al optimizar el rendimiento, además de prestar atención al consumo de CPU al ejecutar el código lógico de cada cuadro, también debe prestar atención a la cantidad de. Las instrucciones de dibujo se llaman y envían a la GPU cada cuadro.
Parte 2: Evaluación comparativa
La herramienta de estadísticas de rendimiento incorporada del motor LayaAir se puede utilizar para realizar evaluaciones comparativas en tiempo real del rendimiento actual del 97345400. Los desarrolladores pueden usar la clase laya.utils.Stat para mostrar el panel de estadísticas a través de Stat.show(). Nota 10 El código de escritura específico se muestra en el siguiente ejemplo: Stat.show(0,0);?//El panel AS3 llama al método de escritura
Laya.Stat.show(0,0); ?// Método de escritura de llamadas del panel TS y JS
El significado del parámetro stat:?
FPS:?
El número de fotogramas renderizados por segundo ( cuanto mayor sea el número, mejor).
Cuando se utiliza la representación del lienzo, el campo de descripción aparece como FPS(Canvas); cuando se utiliza la representación WebGL, el campo de descripción aparece como FPS(WebGL).
Sprite:?
El número de nodos renderizados (cuanto más bajos, mejor).
Sprite cuenta todos los nodos de renderizado (incluidos los contenedores), y el tamaño de este número afecta el número de recorridos de los nodos del motor, la organización y presentación de los datos.
DrawCall: ?
DrawCall tiene diferentes significados en representaciones de lienzo y WebGL (menos es mejor).
Canvas representa el número de dibujos por cuadro, incluyendo imágenes, texto y vectores. Intenta limitarlo a 100 veces.
WebGL significa envío por lotes de renderizado. Cada proceso de dibujo que prepara datos y notifica a la GPU para el renderizado se denomina DrawCall. En cada DrawCall, además de notificar a la GPU el tiempo que lleva renderizar, los materiales. y el sombreado se cambian. También es una operación que requiere mucho tiempo. La cantidad de DrawCalls es una métrica de rendimiento importante, así que trate de limitarla a no más de 100.
Lienzo:?
Tres valores: el número de lienzos redibujados por cuadro/el número de lienzos usando el tipo de caché "normal"/usando "mapa de bits" "El número de lienzos de tipo caché.
CurMem: solo para renderizado WebGL, indica el uso de memoria y gráficos (cuanto más bajo, mejor).
Sombreadores: solo para renderizado WebGL, representa el número de sombreadores enviados por cuadro.
Ya sea en modo lienzo o en modo WebGL, debemos prestar atención a los parámetros DrawCall, Sprite y Canvas y optimizarlos. (Consulte "Rendimiento de representación de gráficos")
Parte 3: Optimización de la memoria
¿Agrupación de objetos?
La agrupación de objetos implica la reutilización constante de objetos. Una cierta cantidad de objetos se crea y almacena en el grupo durante la inicialización de la aplicación. Después de completar las operaciones en un objeto, el objeto se vuelve a colocar en el grupo, donde se puede recuperar cuando se necesita un nuevo objeto.
El uso de un grupo de objetos para reutilizar objetos reduce la necesidad de crear instancias de objetos, cuya creación es costosa. También reduce las posibilidades de que se ejecute el recolector de basura, aumentando así la velocidad del programa.
El siguiente código demuestra cómo utilizar ?
Laya.utils.Pool: ar?SPRITE_SIGN?=?SPRITESIGN';
var?sprites?=? [];
función?initialize()
{
para?(var?i?=?0;?i?
{
var?sp?=?Pool.getItemByClass(SPRITE_ SIGN,?Sprite)
sprites.push(sp);
Laya.stage.addChild(sp);
}
}
initialize();
Al inicializar el objeto pool Crea un objeto de tamaño 1000 en .
El siguiente código eliminará todos los objetos de visualización de la lista de visualización al hacer clic con el mouse y los reutilizará en otras tareas más adelante: Laya.stage.on("click",?this,?function ()
{
var?sp;
for( var?i?=?0,?len?=?sprites.length;?i?
{
sp?=?sprites.pop();
Pool.recover(SPRITE_SIGN,?sp);
Laya.stage.removeChild(sp);
}
});
Después de llamar a Pool.recover, el objeto especificado se reciclará en el grupo.