Page 0: Page 1: Flex 3 최적화 가이드 옥상훈 2008년 7월 5일 © C o pyright okgosu.net Page 2: 목차 제1장 제2장 제3장 제4장 Flex 3의 특징 [1장 참조] Flex 3 최적화 개요 [9장 참조] Flex 클라이언트 사이드 최적화 [9장 참조] Flex 서버 사이드 최적화 [7장 참조] http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 3: 1.Flex 3의 특징  플렉스 이전 버전 호환성 매트릭스  Flex 3 – 4대 특징  Flex 2  Flex 3 마이그 레이션 가이드 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 4: 1.1. 플렉스 이전 버전 호환성 매트릭스 Flex 1.5 (2005.2) Flex 2 (2006.7) Flex 3 (2008.2) 플래시 플레이어 Flash Player 8 Flash Player 9 기존과 동일 개발언어 ActionScript 2.0 Flex Presentation Server 1.5 Flex Builder 1.5 ActionScript 3.0 기존과 동일 LiveCycle Data Service ES 2.5 Flex Builder 3 Standard 개발서버 Flex Data Service 2 Flex Builder 2 플렉스 개발툴 Flex Charting 2 Flex Builder 3 Professional Flex SDK 2 Flex SDK 3 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 5: 1.2.Flex 3 – 4대 특징 1. 개발자와 디자이너 협업 3. 진화된 개발 플랫폼 2. 향상된 Data 처리 컴포넌트 4. 데스크탑 RIA애플리케이션 개발 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 6: 1.3.Flex 2  Flex 3 마이그레이션 가이드  Deprecated된 API (실행에는 지장을 주지는 않음)  Deprecated Method  차트 관련 메서드  CartesianChart.dataToLocal() -> IChartElement2.dataToLocal()  getSecondAxis() -> getAxis() 로케일 관련  mx.resources.Locale -> ResouceManager.getInstance() 차트 관련  horizontalAxisRenderer -> horizontalAxisRenderers  CartesianChart.secondDataProvider -> CartesianChart.dataProvider  secondHorizontalAxisRenderer -> horizontalAxisRenderers WebService 관련  protocol -> 설정안해도 됨  serviceName -> destination  document -> xml   Deprecated Properties   http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 7: 1.3. Flex 2  Flex 3 마이그레이션 가이드  Deprecated된 API (실행에는 지장을 주지는 않음)  Deprecated Style        CartesianChart : 4개 Accordion :7개 ColorPicker : 14개 DateChooser : 2개 DateField : 8개 MenuBar : 2개 ComboBox : 1개       http://livedocs.adobe.com/flex/3/langref/deprecated.html http://livedocs.adobe.com/flex/3/langref/index.html?deprecated.html DataGrid : rowCount, lockedRowCount 수에 header는 카운트 되지 않 음 UITextField -> IUITextField 로 바뀜 ComboBox : itemRenderer를 사용할 경우 paddingLeft 기본값이 2에서 5 로 바뀜 flashType=true -> fontAntiAliasType="advanced"  기타 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 8: 2.Flex 3 최적화 개요  플렉스 애플리케이션 아키 텍처  애플리케이션 성능 향상 가이드 : 클라이언트측  애플리케이션 성능 향상 가이드 : 서버측  플렉스 성능 향상 공식  플렉스 컴파일 최적화 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 9: 2.1.플렉스 애플리케이션 아키텍처 WAS LiveCycle Data Service 런타임컴파일러 데이터 연동 서비스 RPC 서비스 HTTP Services Web Services Resource Service Adapter JavaBeans JMS LDAP 1 웹브라우저 플래시플레이어 DBMS http:// acme.com/app.mxml app .mxml 2 app.swf Remote Objects Spring Hibernate CRM/ ERP/CM 3 4 데이터 전송(XML, SOAP, AMF) 실시간 Data 연동 서비스 app.swf 데이터 요청(HTTP, WSDL, Java Method) Message Service Data Management Service ……. Web Services. J2EE     플렉스 애플리케이션 호출 단계 : 컴파일 및 배포 고려 플렉스 애플리케이션 다운로드 단계 : 애플리케이션 사이즈 플래시플레이어 렌더링 & 데이터 요청 단계 : 렌더링 시간 결과 데이터 전송과 데이터 바인딩 단계 : 서버 응답, 데이터 포맷, 데이터량 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 10: 2.1.플렉스 애플리케이션 아키텍처  목적  최종 실행물 (SWF 애플리케이션)의 기본 골격 정의  고려할 사항     메인 애플리케이션 구성 프레임워크 및 데이터 연동 외부 인터페이스 프로그램 배포  기존 웹애플리케이션과 다른 점 (X-internet)  사용자 PC에 실행파일(SWF)이 다운로드 된다.  플래시 플레이어에서 SWF는 실행된다.  SWF는 바뀌지 않으면 인터넷 임시디렉토리에 캐시된다. http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 11: 2.2.애플리케이션 성능 향상 가이드 : 클라이언트측  SWF 사이즈 축소  RSL 사용  ModuleLoader(SWF모듈화) 를 통한 SWF분리  EXTERNAL 옵션  AIR를 이용한 SWF 배포  플렉스 빌더 3 성능 프로 파일링 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 12: 2.3.애플리케이션 성능 향상 가이드 : 서버측  RemoteObject를 사용한 바이너리 통신  DataService를 이용한 네 트워크 트래픽 감소  서버 데이터 캐쉬  기타 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 13: 2.4. 플렉스 성능 향상 공식  애플리케이션 사이즈 최대 허용 크기 = 네트워크 전송 속도 * 화면 로딩 허용 시간 예) 200K * 3초 = 600K  데이터 전송 건수  데이터 전송량 = 네트워크 전송 속도 * 데이터 로딩 허용 시간  데이터 전송 건수 = 데이터 전송량 / 1건당 데이터 크기 예) 네트워크 전송 속도 = 200K, 데이터 로딩 허용 시간 = 10초 1건당 데이터 크기 = 0.1K -> 애플리케이션 데이터 전송 건수 = 2000/0.1 = 20,000건 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 14: 2.5.플렉스 컴파일 최적화  EXTERNAL 옵션 컴파일  컴포넌트간 중복되는 클래스를 찾아내고  -link-report옵션  컴포넌트를 외부에서 참조하도록 컴파일  -load-externs옵션 mxmlc -link-report=report.xml ModuleLoaderApp.mxml mxmlc -load-externs=report.xml ModuleSubMenu0.mxml … mxmlc 컴파일ModuleLoaderApp.mxml  RSL 옵션 적용  RSL 지정  -runtime-shared-library-path 옵션  RSL 바이너리 웹경로 지정  swf, swz 옵션 mxmlc -runtime-shared-librarypath=framework.swc,http://okgosu.net/flex/rsl/framework_3.0.0.477.swz,http://ok gosu.net/flex/rsl/framework_3.0.0.477.swf ModuleSubMenu0.mxml  ModuleLoader 최적화 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 15: 3.Flex 클라이언트 사이드 최적화  애플리케이션 사이즈 축소 방안  애플리케이션 사이즈 축소 테크닉  공통 모듈 RSL 적용  인증 Framework RSL 적용  SWF 애플리케이션 분리 방안  플렉스 SWF 애플리케이션 배 포 방안  플렉스 빌더 3의 메모리 및 프로파일링 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 16: 3.1.SWF 사이즈 축소 방안  메인 애플리케이션 크기  가능한 한 최소의 크기로 줄여야 함  크기가 작을수록  웹서버에서 클라이언트로 다운로드 되어야 할 SWF사이즈 감소  퍼포먼스 향상  변경된 모듈의 업데이트 용이 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 17: 3.1.SWF 사이즈 축소 방안  메인 애플리케이션(SWF) 사이즈에 영향을 주는 요소  화면의 복잡도  화면 자체를 만들기 위한 컨트롤, 컨테이너 개수  포함하고 있는 서브 화면 개수  컴포넌트 사용성  사용하는 ActionScript 오브젝트 및 데이터 형태  데이터 바인딩 및 [Bindable]로 선언된 오브젝트  Embed된 Asset  Embed된 Font  Embed된 이미지  Embed된 데이터 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 18: 3.1.SWF 사이즈 축소 방안  화면의 복잡도 감소  컨트롤, 컨테이너가 불필요하게 중첩되지 않도록  서브 화면들은 Module이나 별도의 애플리케이션으로 분리  컴포넌트 사용성  ActionScript오브젝트의 데이터 타입 확인 (Number보다는 int 사용)  불필요한 데이터 바인딩 사용 금지  Embed된 Asset 사용 줄이기  이미지는 url경로로  꼭 필요한 경우가 아니라면 기본 폰트 사용  데이터는 런타임으로 나눠서 받도록 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 19: 3.2.애플리케이션 사이즈 축소 테크닉 1. 변수에 [Binable] 선언을 하면 애플리케이션 선언 안 했을 경우 보다 메모리 사용량이 더 커진다. 2. 데이터바인딩이 필요하지 않으면 배열에는 Array를 사용하라. 3. 임베드된 애셋들은 애플리케이션 사이즈에 그대로 추가된다. 4. 컨테이너의 creationPolicy는 queued옵션이 auto나 all 옵션 에 비해 메모리를 적게 사용한다. 5. 서브 화면은 Module로 만들어 메인 애플리케이션에 최적화하 라. 6. 공통 컴포넌트는 RSL로 만들어 공유하고 인증 프레임워크 RSL을 적용하여 애플리케이션 사이즈를 최소로 줄인다. http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 20: 3.3.공통 모듈 RSL(Runtime Shared Library) 적용  SWF파일을 클라이언트에게 전송할 때 같이 공유할 컴포넌트 를 라이브러리로 묶어서 전송하는 방법  http://livedocs.adobe.com/flex/201/html/rsl_124_1.html#1 68690 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 21: 3.4.인증 Framework RSL 적용  인증 Framework RSL을 이용한 애플리케이션 경량화 플렉스 2 애플리케이션 사이즈 사이트A 플렉스 3 애플리케이션 사이즈 사이트B 플렉스 2 애플리케이션 RSL 플렉스 3 애플리케이션 인증 Framework RSL 캐쉬 플래시 플렉스 2 플레이어 애플리케이션 RSL 플래시 플렉스 3 플레이어 애플리케이션 Flex Component Cache (인증 Framework RSL) http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 22: 3.5.SWF 애플리케이션 분리 방안  SWF 애플리케이션 분리 여부  확장성 : 화면의 개수가 수십 개 이상으로 애플리케이션 사이즈가 현저히 커질 것으로 예상되는 경우  로딩속도 : 네트워크 속도가 낮아 애플리케이션 로딩 속도에 문제 를 줄 경우  배포 : 애플리케이션 내의 모듈의 변경이 잦아 부분적으로 배포해 야 할 경우  SWF 애플리케이션 분리 방법  1 + N : 1개의 메인 SWF + N개의 화면당 N개의 SWF로 구성  서브 SWF는 ModuleLoader를 이용하여 로딩  html + N : 1개의 컨트롤 html + N개의 SWF  Html에서 각 SWF를 로드하도록 컨트롤 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 23: 3.5.SWF 애플리케이션 분리 방안  ModulLoader 사용을 통한 swf 분리   하나의 SWF에 모든 화면을 다 넣으면 SWF가 매우 무거워진다. 따라서 서브 모듈 별로 분리하면 개발 및 유지보수, 성능을 동시에 향상 시 킬 수 있다. ModulLoader 사용 가이드 (http://blogs.adobe.com/aharui/360Flex2007/Modules.ppt/Modules.p pt )   모듈 : 애플리케이션을 작은 단위로 쪼갤 수 있도록 해줌 모듈 사용 목적  애플리케이션 사이즈와 시작속도를 빠르게 하고자 처음에 로드할 필요 가 없는 코드나 애셋들 대상  클래스나 애셋들과 동적으로 연결할 때  모든 코드를 재컴파일 하지 않고 부분적으로 컴파일하고자 할 때 모듈 적용 대상  Navigators: ViewStack, TabNavigator, Accordion  PopUp Dialogs  Themes/Styles  Localized Strings and Assets  Shared code between modules  Anything else configurable or optional  http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 24: 3.5.SWF 애플리케이션 분리 방안  html 레벨에서의 화면 분리 (iFrame사용)  swf를 html(iFrame)에서 로드하면 메모리의 증가를 막을 수 있 다.  하나의 화면이 로드될 때 html레벨에서 swf를 로드하도록 자바 스크립트를 작성 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 25: 3.6.플렉스 SWF 애플리케이션 배포 방안  플렉스 SWF 배포 방법   SWF파일 직접 배포      WAS보다는 웹서버에서 배포하는 것이 좋음 프로그램이 자주 바뀌지 않을 경우에 사용 런타임 컴파일은 MXML소스가 변경되었을 경우에만 작동함 WAS에서 웹서버를 거쳐 컴파일된 SWF가 클라이언트로 리턴 프로그램이 자주 바뀔 경우에 사용 MXML을 런타임 컴파일해서 배포  Adobe AIR를 이용한 배포    SWF를 AIR 의 adt 명령어를 사용해 air 아카이브 파일에 포함 AIR파일을 다운받으면 AIR런타임이 설치된 경우 바로 사용자 PC에 설치 설치된 AIR파일은 추후에 업데이트도 가능함  플렉스 캐싱    SWF는 사용자 PC에 브라우저가 사용하는 임시 디렉토리에 캐시됨 SWF를 무조건 새로 받게 하려면 html헤더에서 no-chache 옵션을 주도 록 함 RSL로 설정한 swf 파일 또한 캐시됨 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 26: 3.7.플렉스 빌더 3의 메모리 및 프로파일링 메모리 및 성능 프로파일링  성능 스냅샷을 통해 병목구간 탐지  메노리 누수와 과도한 객체 할당 부분 조사 가능  Function별로 메모리 사용 최적화 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 27: 4.Flex 서버 사이드 최적화     LCDS의 개요 서버 아키텍처의 이해 LCDS의 통신 방식 RemoteObject를 사용한 바이 너리 통신  DataService(서버 푸쉬)를 통한 트래픽 감소 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 28: 4.1.LCDS의 개요 LiveCycle Data Services RPC Service Data Management Service Message Service PDF Reporting Web Service 데이터 동기화 협업 RIA화면을 PDF로 출력 HTTP Service On/Off Line Data Publish/Subscribe LiveCycle 리모팅 Remote Object 페이징 데이터 푸시 서비스 어댑터 Java JMS Hibernate ColdFusion Custom… http://www.acornpub.co.kr/book/flex by OkGosu.Net Runtime Compiler Page 29: 4.2.서버 아키텍처의 이해 웹 1.0 1 2 3 4 WAS Service Adapter JavaBeans 웹 2.0 데이터 1 2 WAS Data Service RPC Service Data Cache Service Messaging Service 데이터 Query 1 DBMS Service Adapter DBMS Query 2 Query 3 Request Response 3 LDAP JavaBeans JMS JMS Spring P r oduce S u bscribe Query 4 4 CRM/ ERP/CM Query 1 Spring Hibernate LDAP …. …….. …….. Hibernate Query N CRM/ ERP/CM …….. …….. ……. ……. N Web Services. N Web Services. • N개의 요청당 N개의 DB쿼리 실행 • 요청 개수 만큼 트래픽 및 프로세스 실행 • 웹 1.0 • 실시간 서비스 어려움 • 리소스 증가 : 시간, 트래픽, DB쿼리 http://www.acornpub.co.kr/book/flex • N개의 요청당 1회 만 DB쿼리 실행 • 트래픽이 줄고 반응이 빠름 • 웹 2.0 • 실시간 협업 서비스 • 리소스 감소 : 시간, 트래픽, DB쿼리 by OkGosu.Net Page 30: 4.3.LCDS의 통신 방식 데이터연동방법 RPC Service HTTPServic e WebService 통신 프로토콜 HTTP HTTPS HTTP HTTPS HTTP HTTPS 데이터 포맷 XML 데이터처리 애플리케이 션 XML, ASP, JSP, PHP 등 DB연결이 지원되는 모든 웹프로그램 WebService를 제공할 수 있는 시스템 자바빈즈 클래스 실시간 LCDS2 사용여부 메시징 선택적 X XML SOAP 메시지 AMF : Java Object (List, Map) 가 능 AMF : Java Object (List, Map) 가 능 AMF : Java Object (List, Map) 가 능 선택적 X RemoteObej ct 필수 X Data Service Message Service RTMP 자바빈즈 클래스 필수 O Data Managemen t Service HTTP RTMP 자바빈즈 클래스 필수 O http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 31: 4.4.LCDS를 적용한 성능 향상 : RemoteObject를 사용한 바이너리 통신  안정적인 데이터 처리 속도   2만 건까지 1초 이내의 응 답속도를 보임 Ajax – XML – Binary간 데 이터 쿼리 비교  Ajax -Flex ( X M L ) -Flex ( FDS ) 45000 40000 Ajax Flex(XM L) Flex(FDS:RO)  38200 1,000건 이하는 별차이 없 음 1,000건 이상은 LCDS를 사 용한 방법이 성능을 보장 35000 30000 25000  서버 자원 사용 감소  15544 수행시간 20000 15000 10000 5885 5000 0 156 170 31 100 357 218 63 500 730 373109 1000 1792 374 5000 4733 499 10000 842 20000 9690 변경된 데이터만 전송하도 록 설정 가능 압축된 바이너리 데이터사 용  네트워크 사용 감소  데이터건수 http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 32: 4.5.LCDS를 적용한 성능 향상 : DataService(서버 푸쉬)를 통한 트래픽 감소 LiveCycle Data Service 2.5 Adapter X Messaging System X Endpoint Message Service JMS Adapter JMS Provider Adapter Y Messaging System Y RTMP AMF HTTP Publisher Subscriber http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 33: 결론  아키텍처에 대한 이해 : 서버, 클라이언트  애플리케이션 최적화    SWF사이즈 축소 및 분리 서버를 이용한 최적화 http://www.ibm.com/develope rworks/kr/library/dwclm/200 80701_2/  분석적 디버깅 Mozilla Firefox.lnk http://www.acornpub.co.kr/book/flex by OkGosu.Net Page 34: