Wydajność ruchomego obrazu na stronie internetowej za pomocą CSS vs HTML5 Canvas

Mam obrazek i przesuwam go po mojej stronie (JavaScript) w ten sposób: 

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

Niestety, wydajność jest dość zła we wszystkich przeglądarkach z wyjątkiem Chrome. Wąskim gardłem jest szybkość renderowania. Nie mam nadziei dla IE, ale chcę przynajmniej ulepszyć Firefoksa. Czy ktoś ma doświadczenie z wydajnością HTML5 Canvas podczas przenoszenia obrazu, w porównaniu do zmiany stylu?

Author: Phrogz, 2011-01-30
Source

5 answers

Stworzyłem równoważne testy do porównania liczby klatek na obrazek za pomocą CSS z rysowaniem go na płótnie HTML. Oto testy:

A oto wyniki FPS (Zobacz URL do testu szczegóły): 

                  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

Jak widać:

  1. zawsze uzyskasz lepsze wyniki przesuwania obrazu jako elementu HTML niż przerysowywania części płótna i
  2. jesteś prawdopodobnie prawdopodobnie robi coś złego, jeśli dostajesz tylko 5fps.

Edit : Dodano testy do przenoszenia 20 małych animowanych sprite ' ów na tle. Wnioski pozostają takie same.

 53
Author: Phrogz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-01 19:40:34

Minęło już ponad 2 lata i postanowiłem przeprowadzić te testy, aby sprawdzić, czy to nadal prawda. Tak...i nie ma.

  1. Firefox Desktop i mobile uruchamiają animacje CSS znacznie szybciej niż canvas.

  2. Chrome desktop uruchamia animacje canvas i CSS o tym samym

  3. Chrome Mobile (na Nexusie 7) robi dokładnie odwrotnie: canvas działa znacznie szybciej niż CSS!

(Używanie Firefoksa Android z Nexusem 7 i przeglądarek desktopowych na Linuksie O Rozdzielczości 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
Co inni dostają? Czy ktoś może na to przetestować IE9, 10?
 8
Author: Don Rhummy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-12 22:49:02

Pomyślałem, że zaktualizuję to stare pytanie o moje ustalenia na iPadzie 3 generacji:

Canvas wygrywa 2: 1 z animacjami sprite ' ów średnio około 120 fps z czyszczeniem tła przełączanym w obie strony. CSS ledwo mógł osiągnąć 60 fps.

Jeśli chodzi o pojedynczy obraz, CSS był zdecydowanie szybszy.

 3
Author: MyNameIsKo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-28 15:39:05

Z mojego doświadczenia z Canvas powinieneś być w stanie uzyskać dobre 50 fps na Firefoksie, a nawet dobre 15 fps na iOS. IE9 będzie prawdopodobnie najszybszą przeglądarką, inne wersje tak naprawdę nie implementują Canvas.

 2
Author: Jakub Hampl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-01-30 12:37:00

[[2]] w związku z ustaleniami MyNameIsKo na temat wydajności iPada 3. Zastanawiałem się, czy ma to związek z faktem, że metoda CSS DOM musiała martwić się o rysowanie na ekranie retina iPada 3, podczas gdy płótno byłoby rysowane w niższej rozdzielczości, a następnie blt ' D na ekranie. IPad 1 jest znacznie szybszy dla aktualizacji CSS niż ipad3!

Wprowadziłem również pewne zmiany w JavaScript canvas, aby móc rysować na płótnie rozdzielczości siatkówki. Dodałem następujący kod po canv.wysokość = h; W bg.funkcja 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);
}
Co znacznie zmniejszyło wydajność...

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
 0
Author: Nick H247,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-02 08:26:34