플렉스 성능과 개발생산성 향상C.A.N. 홈페이지 팀

기술의 빛과 그늘 ( P.520 )

기술과 비용의 상관 관계

기 술비 용

플렉스 애플리케이션 사이즈 제한애플리케이션 사이즈 최대 허용 크기 = 네트워크 전송 속도 x 화면 로딩까지 걸리는 시간 ( 초 )

데이터 전송 건수의 가이드데이터 전송량 = 네트워크 전송 속도 x 데이터 로밍까지 걸리는 시간 ( 초 )

플렉스 성능 향상 요소 -플렉스 성능 향상 공식

플렉스 애플리케이션 사이즈에 영향을 주는 요소화면의 복잡도 액션스크립트 사용방식 임베드된 애셋의 개수와 크기

1. 컨트롤 , 컨테이너 개수2. 서브 화면의 개수

1. 동적으로 만들어 내는 객체의 개수와 크기2. 액션스크립트 객체와 데이터 크기3. 데이터 바인딩 및 [Bindable] 로 선언된 객체

1. 폰트2. 이미지3. 데이터

플렉스 성능 향상 요소 – 애플리케이션 사이즈 축소 방안

애플리케이션 사이즈 축소 방안화면의 복잡도 감소 액션스크립트 사용 방식 임베드된 에셋 사용 줄이기

1. 컨트롤 , 컨테이너 중첩 최소화2. 서브 화면들은 모듈이나 별도의

애플리케이션으로 분리1. 데이터 타입 확인 ( number(x)

int(o) )2. 불필요한 데이터 바인딩 (x)

1. 이미지는 웹으로 다운로드2. 기본 폰트 사용3. 데이터는 런타임으로 나눠서 받음

int

Numberint Array

ArrayCollection

[Bindable] int[Bindable] Number

[Bindable] int Array[Bindable] ArrayCollection

10201040106010801100112011401160

프로파일러 결과

성능 향상 테크닉1. 변수에 [Binable] 선언을 하면 애플리케이션 선언을 안 했을 경우보다 메모리 사용량이 커진다 .

프로파일러 성능 측정

데이터바인딩이 필요하지 않으면 배열에는 Array 를 사용하라성능 : ArrayCollection < Array

임베드된 에셋들은 애플리케이션 사이즈에 그대로 추가된다 .화면상 로드되고 나서 사용하는 메모리 사용량은 비슷하기 때문에 크기도 줄이는 편이 낫다 . gif < jpg < png < bmp

성능 향상 테크닉

임베드된 이미지

웹 경로 이미지

8000 8100 8200 8300 8400

메모리

임베드된 이미지

웹 경로 이미지

0 200 400 600 800 1000 1200

SWF 사이즈

컨테이너의 creationPolicy 는 queued 옵션이 auto 나 all 옵션에 비해 메모리를 적게 사용

성능 향상 테크닉

auto

all

none

queued

950 1000 1050 1100 1150 1200 1250

creationPolicy 옵션별 메모리양

AC3 MXML

mx.core.ContainerCreationPolicy.AUTOmx.core.ContainerCreationPolicy.ALLmx.core.ContainerCreationPolicy.NONEmx.core.ContainerCreationPolicy.QUEUED

<mx:Container creationPolicy="auto" ...><mx:Container creationPolicy="all" ...><mx:Container creationPolicy="none" ...><mx:Container creationPolicy="queued" ...>

auto

all

none

queued

0 0.5 1 1.5 2 2.5 3 3.5 4

creationPolicy 속도

서브 화면은 Module 로 만들어 메인 애플리케이션에 최적화하라최적화 전 : 744k최적화 후 : 484k

공통 컴포넌트는 RSL(Runtime Shared Library) 로 만들어 공유하고 인증 프레임웍 RSL(Runtime Shared Library) 을 적용해 애플리케이션 사이즐 최소로 줄임

성능 향상 테크닉

ModuleLodader( P.524 )

담당자 ModuleLoader SWFLoader

독립 실행 디자이너 독립 실행런타임로드 가능 가능메인애플리케이션과 컴포넌트공유

가능 안됨

루트 태그 <mx:Module> 또는 ModuleBase 상속 <mx:Application>

SubMenu 5

SubMenu 4

SubMenu 3

SubMenu 2

SubMenu 1

SubMenu 0메인 애플리케이션

0 100 200 300 400 500 600

MoudleLoader

MoudleLoader

MoudleLoader

MoudleLoader

MoudleLoader

MoudleLoader

MoudleLoader

SWFLoader

SWFLoader

SWFLoader

SWFLoader

SWFLoader

SWFLoader

SWFLoader

인증 프레임웍 RSL 적용 테스트

[ 표 ] ModuleLoader와 SWFLoader 비교

MXML 컴포넌트로 생성File > New > MXML Moduble

모듈 생성

Mxmlc 로 일일이 컴파일 안함 메인 애플리케이션에 대해 최적화

모듈 최적화

Optimize for appli-cation

Do not optimize0

100

200

300

400

모듈 사이즈 비교

Moudle 생성 - 1

                                                       

1. Flex Project 를 생성한다 . Flex 3 Builder 의 메뉴에서 File > New... > Flex Project 를 선택하면 다음 창이 나온다 .

Moudle 생성 - 2

                                                              

압축 파일을 풀면 아래와 같은 프로그램들이 있는데 아래와 같이 선택된 프로그램만 복사하고 바로 생성한 Project 의 src 폴더에 복사한다 .

복사

복사한 소스에서 insurancemodules 폴더안에 mxml 파일이 3 개가 있다 . 소스내용을 보면 알겠지만 태그를 사용한 것을 볼수 있다 . 즉 , 이 3 개의 소스는 모듈이다 .

Moudle 생성 - 3

3. 모듈 추가메뉴에서 Project > Properties 를 선택하면 아래와 같은 창이 나오는데 ... 여기서 왼편에 Flex Modules 를 선택하고 해당 3 개의 모듈을 등록후 OK 를 하면 된다 .

컴파일러는 이 모듈을 따로 컴파일하여 각각 3 개의 swf 파일을 생성해준다 . 이 swf 파일은 직접 실행되는 것이 아니라 Main Application 에서 필요할 때 동적으로 로드해서 사용하게 된다 .

Module 등록을 하면 옆에 그림과 같이 3 개의 mxml 파일에 파란색 마크가 붙어 이것이 모듈이라는 것을 가시적으로 확인할 수 있다 .

Moudle 생성 - 4

4. Main Application 설정이 부분은 생략해도 되나 , 실행할 때마다 해당 Application 을 선택하는 번거로움을 없애기 위한 것이다 . 모듈 설정때와 동일한 방법으로 Flex Builder 의 메뉴에 Project > Properties 를 선택한 다음 좌측에 Flex Applications 를 선택한다 . 그리고 아래와 같이 EventApp.mxml 을 Add 한다음 Set as Default 버튼을 이용하 default 로 고정시켜준다 . 이렇게 하면 실행할 때 기본적으로 MoudleText.mxml 이 Main Application 이 아니라 EventApp.mxml 이 Main 이 되어 실행된다 .

Moudle 생성 - 5

실행 화면개의 Main Application 에서 3 개의 Module 을 로드하는 프로그램 완성

성능 프로파일링 메모리 프로파일링 병목구간을 찾아 내는 기능 메소드 지연 구간이나 호출 빈도가 높은 곳 검출

각 객체들의 메모리 사용량 과도한 메모리 사용 객체 검출 메모리 누수 구간 검출

플렉스 빌더의 메모리와 성능 프로파일러Profile View

Memory Usage View

Live Object View

플렉스 메모리

메모리 사용량초기 로딩시 메모리

화면 로직중 수행되는 메모리

그림 1. Flash Player 에서 표시 및 회수 방법을 통해 활성 참조가 없는 객체 식별