Производительность: Flash vs JavaScript

Здравствуйте, я разработчик игр на Flash. Последнее время все больше стало появляться постов про флешокапец, и MustHave JavaScript (дальше JS). Вроде как за JS будущие, и за открытым вебом.
Я долго не рассматривал JS всерьез как платформу для разработки игр. Ведь это интерпретированный язык, и скорость JS оставляет желать лучшего. Но совсем недавно был портирован на JS мой любимый фреймворк для анимации TweenLite. Вместе с этим автор создал тестовый пример показывающий производительность актуальных JS фреймворков: здесь.

Мне стало очень интересно, так как TweenLite JS выдавал неплохие FPS. И тут я решил написать такой же пример для сравнения Flash и JS фреймворков.
Дальше мне стало интересно сравнить FPS этих примеров в разных браузерах, и на разных ОС.
Сам тест — это анимация передвижения, и изменения размеров картинок, при чем можно изменять их количество. Тестовый пример для Flash лежит здесь, исходники примера здесь.

Тестирование проводилось на моем старом ноутбуке HP Compaq 625:
Железо:
AMD Turion II Dual-Core P520 (2.3 ГГц), RAM 2 ГБ, ATI Radeon HD 4200.

Операционные системы:
Windows 7 x32, Linux Mint 13 x32

Браузеры и Flash Player:
Google Chrome 21.0.1180 (Flash Player 11.3.31), FireFox 15.0.1 (Flash Player 11.4.402 for Windows, FP 11.2.202 for Linux), Interrnet Explorer 9.0.8112 (Flash Player 11.4.402)

Хочу сказать что Flash Player на Firefox-е был установлен разных версий под разные ОС, потому как официальная поддержка от Adobe на Linux уже закончилась, будут доступны только обновления безопасности для ветки 11.2. В отличии от Firefox, в Google Chrome Flash Player работает через новый межплатформенный API для плагинов Pepper API, и поэтому он обновляется до последней версии.

Итак, посмотрим, что получилось:

Тест №1:
Frames Per Second (Chrome 21.0.1180, Flash Player 11.3.31, Windows 7 x32)
Frameworks\Tests TweenLite (AS) tweener (AS) GTween (AS) jQuery (JS) TweenLite (JS) YUI3 (JS) MooTools (JS) Dojo (JS) TweenJS (JS) Zepto (JS)
500 60 60 60 16 60 6 12 22 17 47
1000 60 41 60 1 51 1 5 5 2 28
3000 21 6 19 1 16 1 1 1 1 5




Здесь проводилось три теста, для 500, 1000 и 3000 тысяч картинок. Как видим большой отрыв Flash фреймворков и TweenLite JS, при 3000 картинок он обогнал даже флешовский tweener. Хорошо показал себя zepto, а вот всеми любимый jQuery для анимации подходит весьма плохо. Можно сделать вывод, что если такими темпами и дальше пойдет развитие то в JS есть все шансы стать достойной заменой Flash.

Дальше, мне стало интересно как колеблется производительность на разных браузерах и на разных операционных системах. Ведь flash player разрабатывается одной канторой, и сильных отклонений в производительности быть не должно. А движок JS пишется под каждый отдельный браузер, совершенно разными людьми (велоэффект). Поэтому давайте посмотрим на результат.



Как видим хотя flash player один и тот же, но ведет себя в разных браузерах по разному, это скорее из за того что использует разные API при взаимодействии с браузерами. Самым неудачным плагин FP получился для Internet Explorer.

Теперь рассмотрим тест на производительность браузерных движков JavaScript. Здесь тест проводился на 500 картинок, потому как при 3000-и многие фреймворки просто зависают.



Самым быстрым оказался Google Chrome, что не удивительно, смотря на то сколько денег инвестирует в него Google. Дальше Firefox возможно ситуация изменится при внедрении нового инкрементного сборщика мусора.И в конце Internet Explorer. Разрыв между первым и последним просто колоссальный. Представляете вы написали игру на JS, и она у вас хорошо работает в Chrome, Firefox, но тут кто то зашел из IE, можно представить что будет дальше, IE зависнет и скорее всего впадет а вместе с ним очень много открытых вкладок. Как результат юзер добавит ваш сайт в черный список. Была бы игра на flash такого бы не случилось.

Раз такой достаточно большой разброс производительности Flash Player на разных браузерах, давайте теперь посмотрим как она будет изменяться на разных ОС в одном и том же браузере:



Печальная картина, но видать в виду малого распространения Linux, Adobe халатно относятся к оптимизации их плеера на этой ОС. Результаты Firefox выкладывать не буду, потому как считаю нечестным сравнивать flash player 11.4 и 11.2, а на самом деле разница чутли не в два раза.

Идем дальше, как ведет себя JS движок на разных ОС?





Как видим Chrome идет практически одинаково что не может не радовать, а вот у Firefox, Linux версия заметно отстает.


Заключение:

Как видим производительность JavaScript растет, это радует. Но остается немало проблем:
  • Нужно тестить как будет вести себя игра во всех браузерах, и надеяться что при выходе нового IE дай Бог ничего не отвалилось.
  • Разница у производительности браузеров, будет давать неприятный эффект, на одних игра летает на других тормозит.
  • Исходный код скрыть не удастся разве что сильно обфусцировать.


Какие еще проблемы ждут при разработке клиентской части игры на JavaScript и как их можно решить?
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 39

    0
    Познавательно, но есть небольшие сомнения — тест от greensock полноэкранный, ваш — в окошке 1024×768.
    Кроме того, у меня jQuery (и не только он), например, на 1000 точках уже выдает очень странную картинку с концентрическими кругами. Косвенно это указывает на какие-то еще проблемы.
      0
      Прошу прощения, это старые исходники теста, в оригинале тест на флеше тоже разворачивается на весь экран. Просто я тест писал на работе, а тестил дома, в результате выложил старую версию. Приду домой обновлю тест по ссылке.
      +1
      Не знаю, почему у вас IE получается такое медленный. Я, например, уже довольно давно работаю с JS фреймворком KineticJS, где IE9 как раз наоборот, показывает лучший FPS (особенно при работе с картинками), даже в сравнении с Chrome, а FF стоит на последнем месте. Это я к тому, что проблема не всегда бывает в браузерах, но иногда и в кривизне особенностях движка. И, кстати, драйвера видеокарты тоже могут сильно влиять (видимо из-за особенностей реализации рендеринга в браузерах).
        +2
        В IE есть хардварное ускорение рендера, но самый слабый движок. Если нагрузка на перерисовку сложных объектов — то он делает всех, если все упирает в рассчеты (как в этом тесте) — то проигрывает всем.
          0
          Разве в Chrome нет аппаратного ускорения отрисовки? Что говорит chrome://gpu-internals/?
            +1
            «аппаратное ускорение» — это ведь не бинарный флаг, его использовать по-разному можно, с разной степенью эффективности. К примеру, на Win8 + IE10 используется аппаратная акселерация через DirectX11, а Chrome до сих пор построен на Directx9. А между ними разница колоссальная.
          +1
          Имеет смысл сравнивать отдельно IE8 и IE9
          +3
          Заметил интересный эффект:
          1) Откройте флеш-тест;
          2) Запустите его на 3000 точек;
          3) Смотрите в центр, откуда вылетают точки;
          4) Не отрывая взгляда от центра, начните вращать курсор на определенном расстоянии от вокруг этой точки;

          5) Курсор исчез! oO
          • НЛО прилетело и опубликовало эту надпись здесь
              +1
              ванатуре не видно. я в шоке.
                0
                Ваши поздравления излишни. Слепое пятно — часть сетчатки, нечувствительная к световым раздражителям, и точно локализовано. В приведенном вами примере если курсор мышки расположить на левом крестике, то он действительно пропадет, но справа от крестика в окружности такого эффекта не удастся добиться. Кроме того, не забывайте, что в примере из топика вам ненужно закрывать один глаз, т.е. слепое пятно одного глаза, не является таковым для другого.

                Скорее это некая разновидность динамической оптической иллюзии, вызванная не строением глаза, особенностью обработки графической информации мозгом.
                • НЛО прилетело и опубликовало эту надпись здесь
                +3
                На каком расстоянии? Я вижу курсор на любом.
                0
                А почему нет флешовых тестов с аппаратным ускорением (Stage3D)?
                Для теста можно использовать, например, Starling.
                  +1
                  Ну я думаю Stage3D нужно тогда сравнивать с WebGL, чтобы было по честному. Они оба рендерят на GPU. Этому можно посвятить следующий пост.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      А зависимость от wmode не тестили?
                    +1
                    Еще хотелось бы увидеть сравнение чисто расчётов без нагрузки на отрисовку. Например, тот же Box2D.
                      0
                      Вы бы старлинг использовали :)
                        +1
                        А как насчет влияния на яваскрипт аддонов типа AdBlock, NoScript и т.д.? И вообще зоопарка аддонов для зоопарка браузеров в разнообразных комбинациях? А кусочки кода, стилей и картинок непредсказуемо залипшие в кеше? По-моему на флеш эти факторы влияют намного слабее?
                        Иначе какой-то сферический браузер в ваккуме получается. Да и вообще на основе одного протестированного компьютера выводы делать как минимум преждевременно.
                          0
                          Не корректное сранвнение. jQuery, например, не использует CSS Transforms по умолчанию, а Zepto — использует. Или например пропишите -webkit-transform: translate3d(0,0,0); для #container img и сравните результаты в webkit браузерах. Думаю приятно удивитесь разнице. Тест сам по себе очень синтетический, летающие точки?! Плюс флэше на данный момент — заливка, например.
                            0
                            Каждое сравнение имеет грубую оценку, но jQuery настолько отстал что врядли его спасут какие-то трюки, тем более здесь протестировано стандартные приемы создания анимации.
                              0
                              Ну как можно сравнивать анимацию с апаратным ускорением и без? Подключите к jQuery один из многих плагинов для поддержки transitions и тогда можно будет считать приемы одинаковыми.
                            0
                            Имеет смысл сравнивать отдельно IE8 и IE9 — в JS разница огромная
                              +1
                              Судя по тому, что много тестов упирается в 60фпс нужно отключить синхронизацию с vblank…

                              А так мне кажется будущее игр в браузере за native client.
                                0
                                Flash внутри залочен на 60 fps все равно.
                                0
                                Опера по каким то соображением не тестировался? Вроде довольно популярный браузер.
                                  –1
                                  Думаю на уровне Firefox была бы
                                    +1
                                    По моим тестам(Ubuntu, js, 500 картинок). FPS.
                                    TweenLite.
                                    Chromium: 103
                                    Opera: 55
                                    Firefox: 32

                                    Zepto.
                                    Chromium: 86
                                    Firefox: 41
                                    Opera: 60

                                    Примерно менжду Crome и Firefox.
                                  +2
                                  По ощущениям ie9 самый шустрый, быстро запускается, менюшки быстро работают, с памятью все ок. Для обычных сайтов неважно какой используется яваскриптовый движок. Флеш вообще в плагине крутится или даже в отдельном процессе, а мозилла начиная с 4 версии постоянно что-то вытворяет с его поддержкой, но валят всегда на флеш.
                                    +1
                                    да и еще скоро выкатят ActionScript Compiler (ASC 2.0), в котором будет (помимо прочего):
                                    • Better constant-folding and constant-propagation results in better performing code at runtime.
                                    • Reduces function overhead by removing unnecessary activation records.
                                    • Contains some demonstration byte-code optimizations for in-lining and dead code elimination.
                                    • Non-linear control flow added to AS3 through a new 'goto' keyword.
                                    • SWF 13 with LZMA compression is now supported.

                                      –1
                                      А вот GOTO зря они добавляют )
                                        0
                                        они добавляют его для проекта alchemy
                                      0
                                      Очень хотелось бы увидеть такой же тест на OSX для сравнения
                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          «Какие еще проблемы ждут при разработке клиентской части игры на JavaScript и как их можно решить?»
                                          У флеша все сразу привязано к графике, очень легко удобно и просто, то что собственно от него и нужно. При работе с JS сразу столкнулся с проблемой, что «связи с графикой» впринципе нет. Поэтому для себя почти везде юзаю MVC (выбрал Backbone), это здорово все упрощает.
                                            0
                                            Интересно есть ли программные продукты для анимации с использованием JS, не фреймворки, а именно рисовалки анимации с временной шкалой, удобной работой с объектами и т.п. Т.е. чтобы дизайнер/аниматор мог не программировать анимацию, а рисовать.
                                            Еще было бы интересно узнать о перспективах SVG в плане замены Flash'а.
                                            0
                                            habrahabr.ru/post/125384/ Вы это имели в виду? (ну это как бы не ново)

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое