Article name: Improving HTML5 Canvas Performance By: Boris Smus Published: Aug.

16, 2011 _______________________________________________________

Este artculo habla acerca de varias formas de como optimizar el rendimiento de Canvas en HTML5, enfocado al estudio de los desarrolladores para poder optimizar sus aplicaciones ya sean web, mviles u otras. Canvas tiene un desarrollo muy rpido de sus caractersticas, y para que cada propuesta de optimizacin siga funcionando existe una aplicacin web que permite que los desarrolladores escribir pruebas de rendimiento de JavaScript. Cada una de estas propuestas es sometida a diferentes pruebas que consisten en ejecutar cada mtodo mltiples veces en un tiempo corto y estas pruebas arrojan un resultado, en base a este resultado se eligen las propuestas, la que tenga la puntuacin ms alta es siempre la mejor. Se realiza una comparacin grfica de estas pruebas mostrando el cdigo fuente real de cada una. A diferencia de un objeto pre-renderizado en el no pre-renderizado se debe de definir el contexto, se muestra un ejemplo de como a nivel de cdigo el uso del pre-renderizado implica una mayor generacin de cdigo. Una vez que se esta trabajando con pre-renderizado, para obtener el resultado esperado es de suma importancia tomar en cuenta y asegurarse de que el Canvas temporal se adapta perfectamente a la imagen que se est dibujando, ya que de lo contrario se tendra una prdida de rendimiento. Realizar una llamada a la mquina para pedir un dibujo es ms eficiente que teclear una larga serie de comandos para poder obtener el mismo resultado. Por ejemplo para el trazo de un camino basta con poner todos los puntos del camino en lugar de definir cada segmento del camino por separado, esta operacin sera muy costosa, llevndonos a perder tiempo y generar cdigo que no necesitamos, reduciendo de manera drstica la optimizacin. La utilizacin de Canvas implica de igual manera un consumo de recursos por parte de la mquina .

Armando Avila Gonzlez

Este artculo muestra las estadsticas de desempeo de las diferentes tcnicas en varios navegadores tales como: Firefox, Safari, Opera, Internet Explorer, Chroome, entre otros. As como se menciona las diferentes tcnicas de aplicacin en desarrollo web, tambin se muestra la realidad del Canvas en dispositivos mviles. Para que un navegador mvil tenga un buen desempeo y rendimiento forzosamente tiene que tener la aceleracin GPU. De lo contrario se comportar lento. Ya que el uso de Canvas en dispositivos mviles requiere que el CPU del dispositivo sea potente como para las aplicaciones modernas basadas en canvas. El uso de Canvas en mviles con el paso del tiempo tendr una mayor capacidad y se ir adaptando a los Sistemas Operativos cotidianos que no son de alto rendimiento. De esta forma un mayor nmero de desarrolladores web o de aplicaciones mviles se interesarn en las tcnicas de rendimiento y la utlizacion del Canvas en juegos o aplicaciones mviles aumentar. Esto debido a que actualmente solo en iOS 5.0 beta corriendo en Safari 5.1 tiene una acelerada implementacin del Canvas. Antes de optimizar una aplicacin o un juego con Canvas es recomendable para los desarrolladores realizar diferentes pruebas con las tcnicas que se han descrito, esto implica un proceso de pruebas a las que tiene que ser sometida la aplicacin. Este artculo mostr la importancia y el uso de las tcnicas de optimizacin del uso de Canvas, las estadsticas del comportamiento de esta frente a diferentes sistemas operativos, as como una comparacin de estos.

Armando Avila Gonzlez