15. 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
16. Graphics Layer 생성 조건
● 3D 또는 perspective transform CSS 속성
● video
● canvas 2D/3D
● CSS filter
● 투명도를 부여하는 CSS animation 수행
● z-index가 낮은 형제가 composition layer를 갖는 경우
17. GPU 기반 Layer 합성
● CPU로 생성된 graphics buffer는 해당 HTML의 속성이 변경되지 않는 한 계속
유지되어 다음 합성에 재활용됨
18. 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이상 일부 지원
19. 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
20. 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;
}
21. 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
22. JavaScript Animation: vsync
● 현재 LCD buffer로 frame을 flush후 다음 frame을 보내주기 위해서 시스템단에
서 발생 시켜주는 signal
● webkit엔진은 vsync를 requesAnimationFrame에 통합하여 제공
23. Hybrid Application - Native 부분
Cordova plugin
Push
BLE
Splash screen
Cipherstorage
Camera
Image cropper
29. Page Navigation Animation
성능 저하 요인 분석
DOM element load timing
-filter: blur
-border-radius
gradient
QHD 단말의 고해상도
30. DOM element load timing
$ionic.beforeEnter
- 최소한의 화면 구성, AJAX request, ng-repeat data binding
$ionic.afterEnter
- 이미지, SVG등 화면 적재, loading icon
$ionic.loaded
- DOM 적재시
$ionic.unloaded
- DOM 제거시
31. -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"
32. 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');
}
}
}
33. URL 기반 3rd party 솔루션 Plug-in
iFrame vs 별도 Webview
4.2 이상에서는 iFrame 가능
34. iOS 버전 상용 개발
Ionic UI 재활용 + swift 기반 plugin 개발
코드 재활용도 80% 수준
35. 한줄 기술 교훈 요약
Android 4.2>, iOS 7.0> 앱 상용 개발 가
능
단 UI Layer의 복잡도 고려
Ionic 성능 Turning 필요