[별천지 세미나] HTML5 is Ready: Fastbook 기술적 분석

HTML5 is Ready :
Fastbook
SKP 김준기
13년 5월 13일 월요일

Who am I ?
• JavaScript 프로그래머
• Mobile Web App 개발
• Jindo Component
• 웹서비스 성능 개선
• 번역
• facebook 그룹 jslounge 운영자
http://www.facebook.com/groups/jslounge

Fastbook에 대한 이야기

2012년 9월 11일
@ TechCrunch DISRUPT SF 2012

당시의 Facebook App
• HTML5? 그냥 단순한 모바일 웹페이지
• http://m.facebook.com
• 현재의 모습과 크게 다르지 않았다.
• 네이티브 변경 이후로 점차적으로
UI에 재미있는 요소들 도입
• 제스처, Swipe Image Viewer

HTML5 Adoption Survey
• 2012/09/05 ~ 2012/09/26
• over 4,000 worldwide software developer

90% 이상이 HTML5를 사용하거나 할 계획
HTML5를 사용하고 있거나
사용할 계획인가요?

Facebook의 결정이
당신에게 어떤 영향인가요?
70% 이상 : 별상관없다.
10% 이상 : 오히려 자신감을 얻었다.

네이티브로 바뀌기 전에
HTML5였다는 걸 알고 있었나요?
무려 절반 이상이 몰랐다!

페이스북이 네이티브로 변경한 사실을 알고 있다면,
앞으로의 HTML5 개발에 어떤 영향을 주는가?
사실을 알았다 - 좌절(17%) 혹은 희망(18%)
몰랐다 - 별생각 없다 (좌절도 덜, 희망도 덜)

그리고 12월
Fastbook의 등장

http://fb.html5isready.com

http://vimeo.com/55486684

fastbook의 특징
• 엄청 빠른 스크롤 속도
• Swipe뷰, 더블탭 줌, 핀치 투 줌/패닝
• 앱 네비게이션 스와이핑/탭핑
• pull to refresh시 모두 리프레시하지 않고 필요한 내용만 업데이트
• 댓글도 스크롤시 자동으로 더보기
• 가로모드지원
• iOS 5 or Android 4.1이상 권장

position:ﬁxed
• 그동안 웹을 앱처럼 사용하지 못했던 가장 큰 이유
• Android ICS(4.0)+, iOS 5+
• 헤더, 푸터 고정
• 컨텐츠영역만 스크롤하려는 UI 구현 시도

커스텀 스크롤러
• position:ﬁxed처럼 일부를 고정하고 지정된 영역만
touch이벤트로 스크롤할 수 있도록 지원
• iScroll과 같은 라이브러리를 사용
• 또는 직접구현
• 기존의 facebook 앱은???
• 컨텐츠영역만 webview사용
• webview의 디폴트 스크롤 사용

계속해서 증가하는 목록의
스크롤 구현하기?
• 고정된 목록의 구현은 대부분 해결 가능
• 계속해서 증가하는 목록의 스크롤을 구현하기는
무척 까다로움

fastbook은 어떻게 했을까?

DOM 트리의
크기증가를 최소화
• 앱이 커지면 DOM tree가 증가.
• DOM tree가 증가하면
레이아웃계산에 걸리는 시간이 늘어난다.
즉 성능이 떨어진다.
• 보여질 레이어의 수가 증가할수록
컴포지팅 성능이 급격히 떨어진다.

Sandbox 컨테이너
• DOM 트리를 iframe으로 나눈다.
• 개발자에게는 seamless
• 이벤트, 위치지정, 스타일링, 자바스크립트 코드등은
부모 창과 자식창(샌드박스)간에 위임

News Feed TimelineStoryView

News Feed TimelineStoryView
sandbox sandbox sandbox

일반적인 스크롤러의 구현
• Viewport를 고정 크기로 지정
• Viewport의 overﬂow:hidden
• 터치 이벤트로, 적절한 스크롤위치를 계산
• 리스트 컨테이너의
top:스크롤위치px 지정 (position:absolute)
• 또는 transform:translate3d(0, 스크롤위치px, 0)

Viewport
List Container

transform:
translate3d(0, 0px, 0)

transform:
translate3d(0, -120px, 0)

transform:
translate3d(0, -250px, 0)

리스트 아이템이
계속 늘어나면
• layout해야할 DOM tree의 크기가 증가
• GPU acceleration할 texture의 크기가 증가
• layout에 걸리는 시간도 점점 증가

스크롤러의 성능문제
• KTH - 하이브리드 앱의 스크롤 성능 개선하기
http://dev.kthcorp.com/2012/06/18/hybrid-
app-scroll-performance-enhancement/
• 각 아이템의 position을 absolute로 변경
• viewport에 보이지 않으면 display:none으로
layout, paint하지 않도록 함

아이템이 계속해서 증가하는
스크롤러의 성능문제
• DOM이 계속해서 증가
• 처리해야할 노드수가 계속해서 증가
• 아이템이 계속 증가한다면
DOM Tree가 커지는 근본적인 문제에는 해답이 없음

fastbook 스크롤러 DOM구조
• 16개의 아이템만 유지
• 각 아이템의 위치는 모두 position:absolute
• 스크롤되면 이 아이템들의 위치가 바뀜
• 모든 아이템들이 id값을 유지

위... 윗장 빼기?

추측
• 16개 정도의 아이템만 유지하는 이유
• DOM 구조 변경을 최소화하기 위해서
• 아이템의 뼈대만 유지
• 스크롤 위치에 근거해, 아이템 내부의 내용을 교체
• 이 후 사이즈를 재고 적당한 위치에 배치

60 fps
• 프레임당 16.6666...ms 안에
페인팅이 반복되어야함.
• 프레임 사이에 시도하는 작업이 16ms 미만이면
스크롤 성능에 영향을 최소화할 수 있다.

예상 가능한 reﬂow 요인
• 아이템 내부의 내용 교체
• 아이템의 사이즈 측정
• 아이템의 위치 변경

아이템 내부의 내용 교체
• 아이템 내용의 템플릿을 가지고
매번 DOM을 생성하여 교체할 것이라고 추측

변경을 예상한 부분

실제 아이템 내용 교체
• fastbook은 리스트의 모든 아이템이
동일한 템플릿으로 표현가능하다는 점에 착안
• DOM을 절대 새로 생성하거나 제거하지 않음
• 아이템의 내용 중
text, 이미지 url, display 여부만 변경

DOM tree의 크기에는 전혀 변화가 없다!

text 교체 성능
• innerHTML
• vs innerText
• vs nodeValue
• vs textContent

text 교체 성능
• innerHTML
• vs innerText
• vs nodeValue
• vs textContent
http://jsperf.com/innerhtml-vs-innertext/12
nodeValue Wins!
tested on Galaxy s3 Android 4.0.4 & iOS 6.1.2

아이템의 사이즈 측정
• getBoundingClientRect
• vs oﬀsetWidth / oﬀsetHeight

아이템의 사이즈 측정
• getBoundingClientRect
• vs oﬀsetWidth / oﬀsetHeight
http://jsperf.com/getboundingclientrect-offsetwidth-offsetheight
offsetHeight Wins!

아이템의 위치 변경
• 항상 GPU 가속을 이용하는게 최선
• css3 transform : translate3d(x, y, z)

3초뒤 이해되는 사진

???

???
개별 아이템의 높이가 유동적이기 때문에
그려보기 전까지 전체 컨테이너의 높이를 알 수 없다.

TaskQueue
• DOM read와 write가 이벤트 큐를 오랜시간동안
블로킹 하지 않고 실행하도록 작업을 분리
• timer로 쪼개서 별도의 이벤트 루프 턴에서 실행
• READ 큐와 WRITE 큐로 분리
• Ext.TaskQueue.requestWrite()
• Ext.TaskQueue.requestRead()

requestRead() : read queue만 비움
requestWrite() : write를 비우고 read queue를 이어서 비움
READ TASK #1 WRITE TASK #1
READ TASK #2
READ TASK #3
READ TASK #4
WRITE TASK #2
WRITE TASK #3
WRITE TASK #4
setTimeout(this.run, 1);
requestAnimationFrame(this.run);
READ 큐 WRITE 큐

AnimationQueue
• 앱이 애니메이션을 실행중일 때,
우선순위가 낮은 함수를 나중에 실행시키게 함.
• 앱이 idle상태일 때 지연된 task들을 실행
• 뉴스 피드를 스크롤하는 중에는 이미지 로딩/렌더링을 하지 않음.
• 애니메이션 실행중에도 함께 실행되어야하는 작업들도 짧은 타이
머 단위로 점진적으로 실행시키는 논블로킹 방식으로 수행
• 터치 이벤트가 항상 최우선권
스크롤이 잘 애니메이션 되도록 함.

Text
Ext.AnimationQueue.onIdle("doSetSrc", this, e);

스크롤 애니메이션중이 아닐 때(idle) 이미지 로딩

관성 스크롤시
감속 지속시간 튜닝
• 네이티브 앱에서는 3초 간 지속,
• 가속은 높이고 감속되는 시간을 1.4초로 줄임.
• 컨텐츠 노출속도를 높일 뿐 아니라,
idle time을 늘리는 효과가 있으므로,
현재 컨텐츠를 읽을 동안 더 많은 백그라운드 작업이
가능해짐.

Web Worker
• XHR/RPC 통신을 UI 쓰레드에서 분리해
Worker 쓰레드에서 처리

News Feed
데이터 최적화
• proxy를 통해 API 호출을 최적화
• HTML -> JSON
• 기존 10개의 아이템당 15~20KB(gzip)
• 10%의 크기로 줄임

Wrap-up
• Sandbox
• DOM 트리의 크기 변화가 전혀 없는 아이템 업데이트
• TaskQueue / AnimationQueue
• Web Worker
• 관성 스크롤 감속시간 튜닝
• 데이터 최적화 (JSON)

References
• http://techcrunch.com/2012/09/11/mark-
zuckerberg-our-biggest-mistake-with-mobile-
was-betting-too-much-on-html5/
• http://www.sencha.com/blog/the-making-of-
fastbook-an-html5-love-story
• http://www.html5rocks.com/en/tutorials/
speed/scrolling/
• http://cubiq.org/iscroll-4

Q & A

고맙습니다 :)

[별천지 세미나] HTML5 is Ready: Fastbook 기술적 분석

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to [별천지 세미나] HTML5 is Ready: Fastbook 기술적 분석

Similar to [별천지 세미나] HTML5 is Ready: Fastbook 기술적 분석 (20)

Recently uploaded

Recently uploaded (6)

[별천지 세미나] HTML5 is Ready: Fastbook 기술적 분석