플래시( Flash ) , HTML5 속도 및 퍼포먼스 비교 분석

 안녕하세요 생존본능입니다.

 사실 HTML은 규약이고, Flash는 플러그인이기때문에 비교자체가 억지일수있으나,

 저와 비슷하게 웹, 모바일 환경에서 게임 , UI 등을 개발할때 참고용으로 공유 드립니다.

  아래 내용들은 개인적인 생각이 다소 포함되어있음을 알려드립니다.

 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 

 우선 Flash와 HTML5를 비교하기전 Flash와 HTML5를 알아 보겠습니다.

 >> Flash 보기 <<

 >> HTML5  보기 <<

 플래시의 경우 3.0 이후 디자인너의 스크립트 개념에서 벗어나 개발 가능한 언어로 인식되어지는

 상태이며 오랜시간 개발자들이 사용해와서 그만큼의 노하우등이 쌓여있는

 개발자가 포진해 있고, 자체 Frame Work을 가지고 있습니다.

 Frame Work자체가 디자인 툴과 연결되어있어 디자이너와의 빠른 상호 작용이 가능하고

 개발자 입장에서도 디자인 부분의 비중이 크게 차지 하지 않고있어 

 다른 언어 보다 개발속도 빠르다는 장점이 있습니다.

 하지만 디자인툴과 바로 연동 가능하며, 아무래도 다른 언어보다 쉬운 언어이기때문에

 많은 디자이너들이 스크립트 영역까지 구현하다보니,

 무거운 컨텐츠와 오류가 많은 컨텐츠등이 생산되는 경우가 생기며,

 플래시 개발자라고 하면 아무래도 개발자라는 시선보단 디자이너라는 시선이 있는 편입니다.

 또한 player 자체에 메모리 누수나 보안 이슈등이 발생되는 상황입니다.

 이러한 상황에서 모바일이라는 환경이 최적화 이슈가 가장 중요한 환경이 나왔습니다.

 그 시작은 애플 사의 아이폰을 시작으로 안드로이드 , 윈모바일 등이 뒤따르게 되었는데요,

 그러던중 중요한 사건이 발생하게 됩니다.

 바로 애플의 스티브 잡스가 "아이폰 등 모바일 기기에 쓰기에는 너무 느리고, 모바일

 전용으로 나온 ‘플래시 라이트’ 역시 기능이 조악하다" 는 식의 발언으로

 대안으로 HTML5가 될것이라는 말을 하게됩니다.

 

 이사건 때문만이라고는 할수없겠지만 HTML5가 집중 조명을 받게 됩니다.

 HTML , java script 는 사실 이전부터 존재해 왔습니다.

 HTML4는 웹상에서 이미지를 잘 보여주기 위한 언어로 인식되어왔고

 JavaScript는 유야무야 사용되어왔습니다.

 그러다 Google사에서 GoogleMap을 javascript로 구현하면서

 단순 보여주기위한 스크립트가 아니라 언어로서의 인식을 가지게 되었으며,

 가장큰 변화는 HTML5에서 bitmap개념의 canvas가 나오면서 

 게임 UI등에 적용이 가능해 졌고,

 그러면서 JQuery , sencha touch 등의 Frame Work 이 나타나면서

 전성시대가 시작되게 되었습니다.

--

1. 속도 비교

	Flash	Html5
Tool	Flash Builder 4.6	eclipse Indigo + JSDN
FrameWork	Puremvc	Puremvc
Grapic	Grapics	Canvas
Language	ActionScript 3.0	HTML + CSS + JavaScript

 공의 갯수는 100개이며 50px 이내로 근접시 선이 연결되고, 가까이 갈수록 선이 진하게 표현되는

 코드입니다.

 >> HTML5 테스트 보기 <<

 테스트 하면서 느낀건 확실히 익플보단 구글크롬이 훨씬 빠르네요..

 크롬에서 확인해 보면 좀더 빠른 상태로 보실수있습니다.

 한 브러우저안에서 플래시랑 html5를 같이 띄우면

 두컨텐츠다 속도가 떨어집니다.

 >> FLASH 테스트 보기 <<

	FLASH	HTML5
Internet  Explorer 9	35 FPS	35 FPS
Google Chrome	41 FPS	60 FPS

 

 GPU 가속을 받지 못하는 익스플로러에서는 큰차이가 없었으나, 

 크롬에서는 html5가 더 빠르네요.

 그리고 직접 애니메이션을 돌려보면 플래시가 더 빠르다고 하던데 그부분은

 테스트 해서 공유하도록 하겠습니다.

 그리고 테스트에 이용되었던 코드는 공유하도록 하겠습니다.

SpeedTest_AS3.0.zip

SpeedTest_javascript.zip

 

2. 언어 비교

	Flash	Html5
Class	지원	Object로 유사한 형태로 지원
데이터형	int , number , String , Array , Boolean , Function , Object , uint , XML	number , String , Array , Boolean, object 암시적 형변환
기반	ECMAScript	ECMAScript

javascript 는 아직은 많이 미비해 보입니다.

eclipse + jsdn 툴 조합으로도 자동완성 기능이라던지 여러부분이 미구현되어

개발에 어려움을 겪었으며, Object 개념이라는 조금은 생소한 개념이 있습니다.

 우선 기본적인 것만 테스트한거라 위 테스트 내용이 절대적이라고 할수는 없으므로,

 참고만 부탁드립니다.

 감사합니다.