퍼포먼스 최적화 : Bitmap 데이터형으로 전환하여 사용하라.

개요

이번 주제는 플래시 퍼포먼스를 어떻게 하면 최적화 시킬 수 있는지에 대한 글을 써보려한다. 액션스크립트를 공부한 유저라면 다들 한번쯤 트위너에 대해 들어봤거나, 자주 사용하고 있을 것이다. 한때 트위너 퍼포먼스란 주제로 많은 글들이 올라왔었고, 또 제조사가 다른 트위너API 퍼포먼스에 대한 비교예제를 소개하는 글들이 많았었다.  여기 사이트를 방문하면 각 제조사별 트위너API 퍼포먼스를 확인 할 수 있다.

오늘 주제의 목적은 타 트위너 API대한 성능을 비교하려는게 아니다. '왜 트위너들이 제각기 성능이 다르게 나올까?'하는 의문에서 시작되었고, 그걸 증명하기 위해 몇가지 테스트 결과를 소개하는데 목적이 있다.

구성

- 최종적으로 이미지가 그려질 canvas 스테이지.
- 크기 6*6px 인 이미지 원본 한개( ItemClass - Sprite 상속 ).

알고리즘 A ( Bitmap 활용 ) - 하단 좌측파일

- ItemClass의 인스턴스를 생성한다.
- 복사된 ItemClass의 인스턴트에서 2500개의 Bitmap 데이터형 복사본을 반환받는다.
- 각각 2500개의 이미지를 TweenMax를 사용하여 Y좌표 0 에서 400으로 이동( 반복적용 ).
- Bitmap 데이터형으로 변환된 이미지를 canvas 스테이지에 그려준다.

//Bitmap 클래스 상속구조
Bitmap ---> DisplayObject ---> EventDisplatcher ---> Object

알고리즘 B ( Sprite 활용 ) - 하단 우측파일

- Sprite 클래스를 상속받은 ItemClass 자체를 new 키워드로 2500개를 생성 한다.
- 각각 2500개의 이미지를 TweenMax를 사용하여 Y좌표 0 에서 400으로 이동( 반복적용 ).
- ItemClass 인스턴스 이미지를 canvas 스테이지에 그려준다.

//Sprite 클래스 상속구조
Sprite ---> DisplayObjectContainer ---> InteractiveObject --->
DisplayObject ---> EventDisplatcher ---> Object

최종구현( 마우스 오버해서 확인 )

Bitmap                                                                                       Sprite
                          


결론

위 상속구조를 보면 Sprite 클래스가 DisplayObjectContainer와 InteractiveObject 두가지의 클래스를 더 상속하고 있다는걸 알 수 있습니다. 이 두 클래스의 공통점은 인스턴스화를 시킬 수 없는 대표적인 추상클래스 입니다. 도움말을 확인해보면 속성과 메서드가 정의되어 있는데, DisplayObjectContainer클래스 는 표시목록 객체를 제어하는 주요기능들을 가지고 있고. InteractiveObject클래스는 마우스이벤트 관련 기능들을 가지고 있습니다. 이 두 클래스가 랜더링되어 화면에 표시될 때 퍼포먼스에 많은 영향을 미친다는 사실을 유추해 볼 수 있습니다. 즉 현재 만들고자 하는 객체에 모션을 주고자할 때, 인터랙션이 필요한지에 대한 여부에 따라 필요가 없다면 BitmapData 클래스를 이용해 Bitmap데이터형으로 변환해서 모션을 준다면 기대 이상의 퍼포먼스 효과를 얻을 수 있습니다.