Так кто кого: HTML5 или Flash?

Недавно по интернет сообществу прокатилась новость, взбудоражившая всех — HTML5 заменит Flash! Равнодушным не остался никто. Одни радовались и злорадствовали, другие пытались доказать, что это вовсе не так, и пока ничто не может превзойти технологии флеш анимации.

В распространении таких дебатов немало поучаствовал Стив Джобс, который во время одной из встреч, посвященных выпуску iPad негативно отзывался о мультимедийной технологии Adobe Flash и называл ее устаревшим пожирателем ресурсов. Он же призвал веб сообщество отказаться от флеша в пользу более современных технологий, Adobe Flash – устаревший пожиратель ресурсов таких как HTML5. Многие разработчики подхватили эту идею и сейчас значительное количество приложений для того же iPad разрабатываются именно на HTML5, а всем известные лидеры онлайн видео YouTube и Vimeo еще в конце января 2010 года объявили, что вскоре планируют внедрить поддержку элемента <video> HTML5.

Достижения HTML5 действительно поразительны и, возможно, вскоре никто и не вспомнит, что до него существовало что-то другое (так, как мало кто помнит про 3-х дюймовые дискеты ). Но мы решили представить вашему вниманию не доказательство лидерства нововведений, а сравнительную характеристику всех существующих на сегодняшний день технологий веб анимации. Вернее представить небольшой эксперимент, проведенный Камероном Адамсом. Для сравнения он выбрал 4 технологии:

1. Adobe Flash (ранее известная как Macromedia Flash)
2. HTML (ну что про него еще скажешь?)
3. Canvas (элемент HTML 5, который предназначен для создания bitmap изображения при помощи JavaScript), который на сегодняшний день наиболее часто используется для построения графиков, простой анимации и игр в веб-браузерах
4. SVG (язык разметки масштабируемой векторной графики, предназначенный для описания двумерной векторной и смешанной векторно/растровой графики в формате XML)

Для этого Камерон выбрал достаточно простую анимацию, которую легко переложить на любую из вышеперечисленных технологий, прописывая одинаковые параметры анимации. Собственно примеры каждой технологии можно увидеть здесь:

1. HTML
2. Canvas
3. SVG
4. Flash

Но это еще не все. Для каждого примера вы можете варьировать количество частиц, изменяя их число в строке ввода. Например:
1. Canvas 250
2. Canvas 500
3. Canvas 1000

…и включать\отключать отображения тени, меняя значения true/false:
1. Canvas
2. SVG
3. Flash

Этот тест был проделан для разного количества частиц (250, 500, 1000, 2000 и 4000), разных браузеров и операционных систем. И что же? Если не вдаваться в подробности, то Flash по прежнему находится на лидирующей позиции, за ним идет Canvas, потом HTML и SVG. Хотя надо отдать должное Safari – на невысоком количестве частиц он отлично поддерживают собственную технологию.

Графики по браузерам:
- Safari 4.0.3, OS X
- Firefox 3.6, Windows XP
- Chrome 4.0.249.89, Windows XP
- Internet Explorer 8, Windows XP

И в завершение

Конечно, данный метод сравнения мультимедийных технологий не является научным, и наверняка найдутся более весомые аргументы на поддержку того или иного метода анимации. Но все же нельзя не признать, что старый конь борозды не портит и флеш по-прежнему остается лидером в своем классе продуктов. А мы лишь можем пожелать ему долгих лет жизни и неувядающей конкурентоспособности! Удачи!