Rendimiento de imagen en movimiento en la página web a través de CSS vs HTML5 Canvas

Question

tengo una imagen y se mueven alrededor de mi página Web (JavaScript) así:

satelliteImage.style.top = coordinates.top + "px"; 
satelliteImage.style.left = coordinates.left + "px"; 

Por desgracia, el rendimiento es bastante mala en todos los navegadores excepto Cromo. El cuello de botella es la velocidad de renderizado. No tengo esperanzas para IE, pero quiero mejorar Firefox al menos. ¿Alguien tiene experiencia con el rendimiento de HTML5 Canvas mientras mueve una imagen, en comparación con el cambio de estilo?

Answer 1

He creado pruebas equivalentes para comparar las tasas de fotogramas para mover una imagen mediante CSS en lugar de dibujarla en un lienzo HTML. Aquí están las pruebas:

• Moving an Image via Canvas
• Moving an Image via CSS
• Moving 20 Sprites via Canvas sobre un fondo 1024x768
• Moving 20 Sprites via CSS sobre un fondo 1024x768

Y aquí están the FPS results (ver URL para obtener detalles de la prueba):

 
        Image Image Sprite Sprite 
     Browser Canvas CSS Canvas  CSS 
---------------------------------------------- 
    Safari v5.0.3  59  95  59  89 
Firefox v3.6.13  59  95  60  90 
Firefox v4.0b8  75  89  78  82 
    Chrome v8.0  108 230  120  204 
    iPad, Horiz  17  44  2  14 
    iPad, Vert  4  75  2  15 

Como se puede ver:

1. Uno siempre va a obtener mejores resultados en movimiento una imagen como un elemento HTML que volver a dibujar una porción de la tela, y
2. Eres probable posiblemente haciendo algo mal si solo obtiene 5 fps.

Editar: Se agregaron pruebas para mover 20 pequeños sprites animados sobre un fondo. Las conclusiones son las mismas

Answer 2

En mi experiencia con Canvas deberías poder obtener buenos 50 fps en Firefox e incluso unos buenos 15 fps en iOS. IE9 probablemente sea el navegador más rápido, otras versiones realmente no implementan Canvas.

Answer 3

Han pasado más de 2 años y decidí realizar estas pruebas para ver si esto sigue siendo cierto. Lo hace ... y no es así.

1. Firefox de escritorio y móviles ambas animaciones CSS plazo significativamente más rápido que el lienzo.

2. Chrome escritorio se ejecuta lona y CSS animaciones sobre el mismo

3. Chrome para dispositivos móviles (en Nexus 7) hace exactamente lo contrario: Lona corre mucho más rápido que el CSS!

(El uso de Firefox para Android con Nexus 7 y de escritorio navegadores en Linux con una resolución de 1920x1080)

 

Browser/OS   Canvas Image CSS IMage Canvas Sprites CSS Sprites  
-----------   ------------ ---------- -------------- ----------- 
Firefox 16   56.7fps  215.6 fps 59.2fps   203.6fps 
Firefox 16 Android 17.1 fps  179.6fps 11.5fps   35.7 
Chrome 22   192.3fps  223.5fps 170.1fps   164.3fps 
Chrome Android  48.3fps  39.9fps  92.8fps   13.1fps 

¿Qué todo el mundo obtiene? ¿Alguien puede probar IE9, 10 para esto?

Answer 4

pensé que podría actualizar esta vieja cuestión con mis resultados en una tercera generación de iPad: gana

lienzo 2: 1 con el sprite animaciones un promedio de alrededor de 120 cuadros por segundo con un fondo más claro activarse en ambos sentidos. CSS apenas podía cumplir 60 fps.

En cuanto a la imagen individual, CSS fue definitivamente más rápido.

Answer 5

Además de los hallazgos de MyNameIsKo sobre el rendimiento del iPad 3. Me preguntaba si tenía que ver con el hecho de que el método CSS DOM tenía que preocuparse por dibujar en la pantalla Retina del iPad 3, mientras que el lienzo se dibujaría a una resolución más baja y luego pasaría a la pantalla. ¡Un iPad 1 es significativamente más rápido para las actualizaciones de CSS que el iPad3!

También realicé algunos cambios en el canvas javascript para poder dibujar en un lienzo de resolución de retina. Agregué el siguiente código después de canv.height = h; en la función bg.onload:

if (window.devicePixelRatio) { 
    ctx.canvas.style.width = w + "px"; 
    ctx.canvas.style.height = h + "px"; 
    ctx.canvas.height = h * window.devicePixelRatio; 
    ctx.canvas.width = w * window.devicePixelRatio; 
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio); 
} 

que hizo una enorme reducción en el rendimiento ...

iPad 1 (iOS 5.5.1)

iPad 3 (iOS 6.1.3)

     CSS Sprite  Canvas Sprites 
----------------------------------------------------- 
iPad 1     90     100 
iPad 3     55     120 
iPad 1(canvas changes) n/a     100 
iPad 3(canvas changes) n/a     35