[D2 오픈세미나]1.무한스크롤성능개선

1. 반응형 무한 스크롤 개발 및 성능 튜닝
in MobileWeb

2. Email : sculove@gmail.com
Blog : http://sculove.pe.kr
Linked :
http://me2.do/G7dQOWOy
손찬욱
네이버 공통플랫폼개발랩
LG CNS 공공 S/W 아키텍처팀
Jindo Mobile Component 개발
네이버 모바일웹 기술지원
“쉽고 빠른 모바일 웹 UI 개발” 저자

3. 시스템 스크롤
(Scroll)
보이는 영역보다 정보량이 많을 경우
정보를 보기 위해 움직이는 것
무한
(Infinite)
헤아릴 수 없는 개수
즉, N개의 정보
반응형
(Responsive)
디스플레이 종류, 화면의 크기에 따라
자동으로 최적화되는
반응형 무한 스크롤 ???
무한
(Infinite)
시스템 스크롤
(Scroll)

4. 1. 반응형 무한 스크롤 어떻게 만들었나?
http://www.youtube.com/watch?v=Si1InWf4JMo
http://www.youtube.com/watch?v=NSPL7j9r6Og

5. 5 / 반응형 무한 스크롤 개발 및 성능 튜닝
1) 구조적인 문제
…
컨텐츠의 양이
늘어날수록
마크업도 늘어나는
구조적 문제

6. 6 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
단말기 화면
컨텐츠의 양이
늘어나더라도
마크업의 수는 고정

7. 7 / 반응형 무한 스크롤 개발 및 성능 튜닝
화면에 표현 할 컨텐츠 정보컨텐츠를 표현한 고정 마크업
…
2) DOM Recycle 구조

8. 8 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
고정좌표
(position:absolue)
좌표기준점
(position:relative)
단말기 화면
각 DOM의 좌표 계산은?

9. 9 / 반응형 무한 스크롤 개발 및 성능 튜닝
3) DOM의 좌표는 어떻게 계산하는가?
Height1
Height2
Height
…
X2, Y2
X1, Y1 x1,y1 = (0px, 0px)
x2,y2 = (0px, DOM1 까지의 높이합)
…
xn,yn = (0px, DOM(n-1) 까지의 높이합)
DOM1
DOM2
Height
= 총 컨텐츠의 높이
= 사용자에 의해 스크롤 될 수 있는 크기
= Wrapper의 크기

10. 10 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
???
이미지 로딩 중
height
Img태그의 onload 이벤트
- 비동기식 방식
- 순차적인 DOM의 높이 구하기에는 적합하지 않음
이미지 로딩 이후에 계산
• 이미지와 같은 외부 요소의
로딩이 완료되지 않은 경우

11. 11 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
IMG태그의 complete 의 사용
Complete 속성 : Img태그의 로딩 여부 확인
- 정상 로딩 및 에러(404 Error) 여부가 결정 된 경우 true
- 로딩 중 일 경우 false

12. 2. 이젠 성능이 문제

13. 13 / 반응형 무한 스크롤 개발 및 성능 튜닝
1) 웹에서 성능 향상이란?
브라우저 성능 향상
브라우저 성능 최대화
브라우저 랜더링 방식 이
해
브라우저 성능 최대화

14. 14 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) 브라우저 랜더링 과정
계산 반영
Render
Layer
대상 추출

15. 15 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) 브라우저 랜더링 과정
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)div
(DOM5)
div
(DOM6)
body
html
DOM Tree

16. 16 / 반응형 무한 스크롤 개발 및 성능 튜닝
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM5)
div
(DOM6)
body
html
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM6)
body
html
DOM Tree Render Tree
RenderTree는 화면에 보여지는 영역을 기준으로 구성
2) 브라우저 랜더링 과정

17. 17 / 반응형 무한 스크롤 개발 및 성능 튜닝
div
(DOM2)
div
(DOM1)
div
(DOM3)
div
(DOM4)
div
(DOM6)
body
html
Render Tree
div
(DOM4)
RenderLayer Tree
Div(DOM4는 transform 3d)로 레이어가 구성되는 영역
div
(DOM4)
GraphicLayer Tree
2) 브라우저 랜더링 과정

18. 18 / 반응형 무한 스크롤 개발 및 성능 튜닝
크롬의 Timeline으로 본 브라우저 랜더링 과정
 Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생
 Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생
2) 브라우저 랜더링 과정

19. 19 / 반응형 무한 스크롤 개발 및 성능 튜닝
동적인 동작이 필요한 경우에, 실제 변경되는 부분은 이동하는 물체의 주변만 변
경
3) Layer

20. 20 / 반응형 무한 스크롤 개발 및 성능 튜닝
Composite Layer 는 레이어 병합(composite)을 통해
새로운 화면을 구성하여 실제 화면에 출력하는 기능을 한다.
Shape layer
back layer
 모든 페이지는 Root layer를 가진다. (링크)
 3d, perspective transform, CSS Animation, CSS filter를 사용하는 경우 (링크)
 VIDEO, CANVAS 태그를 사용하는 경우
 Flash나 ActiveX를 사용하는 경우
 자식 엘리먼트가 layer로 구성되어 있을 경우
 z-index가 낮은 형제 엘리먼트가 layer로 구성되어 있을 경우, 대상 엘리먼트도 layer로 구성됨
3) Layer

21. 21 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 성능 끌어올리기
DOM을 이동하는 작업
Layout 작업으로
Reflow 발생
Layout이 아닌 Composite Layer를 활용

22. 22 / 반응형 무한 스크롤 개발 및 성능 튜닝
A. Layout 변경을 유발하는 속성
5) Composite Layer 활용하기

23. 23 / 반응형 무한 스크롤 개발 및 성능 튜닝
B. Paint 변경을 유발하는 속성
5) Composite Layer 활용하기

24. 24 / 반응형 무한 스크롤 개발 및 성능 튜닝
C. Composite Layers 를 유발하는 속성
 transform
- translate(3d)
- sale(3d)
- rotate(3d)
- …
 opacity
5) Composite Layer 활용하기

25. 25 / 반응형 무한 스크롤 개발 및 성능 튜닝
Left, top, right, bottom 변경 안하면….
어떻게 DOM을 이동하라는 거지?
5) Composite Layer 활용하기

26. 26 / 반응형 무한 스크롤 개발 및 성능 튜닝
style 대신 transform과 opacity를 사용하세요.
위치 변경
display 변경
transform : translate(nPx,nPx);
transform : translate3d(nPx,nPx,nPx);
transform : translateX(nPx);
transform : translateY(nPx);
transform : translateZ(nPx);
opacity : 0 … 1
5) Composite Layer 활용하기

27. 27 / 반응형 무한 스크롤 개발 및 성능 튜닝
5) Composite Layer 활용하기

28. 28 / 반응형 무한 스크롤 개발 및 성능 튜닝
OpenGL
texture
texture
texture
GraphicLayersRenderLayers
Video Memory
CPU GPU
6) 하드웨어 가속 활용하기

29. 29 / 반응형 무한 스크롤 개발 및 성능 튜닝
하드웨어 가속은 다음과 같은 속성을 사용할 경우 적용된다.
 TRANSFORM 3D
• -webkit-transform : translate3d(n,n,n)
• -webkit-transform : translateZ(n)
• -webkit-transform : rotateX(angle)
• -webkit-transform : rotateY(angle)
• -webkit-transform : rotate3d(n,n,n,angle)
• -webkit-transform : scaleZ(n)
• -webkit-transform : scale3d(n,n,n)
• -webkit-transform : perspective(n)
 opacity
…
6) 하드웨어 가속 활용하기

30. 30 / 반응형 무한 스크롤 개발 및 성능 튜닝
데모 – 애니메이션 화면 튜닝하기
7) 데모를 통한 성능 향상 기법 확인
Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다.
Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다.

31. 31 / 반응형 무한 스크롤 개발 및 성능 튜닝
경험적으로
8) 하드웨어 가속 주의점
하드웨어 가속을 남용하지 말자
• S/W 가속을 지원하는 안드로이드 2.x는 하드웨어를 사용할 경우 더 느려짐
• Android 4.0 은 단말기 별로 선별적으로 하드웨어 가속을 주어야 함
• Android 4.1 이상, iOS는 하드웨어 가속을 적용하는 것이 효과적임

32. 3. 반응형 무한 스크롤
jindo.m.InfiniteCard

33. 33 / 반응형 무한 스크롤 개발 및 성능 튜닝
반응형 무한 스크롤 컴포넌트
http://jindo.dev.naver.com/jindo_home/Mobile.html

34. 감사합니다.