안드로이드 웹뷰의 모든것 이형욱 NAVER / Whale Core 웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.

2. 안드로이드 웹뷰의 모든 것
NAVER 웨일 이형욱 (TL)

3. 발표자 소개
• 이형욱 (hyungwook.lee@navercorp.com)
• NAVER 웨일팀
• Tech Leader
• 웨일 브라우저 (데탑, 모바일) 개발
• 네이버앱 크로스워크 엔진 개발
• WebKit Committer
• Chromium Contributor

4. 목차
Chapter 1. Android WebView overview
1. 안드로이드 웹뷰란 무엇인가?
2. 안드로이드 웹뷰의 역사
3. 안드로이드 웹뷰와 파편화
4. WebKit 브라우저 엔진의 역사
5. 안드로이드 웹뷰의 구조
6. 크롬과 크로미움의 차이점
Chapter 2. How chromium works
1. 브라우저는 어떻게 동작 하는가?
2. HTML Parser
3. CSS Parser
4. Java Script Engine
5. Render Tree
6. Layout
7. Paint
8. VSync 기반 멀티 쓰레드 렌더링
Chapter 3. How chromium powered WebView works
1. 안드로이드에서 크로미움은 어떻게 동작 하는가?
2. 웨일 브라우저의 뷰 구조
3. 크로미움 웹뷰의 구조적 차이점
4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하)
5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하)
6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상)
7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)

5. Chapter 1. Android WebView overview
[Source: http://chittagongit.com//images/android-icon-transparent-background/android-icon-transparent-background-16.jpg]

6. Web content in a box
 Powers browsers such as AOSP Browser
 Displays almost all mobile banner ads
 Can be used to create portable HTML-based apps
 Often intermixed imperceptibly with native Views
<- Android View
<- Android WebView
1. 안드로이드 웹뷰란 무엇인가?

7. Android <= J: custom WebKit-based “classic” WebView
Android K: Chromium 30 / 33-based WebView
Android L: Unbundled Evergreen WebView
http://com.odroid.com/sigong/nf_file_board/nfile_board_view.php?keyword=&tag=ODROID-U3&bid=214 http://www.ibtimes.co.uk/moto-g-finally-tastes-android-5-0-lollipop-via-cyanogenmod-12-unofficial-build-1475895
2. 안드로이드 웹뷰의 역사

8. • 안드로이드 제조사에서 경쟁적으로 WebKit을 Customization
• 안드로이드 버전별 서로 다른 WebKit을 사용하고 있음
1) Android 4.3 이전 버전은 WebKit 기반의 렌더링 엔진을 사용
2) Android 4.4 부터는 Blink 기반의 렌더링 엔진으로 교체
• 현재는 사용자 웹뷰 업데이트 유무에 따라 서로 다른 버전을 사용
HTML5 Test.com CSS3 Test.com
삼성 갤럭시 S4 472 59%
삼성 갤럭시 노트 2 404 47%
엘지 옵티머스 G 395 45%
엘지 옵티머스 뷰 395 45%
팬택 베가 No 6 318 45%
갤럭시 넥서스 (AOSP) 267 45%
3. 안드로이드 웹뷰와 파편화

9. 4. WebKit 브라우저 엔진의 역사
KHTML, KJS (1999.05 ~)
Blink (2013.04 ~)
WebKit (2001 ~)
Open Source in 2005
Apple Forks KHTML, KJS in 2001
Google Forks WebKit in 2013

10. 5. 안드로이드 웹뷰의 구조
Blink
(웹엔진)
Content
(멀티 프로세스 지원 레이어)
Content API
Blink
Chromium
Android
WebView
Framework
Browser
Framework

11. Google Chrome Chromium
Logo Colorful Blue
Crash reporting Yes, if you turn it on None
User metrics Yes, if you turn it on No
Video and audio tags AAC, MP3, Vorbis and Theora Vorbis and Theora by default
Adobe Flash
custom (non-free) plugin
included in release
supports NPAPI plugins,
including the one from Adobe
PDF support
custom (non-free) plugin
included in release
downloads and displays with
system PDF viewer
Code Tested by Chrome developers May be modified by distributions
Sandbox Always on Depending on the distribution
Quality Assurance
New releases are tested before
sending to users
Depending on the distribution
6. 크롬과 크로미움의 차이점

12. Chapter 2. How chromium works
[Source: http://alien.slackbook.org/blog/watch-netflix-video-in-your-chromium-browser-this-time-for-real/]

13. 1. 브라우저는 어떻게 동작 하는가?

14. DOM: Document Object Model
• Document = HTML, well-formed XML
• Object Model = Data + Method
Standard way for accessing and manipulating
2. HTML Parser

15. CSSOM: CSS Object Model
• DOM과 비슷하게 CSS도 CSSOM이 있음
• CSS는 HTML Element의 스타일을 정의
• 외부 링크로 정의된 경우 렌더링이 블로킹 됨
• Cascade down 개념을 구현하기 위해 트리 구조
3. CSS Parser

16. 4. Java Script Engine

17. Recalculate Style의 결과
• Render Tree = DOM Tree + CSSOM Tree
• DOM Tree와 Render Tree는 1:1 관계가 아님
• 화면에 보이는 요소들을 중심으로 구성
5. Render Tree (1/2)

18. 5. Render Tree (2/2)
DOM CSSOM
Render Tree
[Source: Critical Rendering Path By llya Grigorik]

19. Layout 알고리즘
• 각 박스의 넓이는 viewport (ICB)기준
• 각 박스의 높이는 contents (fonts)를 기준
• 윈도우 사이즈를 변경 하거나 폰트 변경 시 Global Layout
• Dirty bit system으로 incremental layout
6. Layout

20. 1024
768
7. Paint

21. 8. VSync 기반 멀티 쓰레드 렌더링 (1/6)
[Source: Chrome Graphics - BlinkOn 1]

22. [Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (2/6)

23. [Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (3/6)

24. Scrolling
Animation
Pinch Zoom
[Source: Life of a pixel 2018]
8. VSync 기반 멀티 쓰레드 렌더링 (4/6)

25. [Source: Chrome Graphics - BlinkOn 1]
8. VSync 기반 멀티 쓰레드 렌더링 (5/6)

26. A modern 2D graphics library
SkPicture, SkPicturePlayBack:
Records and replay draw operations.
[http://www.dorothybrowser.com/parallelizing-canvas-rendering/]
8. VSync 기반 멀티 쓰레드 렌더링 (6/6)

27. Chapter 3. How chromium powered WebView works
[Source: https://play.google.com/apps/testing/com.google.android.webview ]

28. 앱 프로세스
서비스 프로세스
SurfaveView
서비스 프로세스
1. 안드로이드에서 크로미움은 어떻게 동작 하는가?
[Source: Chrome Graphics - BlinkOn 1]

29. 2. 웨일 브라우저의 뷰 구조
SurfaveView
FrameLayout
FrameLayout

30. Whale (Chrome)
 SurfaceView
 Vsync based rendering
 Async uploads using
EGLImage and
glTexSubImage2D()
Chromium powered webview
 “Draw functor”: inject draw calls into
system GL context.
 Android based rendering
 Private API. The WebView injects a
callback onto the display list.
3. 크로미움 웹뷰의 구조적 차이점 (1/2)
[Source: Android WebView rendering BlinkOn 3]
Graphics components

31. Whale (Chrome)
- Multi-process
 UI thread
 GPU Process
 Texture upload thread
 Per renderer process:
o Blink thread
o Compositor thread
o Raster thread
Chromium WebView
- Single-process (Multi-process)
 Combined UI + Compositor thread
 Android RenderThread (+in-process
GPU thread)
 Canvas/WebGL GPU thread
 Blink thread
 Raster thread
[Source: Android WebView rendering BlinkOn 3]
Architecture
3. 크로미움 웹뷰의 구조적 차이점 (2/2)

32. 4. Android Rendering Pipeline <= Kit
[Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]
[MainThread]
4. 안드로이드 렌더링 파이프 라인 (KitKat 4.4 이하)

33. 5. 크로미움 웹뷰 렌더링 파이프 라인 (KitKat 4.4 이하)

34. 6. 안드로이드 렌더링 파이프 라인 (Lollipop 5.0 이상)
[Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]

35. 7. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)

36. [Source: http://mail.cfanz.cn/index.php?c=article&a=read&id=210306]
8. 크로미움 웹뷰 렌더링 파이프 라인 (Lollipop 5.0 이상)

37. Thank You.