[d2 오픈세미나]1.무한스크롤성능개선

반응형 무한 스크롤 개발 및 성능 튜닝

in MobileWeb

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

http://www.youtube.com/watch?v=Si1InWf4JMo

http://www.youtube.com/watch?v=NSPL7j9r6Og

5 / 반응형 무한 스크롤 개발 및 성능 튜닝

1) 구조적인 문제

…

컨텐츠의 양이 늘어날수록

마크업도 늘어나는 구조적 문제


2) DOM Recycle 구조

DOM

Wrapper

고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경

단말기 화면

컨텐츠의 양이 늘어나더라도

마크업의 수는 고정


화면에 표현 할 컨텐츠 정보 컨텐츠를 표현한 고정 마크업

…




DOM

Wrapper

고정 개수 (5개)의 DOM을 순환하면서 DOM의 내용을 컨텐츠(9개)로 변경

고정좌표 (position:absolue)

좌표기준점 (position:relative)

단말기 화면

각 DOM의 좌표 계산은?


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의 크기


4) 높이값을 알 수 없는 경우?

???

이미지 로딩 중

height

Img태그의 onload 이벤트 - 비동기식 방식 - 순차적인 DOM의 높이 구하기에는 적합하지 않음

이미지 로딩 이후에 계산

• 이미지와 같은 외부 요소의 로딩이 완료되지 않은 경우


4) 높이값을 알 수 없는 경우?

IMG태그의 complete 의 사용

Complete 속성 : Img태그의 로딩 여부 확인 - 정상 로딩 및 에러(404 Error) 여부가 결정 된 경우 true - 로딩 중 일 경우 false

2. 이젠 성능이 문제


1) 웹에서 성능 향상이란?

브라우저 성능 향상

브라우저 성능 최대화

브라우저 랜더링 방식 이해

브라우저 성능 최대화


2) 브라우저 랜더링 과정

계산 반영

Render Layer

대상 추출



div (DOM2)

div (DOM1)

div (DOM3)

div (DOM4) div

(DOM5)

div (DOM6)

body

html

DOM Tree


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는 화면에 보여지는 영역을 기준으로 구성



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



크롬의 Timeline으로 본 브라우저 랜더링 과정

Recalculate Style : 엘리먼트에 스타일이 적용될 때 발생 Composite Layers : 변경되지 않는 각각의 RenderLayer를 합성할 때 발생



동적인 동작이 필요한 경우에, 실제 변경되는 부분은 이동하는 물체의 주변만 변경

3) Layer


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

http://www.html5rocks.com/en/tutorials/speed/layers/basic.html

http://www.html5rocks.com/en/tutorials/speed/layers/animatedlayer.html


4) 성능 끌어올리기

DOM을 이동하는 작업

Layout 작업으로 Reflow 발생

Layout이 아닌 Composite Layer를 활용


A. Layout 변경을 유발하는 속성

5) Composite Layer 활용하기


B. Paint 변경을 유발하는 속성



C. Composite Layers 를 유발하는 속성

transform - translate(3d) - sale(3d) - rotate(3d) - …

opacity



Left, top, right, bottom 변경 안하면….

어떻게 DOM을 이동하라는 거지?



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



OpenGL

texture

texture

texture

GraphicLayers RenderLayers

Video Memory

CPU GPU

6) 하드웨어 가속 활용하기


하드웨어 가속은 다음과 같은 속성을 사용할 경우 적용된다.

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) 하드웨어 가속 활용하기


데모 – 애니메이션 화면 튜닝하기

7) 데모를 통한 성능 향상 기법 확인

Step1. layout 변경이 되는 요소를 transform이나 opacity로 변경한다.

Step2. 하드웨어 가속을 적용하여 각 box를 Layer로 구성한다.


경험적으로

8) 하드웨어 가속 주의점

하드웨어 가속을 남용하지 말자

• S/W 가속을 지원하는 안드로이드 2.x는 하드웨어를 사용할 경우 더 느려짐

• Android 4.0 은 단말기 별로 선별적으로 하드웨어 가속을 주어야 함

• Android 4.1 이상, iOS는 하드웨어 가속을 적용하는 것이 효과적임

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


반응형 무한 스크롤 컴포넌트

http://jindo.dev.naver.com/jindo_home/Mobile.html

감사합니다.

[d2 오픈세미나]1.무한스크롤성능개선

Technology