[d2 오픈세미나]1.무한스크롤성능개선
DESCRIPTION
[D2 오픈세미나]1.무한스크롤성능개선TRANSCRIPT
Email : [email protected] Blog : http://sculove.pe.kr Linked : http://me2.do/G7dQOWOy
손찬욱
네이버 공통플랫폼개발랩 LG CNS 공공 S/W 아키텍처팀 Jindo Mobile Component 개발 네이버 모바일웹 기술지원 “쉽고 빠른 모바일 웹 UI 개발” 저자
시스템 스크롤 (Scroll)
보이는 영역보다 정보량이 많을 경우 정보를 보기 위해 움직이는 것
무한 (Infinite)
헤아릴 수 없는 개수 즉, N개의 정보
반응형 (Responsive)
디스플레이 종류, 화면의 크기에 따라 자동으로 최적화되는
반응형 무한 스크롤 ???
무한 (Infinite)
시스템 스크롤 (Scroll)
1. 반응형 무한 스크롤 어떻게 만들었나?
http://www.youtube.com/watch?v=Si1InWf4JMo
http://www.youtube.com/watch?v=NSPL7j9r6Og
6 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
단말기 화면
컨텐츠의 양이 늘어나더라도
마크업의 수는 고정
8 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) DOM Recycle 구조
DOM
Wrapper
고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경
고정좌표 (position:absolue)
좌표기준점 (position:relative)
단말기 화면
각 DOM의 좌표 계산은?
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 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
???
이미지 로딩 중
height
Img태그의 onload 이벤트 - 비동기식 방식 - 순차적인 DOM의 높이 구하기에는 적합하지 않음
이미지 로딩 이후에 계산
• 이미지와 같은 외부 요소의 로딩이 완료되지 않은 경우
11 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 높이값을 알 수 없는 경우?
IMG태그의 complete 의 사용
Complete 속성 : Img태그의 로딩 여부 확인 - 정상 로딩 및 에러(404 Error) 여부가 결정 된 경우 true - 로딩 중 일 경우 false
15 / 반응형 무한 스크롤 개발 및 성능 튜닝
2) 브라우저 랜더링 과정
div (DOM2)
div (DOM1)
div (DOM3)
div (DOM4) div
(DOM5)
div (DOM6)
body
html
DOM Tree
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 / 반응형 무한 스크롤 개발 및 성능 튜닝
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 / 반응형 무한 스크롤 개발 및 성능 튜닝
크롬의 Timeline으로 본 브라우저 랜더링 과정
Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생 Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생
2) 브라우저 랜더링 과정
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 / 반응형 무한 스크롤 개발 및 성능 튜닝
4) 성능 끌어올리기
DOM을 이동하는 작업
Layout 작업으로 Reflow 발생
Layout이 아닌 Composite Layer를 활용
24 / 반응형 무한 스크롤 개발 및 성능 튜닝
C. Composite Layers 를 유발하는 속성
transform - translate(3d) - sale(3d) - rotate(3d) - …
opacity
5) Composite Layer 활용하기
25 / 반응형 무한 스크롤 개발 및 성능 튜닝
Left, top, right, bottom 변경 안하면….
어떻게 DOM을 이동하라는 거지?
5) Composite Layer 활용하기
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 활용하기
28 / 반응형 무한 스크롤 개발 및 성능 튜닝
OpenGL
texture
texture
texture
GraphicLayers RenderLayers
Video Memory
CPU GPU
6) 하드웨어 가속 활용하기
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 / 반응형 무한 스크롤 개발 및 성능 튜닝
데모 – 애니메이션 화면 튜닝하기
7) 데모를 통한 성능 향상 기법 확인
Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다.
Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다.
31 / 반응형 무한 스크롤 개발 및 성능 튜닝
경험적으로
8) 하드웨어 가속 주의점
하드웨어 가속을 남용하지 말자
• S/W 가속을 지원하는 안드로이드 2.x는 하드웨어를 사용할 경우 더 느려짐
• Android 4.0 은 단말기 별로 선별적으로 하드웨어 가속을 주어야 함
• Android 4.1 이상, iOS는 하드웨어 가속을 적용하는 것이 효과적임