모바일웹성능최적화동향및사례 : Syrup Store 앱 임상석 SK 플래닛
Syrup Store O2O Marketing Platform/Solution
Syrup Store App for SMB
HTML5 기반 안드로이드 /ios 앱개발삽질기
왜 HTML5! Front-end 개발자중심으로 Cross Platform 앱내부개발
타협불가최소품질 Native 수준 Look/Motion by UX ( 앱 UI 성능지표만족 ) Be Acceptible otherwise Be Native
Android 4.03 Webview/Browser HTML Layer HW 가속시대개막 그러나구글의배신 GPU Texture Upload 지연시간 1 초...
Android 4.2 >= 도전적이지만달성가능한환경으로판단
HTML5 UI Framework 선택 자체 Sencha,Onsen,famo.us Ionic React/React Native ( 차기검토중 )
Ionic Angularjs 기반 HTML5 Framework Android/iOS Native 느낌의앱개발지원
Ionic UI component Android/iOS Nativelike UI styling (Theme, Style, Icon, Transition)
Ionic UI Component 헤더버튼리스트그리드폼탭... $ionicactionsheet $ionicbackdrop slidebox $ionicpopup... SVG icon viewport 밖에서도지속적으로 rendering
Ionic 기능 / 장점 SPA (View 단위 DOM lifecycle 관리 ) Native-style UI component grade에따른성능제어 UI routing Cordova Integration
Custom UI Animation 개발 GPU 가속 Declarative Animation
RenderLayer SW(CPU) Painting Stacking Context 에서낮은 z-index 에위치한 RenderLayer 부터순차적으로 CPU 로 painting 을수행 다른 Layer 와겹쳐진부분은기 painting 된값을읽어서 compositing compositor 는 window manager 기본기능 compositing 연산의복잡도 READ SRC PIXEL on DRAM READ DEST PIXEL on DRAM ADD SRC PIXEL, DEST PIXEL DIV RESULT WRITE RESULT PIXEL
Graphics Layer 생성조건 3D 또는 perspective transform CSS 속성 video canvas 2D/3D CSS filter 투명도를부여하는 CSS animation 수행 z-index 가낮은형재가 composition layer 를갖는경우
GPU 기반 Relayer 합성 CPU 로생성된 graphics buffer 는해당 HTML 의속성이변경되지않는한계속유지되어다음합성에재활용됨
Declarative VS JavaScript 기반 animation Declarative animation CSS로 animation 설정 Webkit 엔진내에서기본최적화수행 main thread overloaded 되어도수행이됨 (HW timer 에의한동작 ) JavaScript animation (settimeout/requestanimationframe) 애니메이션시작, 끝, 일시중지등복잡한형태를구현가능 main thread가 overload될경우 animation이제대로수행되지않음 main thread 부하증가 Web animation 표준 Declarative/JavaScript 기반애니메이션의단점을모두해결해주는표준 ios 미지원 (webkit에구현중 ) Android 5.0이상일부지원
Declatrive Animation: keyframe 시작, 중간점들및끝점을명기하면중간지점은엔진이내부적으로생성해주는 animation 방식 엔진내부의 system timer 를기반으로 animation 이수행이됨 JS 개입이없음 고속수행 div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; } http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2 /* Chrome, Safari, Opera */ @-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }
Declarative Animation: Transition keyframe 과개념은동일하나시작과끝, 두부분만명시하면나머지부분은엔진에서 interpolation div { width: 100px; height: 100px; background: red; } -webkit-transition: width 2s, hegith 4s; transition: width 2s, hegith 4s; div:hover { width: 300px; height: 300px; } http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2
JavaScript Animation: settimeout/requestaniframe settimeout (0) 로 animation 수행시문제점 실제 LCD buffer로쓰여지는주기보다훨씨빠르게 painting을하여 frame drop이발생 CPU/Battery 낭비 http://www.html5rocks.com/en/tutorials/speed/rendering/?redirect_from_locale=ko
JavaScript Animation: vsync 현재 LCD buffer 로 frame 을 flush 후다음 frame 을보내주기위해서시스템단에서발생시켜주는 signal webkit 엔진은 vsync 를 requesanimationframe 에통합하여제공
Hybrid Application - Native 부분 Cordova plugin Push BLE Splash screen Cipherstorage Camera Image cropper
삽질기공유
Scroll View HTML5 App 개발알파와오메가
Ionic Scroll View CSS 2D/3D scroll, Native browser scroll 간프로그램적선택지원 <ion-content overflow-scroll="true" class="no-header homecontent" scrollbar-y="false" on-scroll="verticalscroll()> $ionicconfigprovider.scrolling.jsscrolling(false);
Ionic Performant Infinite Scrolling ng-repeat collection-repeat 로변경 viewport 기준 DOM node 개수상수고정 <ion-item collection-repeat="product in products" item-render-buffer="8" ngclick="checkachievements( product )" item-height="70px" item-width="100%" class=" item-icon-right"> <h2>{{product.name}}</h2> <p>{{product.period}}</p> <i ng-class="product.status" class="item-status"></i> </ion-item> <ion-infinite-scroll icon="ion-loading-c" on-infinite="loadmore()" ng-if="loadrequired"> </ion-infinite-scroll>
Page Navigation Animation CSS transform 기반 -GPU 렌더링 ios 는 Native 수준, Android 단말별최적화불가피
Page Navigation Animation 성능저하요인분석 DOM element load timing -filter: blur -border-radius gradient QHD 단말의고해상도
DOM element load timing $ionic.beforeenter - 최소한의화면구성, AJAX request $ionic.afterenter - 이미지, SVG 등화면적재, loading icon $ionic.loaded - DOM 적재시 $ionic.unloaded - DOM 제거시
-filter: blur (5px) Transition Element 포함시성능저하 Blur 적용된정적 Image 로변경 - 서버단 filter - client 단 filter (<canvas>, native) <cavas> tag 를활용한 filter 구현 - blur filter var canvas = document.getelementbyid("canvas"); var dataurl = canvas.todataurl(); console.log(dataurl); // "data:image/png;base64,ivborw0kggoaaaansuheugaaaauaaaafcayaaacnby // blaaaadeleqvqimwngobmaaabpaafei8araaaaaelftksuqmcc"
gradient, box-shadow, border-radius 단말별로제거하거나 Image 로대체 if ( ionic.platform.isandroid() ) { if ( ionic.platform.version() >= 5 ) { // 안드로이드롤리팝 G4 일경우 grade 를 b 로설정 if ( (/LG-F500/).test(window.navigator.userAgent) ) { console.log("set to grade b device"); ionic.platform.setgrade('b'); } } }
URL 기반 3rd party 솔루션 Plug-in iframe vs 별도 Webview 4.2 이상에서는 iframe 가능
ios 버전상용개발 Ionic UI 재활용 + swift 기반 plugin 개발 코드재활용도 80% 수준
한줄기술교훈요약 Android 4.2>, ios 7.0> 앱상용개발가 능 단 UI Layer 의복잡도고려 Ionic 성능 Turning 필요
self.next() === undefined