'속도'에 해당되는 글 1건

  1. 2012.05.30 플래시( Flash ) , HTML5 속도 및 퍼포먼스 비교 분석 (3)
posted by 생존본능 2012.05.30 16:33
크리에이티브 커먼즈 라이선스
Creative Commons License


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


 사실 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 개념이라는 조금은 생소한 개념이 있습니다.






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


 참고만 부탁드립니다.



 감사합니다.

저작자 표시
신고

티스토리 툴바