Successfully reported this slideshow.
Your SlideShare is downloading. ×

Deview 2013 mobile browser internals and trends_20131022

Loading in …3

Check these out next

1 of 48 Ad

More Related Content

Slideshows for you (19)


Similar to Deview 2013 mobile browser internals and trends_20131022 (20)

More from NAVER D2 (20)


Recently uploaded (20)

Deview 2013 mobile browser internals and trends_20131022

  1. 1. Mobile Browser Internals and Trends 김준걸 TL / 웹킷코어연구lab 이형욱 TL / 웹브라우저기술lab NAVER LABS
  2. 2. CONTENTS 0. 2013 Briefing 1. Browser Internals 2. Android WebView Internals and Trend 3. Chromium (Blink) 4. WebKit2 Vs Chromium and Firefox
  3. 3. 0. 2013 Briefing
  4. 4. Mobile Browser Market Share Android iPhone Opera UC Browser Nokia BlackBerry NetFront iPod Touch Chrome Other 28.62% 21.32% 16.1% 11.15% 7.04% 3.17% 2.28% 1.95% 4.25% 4.12% Top9 : 95.88% WebKit based Browsers
  5. 5. WebKit based Browsers u  Amazon Kindle u  PS3 web browser u  Arora u  RockMelt u  BOLT browser u  Safari u  Epippany browser u  SRWare Iron u  Google Chrome u  Shiira u  iCab (version >=4) u  Spuntnik for MorphOS u  Iris Browser u  Stainless u  KonQueror u  Steel for Android u  Midori u  TeaShark u  Nintendo 3DS u  Tizen Browser u  OmniWeb u  Uzbl u  Opera (version >=15) u  Web Browser for S60 (Nokia) u  OWB u  WebOS Browser
  6. 6. History of WebKit in Browser IE WebKit Safari Chrome WebKit2 Chrome Android Blink ~2001 2005 2007 2008 2010 2012 2013 MS World Apple made WebKit Apple opened WebKit iPhone Development Google bought Android iPhone Opened Google opened Chromium WebKit2 Development Google opened Android Chrome for Android Released Chrome Market Share 1st Google forks WebKit with Blink If you can conquer the web browser, you can conquer the world.
  7. 7. WebKit and Blink in 2013 l  Google announced on April 3rd that they would be forking WebKit with new Blink Motivations according to Google: ü  They were not using WebKit2 anyway ü  Simplification of the codebase in Blink l  After forking WebKit with Blink ü  Google removes the concept of ‘port’ as it was defined in WebKit ü  Apple removes the chromium port in WebKit ü  Opera joined WebKit then moved to Blink. ü  New proposal Nix port in WebKit ü  Qt recently announced that they are moving to Blink à  Other companies and communites thinking what to do. à  WebKit developers porting patches from/to Blink/WebKit
  8. 8. 1. Browser Internals
  9. 9. Browser at a High Level Data Persistence UI Code Coverage 5% Browser Engine Rendering Engine WebKit 95% Network I /O JavaScript Engine Graphics S tack
  10. 10. Major Component of WebKit API Layer WebKit and WebKit2 (Embedding API) Bindings (JavaScript API) WebCore (HTML, CSS, DOM, etc) Platform (Network, Storage, Graphics) JavaScriptCore (JavaScript Engine) WTF (Data structures, Threading primitives)
  11. 11. Rendering Loading HTML Parsing Rendering Layout DOM Tree HTML Parser Render Tree attach() CSS Style Sh eet Painting Display Painting Style Rule CSS Parser DOM Tree Render Tree DOM Node Render Layer Render Object DOM Node Render Object DOM Node Render Layer Render Object DOM Node Render Object Render Object DOM Node DOM Node Render Layer Render Object Render Layer
  12. 12. Rendering : DOM Tree and Render Tree DOM Tree <html> Render Tree HTMLDocument 2. addChild() 1. Element 생성 5. setRenderer HTMLHtmlElement RenderView 4. RenderBlock 생성 RenderBlock 3. isRenderable? Yes <head> <title>Hello, Deview!</title> <style>…</style> </head> <body> <div class=‘layer’> isRenderable? No HTMLHeadElement HTMLTitleElement HTMLStyleElement HTMLBodyElement RenderBlock HTMLDivElement <nobr> <span> <a href=>News</a> </span> </nobr> </div> </body> </html> RenderBlock RenderInline HTMLElement HTMLElement HTMLAnchorElement Text RenderInline RenderInline RenderText
  13. 13. Rendering : Render Layer Tree CSS file .layer_example{ …. -webkit-transform: tr anslate3d(0,0,0);} <html> Render Layer Tree RenderView Conditions -  Transparency, Masking RenderBlock RenderRootLayer -  Z-ordering <head> <title>Hello, Deview!</title> <style>…..</style> </head> <body> <div class=‘layer_example’> <nobr> <span> <a href=>News</a> </span> </nobr> </div> </body> </html> -  Overflow clip -  Reflections, Shadows, Transforms -  Positioned content -  <canvas>, <video> RenderBlock requiresLayer() RenderBlock Z-ordering RenderLayer RenderInline RenderInline RenderInline RenderText GraphicsLayer Graphics Layer Tree
  14. 14. Rendering : Render Style Tree Parsing HTML Rendering HTML Parser Layout DOM Tree Render Tree attach() CSS Style Sh eet CSS p.div{ margin-top:3px; } .error{ color:red; } Painting Painting Style Rule CSS Parser Class RenderStyle { RenderStyle(RenderStyle parent); CSSStyleSheet CSSRule Selectors p Display div Declaration margin-to p Color color(); void setColor(Color); IntRect initialColor(); CSSRule 3px Selectors .error Render Style Tree Length marginTop(); … void setUserSelect(); … DataRef<InheritedData> Inherited; Declaration color red }
  15. 15. Rendering : Dump Render Tree (DRT)
  16. 16. Painting : SW and HW Rendering l  S/W Rendering Path CPU Graphic Buff er CPU Graphic Buff er l  H/W Accelerated Rendering Path Layering Compositing
  17. 17. Painting : Tiled Backing Store Tile is a rectangle with a texture in Checkboard pattern. Backing Store is off-screen buffer The effect of using Tiled Backing Store is Progressive Rendering : - Pan/Scroll - Zoom in/out Each Tile is a texture for GPU Core Check Di rty Tiles Update T ile Buffer Paint Tile s
  18. 18. WebView::loadUrl 20,000~50,000 Calls Page Frame Frame Loader Docuement layout() CachedResource Loader If Not cached, create If cached, setDocument Docuement Loader addData() Cache CachedResource Create/load layout() FrameView paintContents() RenderLayer paintLayer() RenderView paint() WebView Database RenderObject Save/Load/Remove Cache MainResource Loader SubResource Loader Load Html file Cache Manager Load Image, JS, CSS files Create/Remove Cache WebView Worker ResourceHandle Platform’s Network Stack LoadListener Save/Remove Cache WebView Cache.db
  19. 19. WebKit Source Code in numbers <>
  20. 20. 2. Android WebView Internals and Trend
  21. 21. Android WebKit API Layer talk this WebView Framework Java Layer JNI (Java/C++) WebKit and WebKit2 (Embedding API) Bindings (JavaScript API) WebCore (HTML, CSS, DOM, etc) Platform (Network, Storage, Graphics) JavaScriptCore (JavaScript Engine) WTF (Data structures, Threading primitives) Chromium Network Stack V8 Skia Platform Layer
  22. 22. Jelly-Bean’s WebView Framework new class android class inner class create 22
  23. 23. ICS Jelly-bean WebView WebViewClassic CookieManager CookieManagerClassic Classic ??? GeolocationPermission GeolocationPermissionClassic 23
  24. 24. New WebView WebViewClassic WebView WebViewFactory WebViewProvide r Chromium powered WebView new class in JB
  25. 25. Chromium powered WebView AwGeolocationPermissions AwCookieManage r AwContents new class AwContentsClient Chromium class inner class create 25
  26. 26. Chromium powered WebView ContentView Android Chromium의 Process 생성 특징 -  Device의 CPU Feature/Core수 및 Memory Class를 체크하여 Renderer Process를 동적으로 할당 à  하지만 Chromium powered WebView는 1-Process로 동작할 가능성 有 AndroidBrowserProcess normalizeMaxRenderProcess() Max((Memory class-8)/8,1) Memory Class Baseline : 16 à 1-Process 24 à 2-Process SandboxedProcessLauncher CPU Feature/Core 수 체크 SandboxedProcessConnection Bind Service SandboxedP rocess Service0 Sandboxed Process Service1 … Sandboxed Process Service5 26
  27. 27. 3. Chromium (Blink)
  28. 28. Chromium powered WebView란? “Open Source Browser Engine인 Chromium 엔진기반의 API Suites로, 기존 Android WebView와 1:1 호환성을 가진 새로운 렌더링 엔진.” public final class WebViewFactory { in AOSP public static final String WEBVIEW_EXPERIMENTAL_PROPERTY = "persist.sys.webview.exp"; private static final String DEPRECATED_CHROMIUM_PROPERTY = "webview.use_chromium"; // Default Provider factory class name. // TODO: When the Chromium powered WebView is ready, it should be the default factory class. private static final String DEFAULT_WEBVIEW_FACTORY = "android.webkit.WebViewClassic$Factory"; private static final String CHROMIUM_WEBVIEW_FACTORY = ""; private static final String CHROMIUM_WEBVIEW_JAR = "/system/framework/webviewchromium.jar"; /** in chromium * Exposes the native AwContents class, and together these classes wrap the ContentViewCore * and Browser components that are required to implement Android WebView API. This is the * primary entry point for the WebViewProvider implementation; it holds a 1:1 object * relationship with application WebView instances. */ @JNINamespace("android_webview") public class AwContents {
  29. 29. Chromium 이란? 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 inclu ded in release supports NPAPI plugins, includi ng the one from Adobe PDF support custom (non-free) plugin inclu ded in release downloads and displays with s ystem PDF viewer Code Tested by Chrome developers May be modified by distributio ns Sandbox Always on Depending on the distribution Quality Assurance New releases are tested before sending to users Depending on the distribution
  30. 30. Chromium을 누가 사용하나?
  31. 31. Chromium powered WebView의 특징 AOSP WebView Chromium WebView Chromium V ersion WebKit r.84325 (Chromium 12.0.74 2) Latest Chromium (Chromium 31.0.1650. 11) HTML5 298 414 CSS3 45% 77% DevTool X O Process single-process single-process Threads 4 12 Comments Android ICS부터 Update 없음. PC와 동일한 디버깅 환경 제공 multi-process로 switch 가능한 구조 I/O Thread, Compositor Thread, GPU Process Thread, etc… * Galaxy Nexus 기준
  32. 32. Chromium powered WebView의 새로운 기능들… Chromium Feature Dashboard: <Remote Web Inspector> <HTML5 WebRTC> <HTML5 WebAudio API>
  33. 33. Chromium powered WebView Status < Peter Beverloo >
  34. 34. Chromium powered WebView의 구조 Android Apps Chromium pow ered WebView Chromium Test Shell Chrome Browser Browser Components ( autocomple, autofill, bookmark, devtools, download, favicon, history, omibox … ) Blink Chromium Content API Content (Multi-process-impl) Blink(WebKit)
  35. 35. Why multi-process architecture? 기존 브라우저의 문제점 •  현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조 •  과거의 OS는 단일 사용자, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침 •  단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴 문제해결을 위한 접근 •  절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함 •  최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정성에 영 향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
  36. 36. Multi Process Architecture Browser Process와 Renderer Process의 연결 구조 Renderer Process의 각 View 역시 Browser Process에 연결 고리를 가짐 각 프로세스별로 입출력 을 위한 스레드가 별도로 존재 Renderer Process에 WebKi t 렌더링 엔진 존재
  37. 37. Inter-process communication (IPC) Browser Process IPC •  Browser Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨 •  Main Thread와의 메시지 교환은 IPC::ChannelProxy를 통해 이루어짐 •  I/O Thread를 사용하는 이유는 성능상 영향을 많이 주는 네트워크 처리 요구 메시지 등을 전담하여 처리 함으로써 사용자 인터페이스에 영향을 주지 않도록 하기 위함 •  I/O Thread 내부에서 처리할 메시지를 걸러내기 위해 ChannelProxy::MessageFilter 사용 Renderer Process IPC •  Renderer Process 내에서 별도의 I/O Thread가 IPC를 담당하게 됨 •  웹 페이지 렌더링을 비롯한 기타 작업은 Render Thread (Main Thread)에서 이루어짐 •  스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능
  38. 38. Multi Process Architecture in detail Browser Process IPC RenderWidgetHost RenderViewHost Manager WebContents SiteInstance RenderViewHost RenderProcessHost RenderWidgetHost RenderViewHost 2 1 WebContents SiteInstance RenderProcessHost RenderWidgetHost RenderViewHost Manager RenderViewHost Main Thread RenderMainThread (Single Process Mode) Process Launcher Thread File Thread Cache Thread DB Thread UI Thread Renderer Process Renderer Process Main Thread RenderWidget WebKit RenderWidget I/O Thread RenderView 6 Main Thread 4 5 IO Thread RenderWidget RenderView RenderView WebKit WebKit I/O Thread 3
  39. 39. Multi-process resource loading •  Renderer Process는 독립적인 I/O Thread를 통해 Browser Process에 접근. •  Browser Process의 I/O Thread에서 ResourceMessageFilter로 요청을 Intercept. •  Network Stack이 Browser Process에 Embedded된 구조의 특징 à Socket pool and connection limits, Socket reuse, Socket late-binding, Consistent se ssion state, Global resource and network optimizations, Predictive optimizations
  40. 40. GPU Process •  GPU Process의 구조적 특징: Security, Robustness, Uniformity, Parallelism •  Client(Render Process): GL Command를 생성, Ring Buffer에 Insert à 일반적인 페이지의 경우 Texture Upload용으로 사용, HTML5 Canva/WebGL은 직접 GL Command를 사용 •  Server(GPU Process): Command를 fetch, execution. •  GL command는 GL ES 2.0 API와 거의 유사한 Async command GL command example OP(BindBuffer) OP(BindFramebuffer) OP(BindRenderbuffer) OP(BindTexture) /* 261 */ /* 262 */ /* 263 */ /* 264 */
  41. 41. 4. WebKit2 vs Chromium and Firefox
  42. 42. WebKit vs WebKit2 vs Chromium Webkit Webkit2 Chromium
  43. 43. Chromium
  44. 44. WebKit2
  45. 45. Firefox
  46. 46. Firefox : asm.js EMScripten Clang LLVM C++ IR asm.js Link JS WebGL
  47. 47. Q&A
  48. 48. THANK YOU