모바일 웹 성능 최적화 동향 및 사례: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 Native-like UI styling

(Theme, Style, Icon, Transition)

Ionic UI Component

헤더버튼리스트그리드폼탭...

$ionicActionSheet$ionicBackDropslideBox$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 기반 Layer 합성● 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;}

/* Chrome, Safari, Opera */@-webkit-keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;}}

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes2

Declarative Animation: Transition● keyframe과 개념은 동일하나 시작과 끝, 두 부분만 명시하면 나머지 부분은 엔진에서 interpolation

http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2

div { width: 100px; height: 100px; background: red;

-webkit-transition: width 2s, hegith 4s; transition: width 2s, hegith 4s;}

div:hover { width: 300px; height: 300px;}

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

PushBLE

Splash screenCipherstorage

CameraImage 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" ng-click="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-radiusgradient

QHD 단말의 고해상도

DOM element load timing

$ionic.beforeEnter- 최소한의 화면 구성, AJAX request, ng-repeat data binding

$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-iniFrame vs 별도 Webview

4.2 이상에서는 iFrame 가능

iOS 버전 상용 개발

Ionic UI 재활용 + swift 기반 plugin 개발코드 재활용도 80% 수준

한줄 기술 교훈 요약

Android 4.2>, iOS 7.0> 앱 상용 개발 가능

단 UI Layer의 복잡도 고려Ionic 성능 Turning 필요

self.next() === undefined