HTML Canvas vs. Flash. Czyżby kolejny mit o wyższości nad Flashem ?

Tyle się mówi o HTML’owym CANVAS’ie jaki to jest oh, ah i eh, że nie trzeba Flasha do grafiki, animacji, można nawet tworzyć gry także 3D. A ja jednak będąc niedowiarkiem postanowiłem sprawdzić jak to jest z rzeczywistą wydajnością i możliwością zastąpienia Flash’a.Wziąłem więc JScript’owy framework do grafiki i animacji na canvas’ie (KineticJS ver 4.3) i w nim odpaliłem 2 stress-testy

  1. test rysowania dużej ilości statycznych obiektów graficznych (10 tys kółek)
  2. test animacji 300 prostokątów

Oto odpowiadające im wyniki dla CANVAS (HTML5):

  1. przyrost zużycia pamięci RAM ponad 70 MB
  2. przyrost zużycia pamięci RAM ponad 40 MB, proces Firefox’a zajął 50% procesora (na maszynie 2-procesorowej)

Wziąłem więc kod JScript’owych testów i przepisałem na AS3 i skompilowałem projekt w Adobe Flash CS3 (czyli jak widać stary trup, bez najnowszych poprawek i optymalizacji)

W tej wersji jest o tyle inna sytuacja, że FF odpala plugin-container w którym uruchamiany jest plugin Adobe Flash Player’a co dodatkowo zużywa pamięć (ok 10 MB).

Zatem sumaryczny wynik dla obu procesów (FF + plugin-container) jest następujący (FLASH).

  1. przyrost zużycia pamięci RAM trochę ponad 50 MB
  2. przyrost zużycia pamięci RAM trochę ponad 50 MB + 7% zużycia procesora

Podsumowując:

We flashu zużyliśmy mniej pamięci i mniej obciążyliśmy procesor.

Z ciekawości zrobiłem test animacji dla 3 tyś i 10 tyś, przy których obciążenie procka wyszło odpowiednio około 42% i 58%, a przyrost zużycia pamięci odpowiednio +60 MB, +80 MB

 

Zatem IMHO wyższość i lepszość HTML’a nad Flashem w tym wymiarze to mit, a może najzwyklejsza propaganda anty flash’owa, którą ostatnimi laty bardzo mocno słychać.

Osobiście też twierdzę, że na chwilę obecną Flash’a nie da się całkowicie zastąpić w sposób przyzwoity, czyli taki, aby zachować przynajmniej porównywalną jakość i komfort użytkowy.

Ja i tak w teście porównałem CANVAS’a, a nie SVG, który jest jeszcze wolniejszy – to właśnie dlatego nie skorzystałem z biblioteki Raphael.

W przeszłości wdrożyłem super wypasione wykresy zrobione w HTML’u i efekt końcowy był żenujący, bo kiedy danych w systemie przybywało i trzeba było naprawdę sporo więcej renderować (dodatkowo kilka serii danych jednocześnie) to przeglądarki umierały i dziś jest identycznie mimo postępu w obsłudze standardu HTML5 i wielu ulepszeń przeglądarki. W planach jest już nowy projekt wykresów we Flashu.

Na dzień dzisiejszy nie polecam HTML’owego rendering’u do profesjonalnych zastosowań o dużej ilości obiektów graficznych czy też tam gdzie trzeba przetwarzać większe ilości danych. Być może WebGL zmieni coś – ale to dopiero pokaże czas.

 

4 Responses to HTML Canvas vs. Flash. Czyżby kolejny mit o wyższości nad Flashem ?

  1. pamiętam jak to miało być coś niesamowitego, a tymczasem padaka..

  2. 1) proszę potestować np na kliencie linuksowym flasha
    2) są systemy bez wtyczek flasha, więc przyrostu prędkości nie będzie.

    OT ( do wykasowania, jak Pan to przeczyta i poprawi):
    nie HTML’u, a HTML-u; nie CANVAS’ie, a Canvasie; nie JScript’owy, a JScriptowy;nie tyś a tys.)

  3. No dobra, tylko korzystałeś z jednego, konkretnego frameworka – więc testy są niewymierne, ponieważ narzut frameworka (i to tego, konkretnego właśnie – KineticJS) mógł zaważyć na wynikach.

    BTW. wchodzę tu z Google właśnie szukając czegoś na temat KineticJS, bo wydaje mi się on ciekawą biblioteką. Jakbyś robił następne teksty to lepiej byłoby coś a la KineticJS vs. Raphael vs. ProcessingJS etc.

  4. Programista ABAP

    Moje doświadczenia jeśli chodzi o CANVAS są takie, że przeglądarki nie są zbyt skore, żeby w pełni to obsługiwać.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *