SlideShare a Scribd company logo
Android Chromium Rendering Pipeline
이형욱 (hyungwook.lee@navercorp.com)
시스템스컴퓨팅G / NAVER LABS
2015-04
2
0. Contents
Chapter 1: 브라우저 렌더링에서의 Critical Path란 무엇인가?
① Summary of browser’s main flows
② HTML Parser
③ JavaScriptEngine
④ Render Tree, Layout
⑤ Rendering Pipeline Runs on Main Thread
⑥ New Rendering Model
⑦ GPU Accelerated Compositing
Chapter 2: Chromium은 렌더링 성능 향상을 위하여…
① Chrome Vs Chromium
② Why Multi Process Architecture?
③ GPU Process
④ Multi Threads Models in Renderer Process
⑤ Chromium Scheduler: Right things right time
Chapter 3: Chromium-powered Android WebView
① What is Android WebView?
② Android WebView Version History
③ Chromium Powered WebView Structure
④ Chrome Vs Android Rendering model
⑤ Chrome Vs Chromium WebView
⑥ Chromium WebView Rendering Pipeline
⑦ The Future of WebView?
3
Chapter 1, 브라우저 렌더링에
서의 Critical Path란 무엇인가?
4
<html>
<head>
<title> NAVER </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>
1. Summary of browser main flows.
[Source: How browsers work]

Recommended for you

Study of Chromium OS
Study of Chromium OSStudy of Chromium OS
Study of Chromium OS

This document provides instructions for building Chromium OS from source code. It includes sections on setting up the build environment, retrieving the Chromium OS source code, building packages and images, debugging, and common commands. The build process involves initializing a chroot environment, configuring packages and boards, and compiling the necessary components to create Chromium OS disk images that can be used to install the operating system.

chromium oschromiumos
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...

서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.

The Android graphics path, in depth
The Android graphics path, in depthThe Android graphics path, in depth
The Android graphics path, in depth

Slides from Android Builder's Summit 2014 in San Jose, CA In this talk I describe the internal workings of the Android graphics stack from the Application layer down through the stack to pixels on the screen. It is a fairly complex journey, taking in two different 2D rendering engines, applications calling OpenGL ES directory, passing buffers on to the system compositor, SurfaceFlinger, and then down to the display controller or frame buffer.

androidopenglsurfaceflinger
5
HEAD
TITLE
NAVER
BODY
DIV
H1 P
HTML
Hello World
<html>
<head>
<title> NAVER </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>
2. HTML Parser
6
3. Java Script Engine
Source Code Parser Syntax Tree
Bytecode
Generator
Bytecode
JIT Compiler Machine Code
Execution
Loader
Parser
DOM
Java Script
HTML DOM API
Evaluate
7
HTML
CSS
DOM
Tree
Style
Rules
Renderer
TreeLookup
4. Render Tree Creation
8
HEAD
TITLE
NAVER
BODY
DIV
H1 P
HTML
Hello World
Block
Block
Block
Block Block
Inline Inline
5. Render Tree

Recommended for you

[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 [122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기

[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기

deview2018
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례

AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례 - 넥슨 (윤석주 신사업본부 선임)

아마존웹서비스gaming on awsnexon
[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료
9
6. Layout
HEAD
TITLE
NAVER
BODY
DIV
H1 P
HTML
Hello World
Block
Block
Block
Block Block
Inline Inline
(0, 0, 1024, 768)
(0, 0, 1024, 768)
(0, 0, 1024, 55)
(10, 20, 1024, 37) (10, 80, 1024, 18)
10
7. Rendering
Block (html)
Block (body)
Block (div)
Block (h1) Block (p)
Inline (hello) Inline (world)
(0, 0, 1024, 768)
(0, 0, 1024, 768)
(0, 0, 1024, 55)
(10, 20, 1024, 37) (10, 80, 1024, 18) 1024
768<div>
11
8. Rendering Pipeline Runs on Main Thread
[Source: Blink Rendering Pipeline]
[Source: Chrome Graphics - BlinkOn 1]
12
9. New Rendering Model: Layers (1/4)
[Source: WebKit.org]

Recommended for you

[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자

chromium binging 기술을 node.js에 적용해보자

deview2017
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...

By Julie Kim. Julie will be presenting the work that has been done over the last months to develop for the AGL platform a modern Chromium based Web Application Manager (WAM) that enables running HTML5 IVI applications on the system. These different applications can define specific levels of integration and security on the platform, and can be run seamlessly on different hardware architectures. Automotive Grade Linux All Member Meeting Japan 2019 March 5 - 6, 2019 Tokyo, Japan https://events.linuxfoundation.org/events/agl-all-member-meeting-japan/

automotiveaglchromium
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기

Android의 Window와 WindowInsets에 대해서 알아봅니다. System UI 영역에 우리 앱을 draw하거나 풀스크린 모드로 화면을 구성 할 때, Display Cutout 대응 등 WindowInset이 활용되는 경우와 주의해야 할 점들에 대해 알아봅니다. Google 개발자 Chris Banes가 발표한 Becoming a master window fitters(Droidcon NYC 2017)를 기반으로 준비하였으며, 최신사항을 반영하였습니다.

13
9. New Rendering Model: Layers (2/4)
1. Avoid unnecessary repainting
- If yellow and red have their own layers, then nothing needs
"repainting" while this example animates.
2. Makes some features more efficient or practical
- Including: Scrolling, 3D CSS(translate3d, …), opacity, filters, WebGL, etc.
[Source: Compositing in Blink and WebKit]
14
9. New Rendering Model: Layers (3/4)
1. It's the root object for the page. <html>
2. CSS position properties (relative, absolute)
3. Has overflow, an alpha mask or reflection
4. CSS filter
5. CSS 3D Transform , Animations
6. <canvas>, <video>
7. will-change (Chrome 36, Firefox 36, Opera 24)
15
Cost of Multi Layers: Memory, Computing
<Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림>
9. New Rendering Model: Layers (4/4)
16
10. GPU Accelerated Compositing
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Text와 Image는 CPU에서 Rasterization
3. Textures upload into Video memory
4. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update

Recommended for you

Low Level View of Android System Architecture
Low Level View of Android System ArchitectureLow Level View of Android System Architecture
Low Level View of Android System Architecture

This presentation covers the working model about Process, Thread, system call, Memory operations, Binder IPC, and interactions with Android frameworks.

graphicsbinderframework
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3

Vue.js is a progressive JavaScript framework that focuses on building user interfaces and is used for single-page applications. It was created by Evan You and released in 2014. Vue.js uses declarative templates and reactive data binding to render the view layer for an application. Templates in Vue use HTML-based syntax with directives prefixed with v- to dynamically bind expression results. Common directives include v-bind, v-if, and v-for. Vue.js applications can be built with its core library or integrated with other libraries and frameworks.

vuevue.jsvuejs
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API

This document provides an introduction and overview of Node.js, including what Node.js is, its architecture and basics, how to write "Hello World" programs in Node.js and Express, how to use modules, errors, middleware, routers, Mongoose and MongoDB for databases, and the MEAN stack. It also describes a tutorial for building a backend API with Node.js, Express, Mongoose and MongoDB.

nodejsrestapi
17
Chapter 2, Chromium은 렌더
링 성능 향상을 위하여 어떤 기
술들을 사용하고 있는가?
18
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
1. Chrome Vs Chromium
19
2. Why Multi Process Architecture?
기존 브라우저의 문제점
• 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조
• 과거의 OS는 단일 사용자, 협조적 멀티 태스킹 시스템
• 이와 같은 시스템에서, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침
• 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴
문제해결을 위한 접근
• 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함
• 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정
성에 영향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
20
3. Chromium Rendering Pipeline
[Source: Chrome Graphics - BlinkOn 1]

Recommended for you

Chromium vs. Firefox
Chromium vs. FirefoxChromium vs. Firefox
Chromium vs. Firefox

The document compares the architectures and features of the Firefox and Chromium web browsers. It outlines their reference architectures, functional requirements like user interfaces, media playback, and downloads management. It also discusses their non-functional requirements including security, performance, and extensibility. Finally, it provides a high-level comparison of their architectures and a deeper look at differences in their security models.

mozilla firefoxchromiumopen source
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화

The document discusses spatial analysis and visualization using open source GIS and OGC standards. It provides examples of 1) a national land environment assessment map service, 2) an integrated epidemiological investigation analysis system, and 3) a Web Processing Service demo. It also discusses descriptive statistics, spatial pattern analysis, spatial interpolation, vector and raster geoprocessing tools, and setting up a GeoServer and PostGIS system to support WMS, WFS, and WPS services.

ogc wpsgeotoolsgeoserver
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation

This document contains an agenda and slides for a React workshop presented by Bojan Golubovic. The workshop covers the history and basics of React, including components, JSX, the virtual DOM, and React data flow. It also discusses related tools like Redux and React Router. The goal is to provide basic knowledge of React and how to build real-world applications with it.

reactreactjsreact.js
21
• GPU Process의 구조적 특징: Security, Robustness, Uniformity, Parallelism
• Client(Render Process): GL Command를 생성, Ring Buffer에 Insert
-> 일반적인 페이지의 경우 Texture Upload용으로 사용, HTML5 Canvas / WebGL은 직접 GL Command를 사용
• Server(GPU Process): Command를 fetch, execution.
• GL command는 GL ES 2.0 API와 거의 유사한 Async command
4. GPU Process
[Source: GPU Accelerated Compositing in Chrome]
22
5. Multi Threads: Main Thread Rendering
[Source: Chrome Graphics - BlinkOn 1]
23
5. Multi Threads: Threaded Compositor
[Source: Chrome Graphics - BlinkOn 1]
24
5. Multi Threads: Threaded Rasterization
[Source: Chrome Graphics - BlinkOn 1]

Recommended for you

게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal

강력한 시각화와 몰입도 높은 가상세계 표현을 위해, 게임엔진은 측량기반의 콘텐츠를 필요로 하고 공간정보 3D 플랫폼은 강력한 프리미엄급 클라이언트를 필요로 하는데, Cesium for Unreal은 이런 수요를 만족하는 솔루션입니다. 이 발표자료는 공간정보 3D 콘텐츠가 어떻게 게임엔진 안으로 들어가서 국가 또는 지구 범위로 확장성을 발휘하는지, 그 기능구현을 진입단계 수준으로 소개하고 있습니다.

게임엔진game engine언리얼
190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁

190119 데브루키 서브 스터디 - 언리얼 스터디에서 발표한 자료 Unreal Engine 4 C++ 입문 및 팁.

unreal engine 4unreal c++c++
Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview

This document discusses the rendering process in Webkit and Chromium. It describes how layers are created and composited during rendering. It also covers the multi-process architecture in Chromium including the browser process, render process, and rendering threads. Key classes involved in inter-process communication like RenderViewHost and RenderView are introduced.

chromewebkit
25
6. Skia’s SkPicture Canvas
A modern 2D graphics library
SkPicture, SkPicturePlayBack:
Records and replay draw operations.
[http://www.dorothybrowser.com/parallelizing-canvas-rendering/]
26
7. Chromium Rendering Pipeline in detail
1. Record 2. Raster 2.5 Upload 3. Composite
update
record
Thread
Proxy
update
recordPicture
Layer
updatePicture
LayerImpl
Raster
LayerTreeHost
update
recordupdate
recordGraphics
Layer
Blink LayerTreeHostImpl
Proxy
Main Thread Compositor Thread Raster Threads
Call into WebKit
which calls Skia
SkPicture records
the paint for
deferred raster
Decode images
In parallel
Raster into
shared memory
Send to GPU
process using
custom extension
GPU process does
glTexImage2d
asynchronously
Send draw cmds
To GPU Process
over command
buffer
glBindTexture
glDrawElements
Main Thread Raster Thread Compositor Thread
Tree Sync
27
8. Chromium Scheduler: Right things right time
1. Record
3. Raster
4. Upload
5. Composite
2. Tree Sync
6. SwapBuffer
Scheduler
Begin
Frame
Commit
Pending
Tree
Draw
& Swap
Buffer
Update
Visible
Tiles
<StateMachine in Compositor Threads>
Activate
Pending
Tree
VSync
28
Renderer Process
Cache Thread File Thread DB Thread IO Thread
I/O
Thread
Browser Process
Main Thread
Renderer Process
IPC
RenderView
RenderWidget
Blink
RenderView
RenderWidget RenderWidget
Blink Blink
RenderView
WebContents
RenderViewHost
Manager
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
SiteInstance RenderProcessHost
SiteInstance RenderProcessHost
Main ThreadMain Thread
WebContents
RenderViewHost
Manager
RenderMainThread
(Single Process Mode)
1
2
3
4
5
6 Compositor
GPU Thread
(Android)
Process Launcher
Thread
Raster
I/O
Thread
Compositor
Raster
9. Chromium Architecture in detail

Recommended for you

Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture

The document discusses the main components of a web browser, including the user interface, browser engine, rendering engine, networking, JavaScript interpreter, UI backend, and data storage. It provides details on how different browsers use different rendering engines, such as Gecko, WebKit, Blink, and Trident. The rendering engine is responsible for parsing HTML and CSS to construct the DOM and render tree before layout, painting and displaying the web page.

safarijavascriptcorev8 engine
LCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDKLCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDK

LCU14 208- Chromium-Blink Migration for RDK --------------------------------------------------- Speaker: Zoltan Kuscsik & Haifeng Yan Date: September 16, 2014 --------------------------------------------------- ★ Session Summary ★ Technical session featuring a deep dive into the Chromium-Blink migration implementing Ozone-Aura graphics framework --------------------------------------------------- ★ Resources ★ Zerista: http://lcu14.zerista.com/event/member/137734 Google Event: https://plus.google.com/u/2/events/ctguiel9leho6bik05klu0a7dag Video: https://www.youtube.com/watch?v=8crF6f1JAG8&list=UUIVqQKxCyQLJS6xvSmfndLA Etherpad: http://pad.linaro.org/p/lcu14-208 --------------------------------------------------- ★ Event Details ★ Linaro Connect USA - #LCU14 September 15-19th, 2014 Hyatt Regency San Francisco Airport --------------------------------------------------- http://www.linaro.org http://connect.linaro.org

lcu14
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution

This document summarizes Juan J. Sánchez's presentation on WebKit and Blink. It discusses: 1) The history and goals of the WebKit project from 2004-2013, including its features, architecture, ports, and licenses. 2) The WebKit community, including types of contributors, tools used, and events held. 3) The creation of Blink in 2013 when Google forked WebKit, the motivations behind it, and its impact on the WebKit community. 4) The current status of WebKit and Blink projects and their future perspectives.

blinkchromiumlinuxcon
29
Chapter 3, Android Chrome과
Chromium-powered WebView
의 구조적 차이는 무엇인가?
30
1. What is Android WebView?
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
31
2. Android WebView Version History
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
32
3. Chromium Powered WebView Structure
Blink(WebKit)
Content
(Multi-process-impl)
Content API
Blink
Chromium
Android
WebView
Framework
Chrome
Browser
Framework

Recommended for you

Chromium ppt
Chromium pptChromium ppt
Chromium ppt

Chromium is a silvery transition metal that occurs naturally in ores like chromite. It has several important industrial uses including in stainless steel production and metal plating. Chromium exists in two main oxidation states, Cr3+ and Cr6+, with Cr6+ being more toxic and carcinogenic. Alternative plating methods are being developed to replace the use of hexavalent chromium due to its health and environmental risks.

Android things intro
Android things introAndroid things intro
Android things intro

This document provides an introduction and overview of Android Things and developing connected devices using Android Things on a Raspberry Pi 3. It discusses the Android Things framework and support library, compatible devices, key differences from regular Android like optional displays and restricted permissions, and demos connecting a button to a Raspberry Pi 3 running Android Things. Helpful links are also provided to setup guides and sample code.

android thingsandroidiot
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android

(Presentation at Android Builders Summit 2013) Discuss the concepts about graphics, GPU behavior, and take two case studies: skia and webkit.

gpuaccelerationwebkit
33
4. Chrome Vs Android Rendering Model
Make main
thread free
Make sure
contents
on time
34
5. Chrome Vs Chromium WebView
Chrome
Multi-process
 UI thread
 GPU thread
 Texture upload thread
 Per renderer process:
o Blink thread
o CC impl thread
o Raster thread
Chromium Scheduler
SurfaceView
Chromium WebView
Single-process
 Combined UI + renderer CC thread
 Android RenderThread (+in-proces
s GPU thread)
 Canvas/WebGL GPU thread
 Blink thread
 Raster thread
Android Rendering Scheduer
Draw functor (Private API)
[Source: Android WebView rendering BlinkOn 3]
35
6. Accelerated Android Rendering
[Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview]
[MainThread]
36
7. Chromium WebView Rendering Pipeline in K
DrawGLFunction()
Synchronous Compositor
ViewRootImpl
performDraw()
View
Draw(Canvas)
View
onDraw(Canvas)
HardwareCanvas
draw*(…,Paint)
WebView::onDraw()
Set draw functor via DrawGLFunctor::requestDrawGL()
(canvas.callDrawGLFunction(mNativeDrawGLFunctor))
3. Composite
Chromium WebView
1. Record 2. Raster
Main
Blink Thread Raster Threads Main Thread

Recommended for you

WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open web

An introduction to WebGL for OpenGL developers. Topics include current browser support - as of September 2011 - and JavaScript.

gpuwebglhtml5
Understanding Webkit Rendering
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit Rendering

The document discusses the process of rendering and layout in WebKit. It explains that WebKit parses HTML into a DOM tree and applies CSS styles to create a render tree. It then lays out elements based on their metrics and computed styles to establish positioning. Finally, it paints the render tree onto the screen by traversing it and issuing drawing commands to the underlying graphics system. The document provides details on how style calculations, layout, and painting optimizations work to efficiently display content on the web.

webkitsvcodecamp
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser

A presentation depicting the most important aspects regarding the internal architecture of a Web browser.

engineeringclientdevelopment
37
8. Chromium WebView Rendering Pipeline in L
WebView::onDraw()
1. Set draw functor
2. Request Record & Raster
Synchronous Compositor
View
onDraw(Canvas)
HardwareCanvas
draw*(…,Paint)
Chromium WebView
1. Record 2. Raster
Main
Raster Threads
ViewRootImpl
performDraw()
Render
Blink Thread
DrawGLFunction()
Synchronous Compositor
3. Composite
Render Thread
38
9. Android Chromium WebView Architecture
Blink Thread Cache Thread File Thread DB Thread IO Thread
Main Thread
IPC
WebContents
RenderViewHost
Manager
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
RenderViewHost
RenderWidgetHost
SiteInstance RenderProcessHost
SiteInstance RenderProcessHost
Chromium WebView’s Process
RenderView
RenderWidget
Blink
Process Launcher
Thread
Raster Thread
WebView
39
10. The Future of WebView?
“Under active debate at the moment” (2014/11)
1. Opposing use cases
1) WebView as a browser-in-a-box, Vs
2) WebView as one tool in a hybrid app toolset
2. Opposing update priorities
1) App developers want the latest features and
performance improvements
2) They also want stability to the point of bug-for-bug
compatibility
[Source: Android WebView rendering BlinkOn 3]
40
Appendix #1: References
1. http://www.w3.org/TR/CSS2/
2. http://www.w3.org/TR/DOM-Level-2-Core/core.html
3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
4. http://deview.kr/2013/detail.nhn?topicSeq=5
5. http://www.slideshare.net/joone/hardware-acceleration-in-webkit
6. http://dev.chromium.org/developers/design-documents/multi-process-architecture
7. https://docs.google.com/a/chromium.org/presentation/d/1pYAGn2AYJ7neFDlDZ9DmL
HpwMIskzMUXjFXYR7yfUko/edit
8. http://dev.chromium.org/developers/design-documents/inter-process-communication
9. http://dev.chromium.org/developers/design-documents/multi-process-resource-
loading
10. http://dev.chromium.org/developers/design-documents/gpu-accelerated-
compositing-in-chrome
11. http://dev.chromium.org/developers/design-documents/compositor-thread-
architecture
12. http://dev.chromium.org/developers/design-documents/impl-side-painting
13. http://blog.csdn.net/jaylinzhou/article/details/18313505

Recommended for you

Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...

By Jacobo Aragunde. Chromium is a complex piece of software, and making it run on a specific platform is not a trivial task; come and hear how we ported Chromium to a R-Car M2 Porter board running a Wayland stack and what we learned in this process. Content: An overview of Chromium, Ozone and Ozone-Wayland Tips and tricks to work on embedded platforms Step-by-step walk through the steps followed in the porting process Lessons learned.

waylandbrowserschromium
Hitea Press Article April 2014
Hitea Press Article April 2014Hitea Press Article April 2014
Hitea Press Article April 2014

The document discusses the REACH CrVI HITEA project which aims to develop replacements for hexavalent chromium surface treatments which are being restricted under the REACH regulation. It focuses on developing advanced corrosion testing methods like electrochemical impedance spectroscopy to improve evaluation of alternatives. The project has identified chromium-free anodizing treatments and is testing them along with over 1,000 data sets against current chromated systems. It also seeks to replace electrolytic hard chromium plating and is assessing alternative processes. The project aims to validate replacement technologies and establish a database to facilitate selection of sustainable solutions for the aerospace industry and beyond.

How is glass made (2)
How is glass made (2)How is glass made (2)
How is glass made (2)

Glass is a hard, transparent substance made by rapidly cooling molten materials such as sand, soda ash, and limestone. It is used for windows, containers, and other purposes. Glass is made by heating these ingredients to high temperatures, then rapidly cooling, or annealing, the substance. Different glass types are made by varying the ingredients or heating process. Common types include soda-lime glass for windows and borosilicate glass for laboratory equipment. Various metal oxides like iron, cobalt, and chromium are used to color glass for artistic and technical applications.

41

More Related Content

What's hot

[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
NAVER Engineering
 
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018 게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
Amazon Web Services Korea
 
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
NAVER D2
 
Study of Chromium OS
Study of Chromium OSStudy of Chromium OS
Study of Chromium OS
William Lee
 
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
Amazon Web Services Korea
 
The Android graphics path, in depth
The Android graphics path, in depthThe Android graphics path, in depth
The Android graphics path, in depth
Chris Simmonds
 
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 [122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
NAVER D2
 
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
Amazon Web Services Korea
 
[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료
MinGeun Park
 
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
NAVER D2
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
Igalia
 
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기
Myungwook Ahn
 
Low Level View of Android System Architecture
Low Level View of Android System ArchitectureLow Level View of Android System Architecture
Low Level View of Android System Architecture
National Cheng Kung University
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
ArezooKmn
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
Fabien Vauchelles
 
Chromium vs. Firefox
Chromium vs. FirefoxChromium vs. Firefox
Chromium vs. Firefox
Rashmika Nawaratne
 
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
MinPa Lee
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
Bojan Golubović
 
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
Kyu-sung Choi
 
190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁
KWANGIL KIM
 

What's hot (20)

[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
 
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018 게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
게임을 위한 최적의 AWS DB 서비스 선정 퀘스트 깨기::최유정::AWS Summit Seoul 2018
 
[125]�� 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것[125]웹 성능 최적화에 필요한 브라우저의 모든 것
[125]웹 성능 최적화에 필요한 브라우저의 모든 것
 
Study of Chromium OS
Study of Chromium OSStudy of Chromium OS
Study of Chromium OS
 
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
오딘: ��할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...
 
The Android graphics path, in depth
The Android graphics path, in depthThe Android graphics path, in depth
The Android graphics path, in depth
 
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 [122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
 
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
[Gaming on AWS] 넥슨 - AWS를 활용한 모바일 게임 서버 개발: 퍼즐 주주의 사례
 
[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료[NHN_NEXT] DirectX Tutorial 강의 자료
[NHN_NEXT] DirectX Tutorial 강의 자료
 
[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자[131]chromium binging 기술을 node.js에 적용해보자
[131]chromium binging 기술을 node.js에 적용해보자
 
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
HTML5 Apps on AGL Platform with the Web Application Manager (Automotive Grade...
 
안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기안드로이드 윈도우 마스터 되기
안드로이드 윈도우 마스터 되기
 
Low Level View of Android System Architecture
Low Level View of Android System ArchitectureLow Level View of Android System Architecture
Low Level View of Android System Architecture
 
introduction to Vue.js 3
introduction to Vue.js 3 introduction to Vue.js 3
introduction to Vue.js 3
 
Use Node.js to create a REST API
Use Node.js to create a REST APIUse Node.js to create a REST API
Use Node.js to create a REST API
 
Chromium vs. Firefox
Chromium vs. FirefoxChromium vs. Firefox
Chromium vs. Firefox
 
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화오픈소스GIS를 활용한 서버기반 공간분석과 시각화
오픈소스GIS를 활용한 서버기반 공간분석과 시각화
 
React workshop presentation
React workshop presentationReact workshop presentation
React workshop presentation
 
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
게임엔진과 공간정보 3D 콘텐츠 융합 : Cesium for Unreal
 
190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁190119 unreal engine c++ 입문 및 팁
190119 unreal engine c++ 입문 및 팁
 

Viewers also liked

Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
Bin Chen
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
Nguyen Quang
 
LCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDKLCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDK
Linaro
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
juanjosanchezpenas
 
Chromium ppt
Chromium pptChromium ppt
Chromium ppt
Kundan samal
 
Android things intro
Android things introAndroid things intro
Android things intro
Matteo Bonifazi
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
National Cheng Kung University
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open web
pjcozzi
 
Understanding Webkit Rendering
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
Sabin Buraga
 
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Igalia
 
Hitea Press Article April 2014
Hitea Press Article April 2014Hitea Press Article April 2014
Hitea Press Article April 2014
Jim Rowbotham
 
How is glass made (2)
How is glass made (2)How is glass made (2)
How is glass made (2)
Aj Saliha
 
Thomann2015 dissertation
Thomann2015 dissertationThomann2015 dissertation
Thomann2015 dissertation
Olivier Thomann
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
juanjosanchezpenas
 
Embarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apportsEmbarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apports
guest3be047
 
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB ThèqueTracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
Bernard Jeanne-Beylot
 
Séminaire Captronic Yocto 24 février 2015
Séminaire Captronic Yocto 24 février 2015Séminaire Captronic Yocto 24 février 2015
Séminaire Captronic Yocto 24 février 2015
Christian Charreyre
 
Concevoir un système Linux embarqué avec Yocto Project
Concevoir un système Linux embarqué avec Yocto ProjectConcevoir un système Linux embarqué avec Yocto Project
Concevoir un système Linux embarqué avec Yocto Project
Christian Charreyre
 

Viewers also liked (20)

Chrome & Webkit overview
Chrome & Webkit overviewChrome & Webkit overview
Chrome & Webkit overview
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
 
LCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDKLCU14 208- Chromium-Blink Migration for RDK
LCU14 208- Chromium-Blink Migration for RDK
 
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 RevolutionWebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
WebKit and Blink: Bridging the Gap Between the Kernel and the HTML5 Revolution
 
Chromium ppt
Chromium pptChromium ppt
Chromium ppt
 
Android things intro
Android things introAndroid things intro
Android things intro
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
 
WebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open webWebGL: GPU acceleration for the open web
WebGL: GPU acceleration for the open web
 
Understanding Webkit Rendering
Understanding Webkit RenderingUnderstanding Webkit Rendering
Understanding Webkit Rendering
 
Architecture of the Web browser
Architecture of the Web browserArchitecture of the Web browser
Architecture of the Web browser
 
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
Building Chromium on an Embedded Platform using Ozone-Wayland Layer (GENIVI 1...
 
Hitea Press Article April 2014
Hitea Press Article April 2014Hitea Press Article April 2014
Hitea Press Article April 2014
 
How is glass made (2)
How is glass made (2)How is glass made (2)
How is glass made (2)
 
Thomann2015 dissertation
Thomann2015 dissertationThomann2015 dissertation
Thomann2015 dissertation
 
The WebKit project
The WebKit projectThe WebKit project
The WebKit project
 
Energie maison
Energie maisonEnergie maison
Energie maison
 
Embarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apportsEmbarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apports
 
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB ThèqueTracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
Tracabilite & Identification Automatique par Bernard JEANNE-BEYLOT @JB Thèque
 
Séminaire Captronic Yocto 24 février 2015
Séminaire Captronic Yocto 24 février 2015Séminaire Captronic Yocto 24 février 2015
Séminaire Captronic Yocto 24 février 2015
 
Concevoir un système Linux embarqué avec Yocto Project
Concevoir un système Linux embarqué avec Yocto ProjectConcevoir un système Linux embarqué avec Yocto Project
Concevoir un système Linux embarqué avec Yocto Project
 

Similar to Android Chromium Rendering Pipeline

[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
NAVER D2
 
Building a website without a webserver on Azure
Building a website without a webserver on AzureBuilding a website without a webserver on Azure
Building a website without a webserver on Azure
Todd Whitehead
 
[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
NAVER D2
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
Harald Kirschner
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
NAVER D2
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
NAVER D2
 
JS digest. November 2017
JS digest. November 2017JS digest. November 2017
JS digest. November 2017
ElifTech
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Building Blocks
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
Vinayak Tavargeri
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
Mohanadarshan Vivekanandalingam
 
2014 HTML5 총정리
2014 HTML5 총정리2014 HTML5 총정리
2014 HTML5 총정리
Wonsuk Lee
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
David Amend
 
Rendering: Or why your perfectly optimized content doesn't rank
Rendering: Or why your perfectly optimized content doesn't rankRendering: Or why your perfectly optimized content doesn't rank
Rendering: Or why your perfectly optimized content doesn't rank
WeLoveSEO
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidCon
Amir Zuker
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
micro-frontends-with-vuejs
micro-frontends-with-vuejsmicro-frontends-with-vuejs
micro-frontends-with-vuejs
Oleksandr Tserkovnyi
 
Grunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End TierGrunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End Tier
Erick Brito
 
Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)
Bin Chen
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
Andrei Sebastian Cîmpean
 

Similar to Android Chromium Rendering Pipeline (20)

[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진[D2 campus seminar]웹브라우저 엔진
[D2 campus seminar]웹브라우저 엔진
 
Building a website without a webserver on Azure
Building a website without a webserver on AzureBuilding a website without a webserver on Azure
Building a website without a webserver on Azure
 
[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
#Webperf Choreography
#Webperf Choreography#Webperf Choreography
#Webperf Choreography
 
Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022Deview 2013 mobile browser internals and trends_20131022
Deview 2013 mobile browser internals and trends_20131022
 
Kandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_finalKandroid for nhn_deview_20131013_v5_final
Kandroid for nhn_deview_20131013_v5_final
 
JS digest. November 2017
JS digest. November 2017JS digest. November 2017
JS digest. November 2017
 
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
 
What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5What's new in Portal and WCM 8.5
What's new in Portal and WCM 8.5
 
Transforming the web into a real application platform
Transforming the web into a real application platformTransforming the web into a real application platform
Transforming the web into a real application platform
 
2014 HTML5 총정리
2014 HTML5 총정리2014 HTML5 총정리
2014 HTML5 총정리
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Rendering: Or why your perfectly optimized content doesn't rank
Rendering: Or why your perfectly optimized content doesn't rankRendering: Or why your perfectly optimized content doesn't rank
Rendering: Or why your perfectly optimized content doesn't rank
 
Micro-Frontends JSVidCon
Micro-Frontends JSVidConMicro-Frontends JSVidCon
Micro-Frontends JSVidCon
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
micro-frontends-with-vuejs
micro-frontends-with-vuejsmicro-frontends-with-vuejs
micro-frontends-with-vuejs
 
Grunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End TierGrunt Continuous Development of the Front End Tier
Grunt Continuous Development of the Front End Tier
 
Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)Browsers on Android (Webkit,chromium)
Browsers on Android (Webkit,chromium)
 
Building reusable components as micro frontends with glimmer js and webcompo...
Building reusable components as micro frontends  with glimmer js and webcompo...Building reusable components as micro frontends  with glimmer js and webcompo...
Building reusable components as micro frontends with glimmer js and webcompo...
 

Recently uploaded

Understanding Cybersecurity Breaches: Causes, Consequences, and Prevention
Understanding Cybersecurity Breaches: Causes, Consequences, and PreventionUnderstanding Cybersecurity Breaches: Causes, Consequences, and Prevention
Understanding Cybersecurity Breaches: Causes, Consequences, and Prevention
Bert Blevins
 
How to Manage Internal Notes in Odoo 17 POS
How to Manage Internal Notes in Odoo 17 POSHow to Manage Internal Notes in Odoo 17 POS
How to Manage Internal Notes in Odoo 17 POS
Celine George
 
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.docCCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
Dss
 
LeetCode Database problems solved using PySpark.pdf
LeetCode Database problems solved using PySpark.pdfLeetCode Database problems solved using PySpark.pdf
LeetCode Database problems solved using PySpark.pdf
pavanaroshni1977
 
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
IJAEMSJORNAL
 
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdfGUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
ProexportColombia1
 
Introduction to IP address concept - Computer Networking
Introduction to IP address concept - Computer NetworkingIntroduction to IP address concept - Computer Networking
Introduction to IP address concept - Computer Networking
Md.Shohel Rana ( M.Sc in CSE Khulna University of Engineering & Technology (KUET))
 
Development of Chatbot Using AI/ML Technologies
Development of  Chatbot Using AI/ML TechnologiesDevelopment of  Chatbot Using AI/ML Technologies
Development of Chatbot Using AI/ML Technologies
maisnampibarel
 
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
IJAEMSJORNAL
 
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
VICTOR MAESTRE RAMIREZ
 
Net Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK EmpireNet Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK Empire
Global Network for Zero
 
Chlorine and Nitric Acid application, properties, impacts.pptx
Chlorine and Nitric Acid application, properties, impacts.pptxChlorine and Nitric Acid application, properties, impacts.pptx
Chlorine and Nitric Acid application, properties, impacts.pptx
yadavsuyash008
 
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
YanKing2
 
Quadcopter Dynamics, Stability and Control
Quadcopter Dynamics, Stability and ControlQuadcopter Dynamics, Stability and Control
Quadcopter Dynamics, Stability and Control
Blesson Easo Varghese
 
Online music portal management system project report.pdf
Online music portal management system project report.pdfOnline music portal management system project report.pdf
Online music portal management system project report.pdf
Kamal Acharya
 
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE DonatoCONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
Servizi a rete
 
Exploring Deep Learning Models for Image Recognition: A Comparative Review
Exploring Deep Learning Models for Image Recognition: A Comparative ReviewExploring Deep Learning Models for Image Recognition: A Comparative Review
Exploring Deep Learning Models for Image Recognition: A Comparative Review
sipij
 
Biology for computer science BBOC407 vtu
Biology for computer science BBOC407 vtuBiology for computer science BBOC407 vtu
Biology for computer science BBOC407 vtu
santoshpatilrao33
 
Rotary Intersection in traffic engineering.pptx
Rotary Intersection in traffic engineering.pptxRotary Intersection in traffic engineering.pptx
Rotary Intersection in traffic engineering.pptx
surekha1287
 
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
PradeepKumarSK3
 

Recently uploaded (20)

Understanding Cybersecurity Breaches: Causes, Consequences, and Prevention
Understanding Cybersecurity Breaches: Causes, Consequences, and PreventionUnderstanding Cybersecurity Breaches: Causes, Consequences, and Prevention
Understanding Cybersecurity Breaches: Causes, Consequences, and Prevention
 
How to Manage Internal Notes in Odoo 17 POS
How to Manage Internal Notes in Odoo 17 POSHow to Manage Internal Notes in Odoo 17 POS
How to Manage Internal Notes in Odoo 17 POS
 
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.docCCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
CCS367-STORAGE TECHNOLOGIES QUESTION BANK.doc
 
LeetCode Database problems solved using PySpark.pdf
LeetCode Database problems solved using PySpark.pdfLeetCode Database problems solved using PySpark.pdf
LeetCode Database problems solved using PySpark.pdf
 
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
Best Practices of Clothing Businesses in Talavera, Nueva Ecija, A Foundation ...
 
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdfGUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
GUIA_LEGAL_CHAPTER-9_COLOMBIAN ELECTRICITY (1).pdf
 
Introduction to IP address concept - Computer Networking
Introduction to IP address concept - Computer NetworkingIntroduction to IP address concept - Computer Networking
Introduction to IP address concept - Computer Networking
 
Development of Chatbot Using AI/ML Technologies
Development of  Chatbot Using AI/ML TechnologiesDevelopment of  Chatbot Using AI/ML Technologies
Development of Chatbot Using AI/ML Technologies
 
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
Profiling of Cafe Business in Talavera, Nueva Ecija: A Basis for Development ...
 
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
Advances in Detect and Avoid for Unmanned Aircraft Systems and Advanced Air M...
 
Net Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK EmpireNet Zero Case Study: SRK House and SRK Empire
Net Zero Case Study: SRK House and SRK Empire
 
Chlorine and Nitric Acid application, properties, impacts.pptx
Chlorine and Nitric Acid application, properties, impacts.pptxChlorine and Nitric Acid application, properties, impacts.pptx
Chlorine and Nitric Acid application, properties, impacts.pptx
 
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
Natural Is The Best: Model-Agnostic Code Simplification for Pre-trained Large...
 
Quadcopter Dynamics, Stability and Control
Quadcopter Dynamics, Stability and ControlQuadcopter Dynamics, Stability and Control
Quadcopter Dynamics, Stability and Control
 
Online music portal management system project report.pdf
Online music portal management system project report.pdfOnline music portal management system project report.pdf
Online music portal management system project report.pdf
 
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE DonatoCONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
CONVEGNO DA IRETI 18 giugno 2024 | PASQUALE Donato
 
Exploring Deep Learning Models for Image Recognition: A Comparative Review
Exploring Deep Learning Models for Image Recognition: A Comparative ReviewExploring Deep Learning Models for Image Recognition: A Comparative Review
Exploring Deep Learning Models for Image Recognition: A Comparative Review
 
Biology for computer science BBOC407 vtu
Biology for computer science BBOC407 vtuBiology for computer science BBOC407 vtu
Biology for computer science BBOC407 vtu
 
Rotary Intersection in traffic engineering.pptx
Rotary Intersection in traffic engineering.pptxRotary Intersection in traffic engineering.pptx
Rotary Intersection in traffic engineering.pptx
 
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
21EC63_Module1B.pptx VLSI design 21ec63 MOS TRANSISTOR THEORY
 

Android Chromium Rendering Pipeline

  • 1. Android Chromium Rendering Pipeline 이형욱 (hyungwook.lee@navercorp.com) 시스템스컴퓨팅G / NAVER LABS 2015-04
  • 2. 2 0. Contents Chapter 1: 브라우저 렌더링에서의 Critical Path란 무엇인가? ① Summary of browser’s main flows ② HTML Parser ③ JavaScriptEngine ④ Render Tree, Layout ⑤ Rendering Pipeline Runs on Main Thread ⑥ New Rendering Model ⑦ GPU Accelerated Compositing Chapter 2: Chromium�� 렌더링 성능 향상을 위하여… ① Chrome Vs Chromium ② Why Multi Process Architecture? ③ GPU Process ④ Multi Threads Models in Renderer Process ⑤ Chromium Scheduler: Right things right time Chapter 3: Chromium-powered Android WebView ① What is Android WebView? ② Android WebView Version History ③ Chromium Powered WebView Structure ④ Chrome Vs Android Rendering model ⑤ Chrome Vs Chromium WebView ⑥ Chromium WebView Rendering Pipeline ⑦ The Future of WebView?
  • 3. 3 Chapter 1, 브라우저 렌더링에 서의 Critical Path란 무엇인가?
  • 4. 4 <html> <head> <title> NAVER </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> 1. Summary of browser main flows. [Source: How browsers work]
  • 5. 5 HEAD TITLE NAVER BODY DIV H1 P HTML Hello World <html> <head> <title> NAVER </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> 2. HTML Parser
  • 6. 6 3. Java Script Engine Source Code Parser Syntax Tree Bytecode Generator Bytecode JIT Compiler Machine Code Execution Loader Parser DOM Java Script HTML DOM API Evaluate
  • 9. 9 6. Layout HEAD TITLE NAVER BODY DIV H1 P HTML Hello World Block Block Block Block Block Inline Inline (0, 0, 1024, 768) (0, 0, 1024, 768) (0, 0, 1024, 55) (10, 20, 1024, 37) (10, 80, 1024, 18)
  • 10. 10 7. Rendering Block (html) Block (body) Block (div) Block (h1) Block (p) Inline (hello) Inline (world) (0, 0, 1024, 768) (0, 0, 1024, 768) (0, 0, 1024, 55) (10, 20, 1024, 37) (10, 80, 1024, 18) 1024 768<div>
  • 11. 11 8. Rendering Pipeline Runs on Main Thread [Source: Blink Rendering Pipeline] [Source: Chrome Graphics - BlinkOn 1]
  • 12. 12 9. New Rendering Model: Layers (1/4) [Source: WebKit.org]
  • 13. 13 9. New Rendering Model: Layers (2/4) 1. Avoid unnecessary repainting - If yellow and red have their own layers, then nothing needs "repainting" while this example animates. 2. Makes some features more efficient or practical - Including: Scrolling, 3D CSS(translate3d, …), opacity, filters, WebGL, etc. [Source: Compositing in Blink and WebKit]
  • 14. 14 9. New Rendering Model: Layers (3/4) 1. It's the root object for the page. <html> 2. CSS position properties (relative, absolute) 3. Has overflow, an alpha mask or reflection 4. CSS filter 5. CSS 3D Transform , Animations 6. <canvas>, <video> 7. will-change (Chrome 36, Firefox 36, Opera 24)
  • 15. 15 Cost of Multi Layers: Memory, Computing <Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림> 9. New Rendering Model: Layers (4/4)
  • 16. 16 10. GPU Accelerated Compositing 1. 각 Layer 별 bitmap을 생성 (Render Layer traversing) 2. Text와 Image는 CPU에서 Rasterization 3. Textures upload into Video memory 4. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update
  • 17. 17 Chapter 2, Chromium은 렌더 링 성능 향상을 위하여 어떤 기 술들을 사용하고 있는가?
  • 18. 18 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 1. Chrome Vs Chromium
  • 19. 19 2. Why Multi Process Architecture? 기존 브라우저의 문제점 • 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조 • 과거의 OS는 단일 사용자, 협조적 멀티 태스킹 시스템 • 이와 같은 시스템에서, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침 • 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴 문제해결을 위한 접근 • 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함 • 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정 성에 영향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음
  • 20. 20 3. Chromium Rendering Pipeline [Source: Chrome Graphics - BlinkOn 1]
  • 21. 21 • GPU Process의 구조적 특징: Security, Robustness, Uniformity, Parallelism • Client(Render Process): GL Command를 생성, Ring Buffer에 Insert -> 일반적인 페이지의 경우 Texture Upload용으로 사용, HTML5 Canvas / WebGL은 직접 GL Command를 사용 • Server(GPU Process): Command를 fetch, execution. • GL command는 GL ES 2.0 API와 거의 유사한 Async command 4. GPU Process [Source: GPU Accelerated Compositing in Chrome]
  • 22. 22 5. Multi Threads: Main Thread Rendering [Source: Chrome Graphics - BlinkOn 1]
  • 23. 23 5. Multi Threads: Threaded Compositor [Source: Chrome Graphics - BlinkOn 1]
  • 24. 24 5. Multi Threads: Threaded Rasterization [Source: Chrome Graphics - BlinkOn 1]
  • 25. 25 6. Skia’s SkPicture Canvas A modern 2D graphics library SkPicture, SkPicturePlayBack: Records and replay draw operations. [http://www.dorothybrowser.com/parallelizing-canvas-rendering/]
  • 26. 26 7. Chromium Rendering Pipeline in detail 1. Record 2. Raster 2.5 Upload 3. Composite update record Thread Proxy update recordPicture Layer updatePicture LayerImpl Raster LayerTreeHost update recordupdate recordGraphics Layer Blink LayerTreeHostImpl Proxy Main Thread Compositor Thread Raster Threads Call into WebKit which calls Skia SkPicture records the paint for deferred raster Decode images In parallel Raster into shared memory Send to GPU process using custom extension GPU process does glTexImage2d asynchronously Send draw cmds To GPU Process over command buffer glBindTexture glDrawElements Main Thread Raster Thread Compositor Thread Tree Sync
  • 27. 27 8. Chromium Scheduler: Right things right time 1. Record 3. Raster 4. Upload 5. Composite 2. Tree Sync 6. SwapBuffer Scheduler Begin Frame Commit Pending Tree Draw & Swap Buffer Update Visible Tiles <StateMachine in Compositor Threads> Activate Pending Tree VSync
  • 28. 28 Renderer Process Cache Thread File Thread DB Thread IO Thread I/O Thread Browser Process Main Thread Renderer Process IPC RenderView RenderWidget Blink RenderView RenderWidget RenderWidget Blink Blink RenderView WebContents RenderViewHost Manager RenderViewHost RenderWidgetHost RenderViewHost RenderWidgetHost RenderViewHost RenderWidgetHost SiteInstance RenderProcessHost SiteInstance RenderProcessHost Main ThreadMain Thread WebContents RenderViewHost Manager RenderMainThread (Single Process Mode) 1 2 3 4 5 6 Compositor GPU Thread (Android) Process Launcher Thread Raster I/O Thread Compositor Raster 9. Chromium Architecture in detail
  • 29. 29 Chapter 3, Android Chrome과 Chromium-powered WebView 의 구조적 차이는 무엇인가?
  • 30. 30 1. What is Android WebView? 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
  • 31. 31 2. Android WebView Version History 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
  • 32. 32 3. Chromium Powered WebView Structure Blink(WebKit) Content (Multi-process-impl) Content API Blink Chromium Android WebView Framework Chrome Browser Framework
  • 33. 33 4. Chrome Vs Android Rendering Model Make main thread free Make sure contents on time
  • 34. 34 5. Chrome Vs Chromium WebView Chrome Multi-process  UI thread  GPU thread  Texture upload thread  Per renderer process: o Blink thread o CC impl thread o Raster thread Chromium Scheduler SurfaceView Chromium WebView Single-process  Combined UI + renderer CC thread  Android RenderThread (+in-proces s GPU thread)  Canvas/WebGL GPU thread  Blink thread  Raster thread Android Rendering Scheduer Draw functor (Private API) [Source: Android WebView rendering BlinkOn 3]
  • 35. 35 6. Accelerated Android Rendering [Source: http://www.slideshare.net/deview/1d6review-of-android-l-developer-preview] [MainThread]
  • 36. 36 7. Chromium WebView Rendering Pipeline in K DrawGLFunction() Synchronous Compositor ViewRootImpl performDraw() View Draw(Canvas) View onDraw(Canvas) HardwareCanvas draw*(…,Paint) WebView::onDraw() Set draw functor via DrawGLFunctor::requestDrawGL() (canvas.callDrawGLFunction(mNativeDrawGLFunctor)) 3. Composite Chromium WebView 1. Record 2. Raster Main Blink Thread Raster Threads Main Thread
  • 37. 37 8. Chromium WebView Rendering Pipeline in L WebView::onDraw() 1. Set draw functor 2. Request Record & Raster Synchronous Compositor View onDraw(Canvas) HardwareCanvas draw*(…,Paint) Chromium WebView 1. Record 2. Raster Main Raster Threads ViewRootImpl performDraw() Render Blink Thread DrawGLFunction() Synchronous Compositor 3. Composite Render Thread
  • 38. 38 9. Android Chromium WebView Architecture Blink Thread Cache Thread File Thread DB Thread IO Thread Main Thread IPC WebContents RenderViewHost Manager RenderViewHost RenderWidgetHost RenderViewHost RenderWidgetHost RenderViewHost RenderWidgetHost SiteInstance RenderProcessHost SiteInstance RenderProcessHost Chromium WebView’s Process RenderView RenderWidget Blink Process Launcher Thread Raster Thread WebView
  • 39. 39 10. The Future of WebView? “Under active debate at the moment” (2014/11) 1. Opposing use cases 1) WebView as a browser-in-a-box, Vs 2) WebView as one tool in a hybrid app toolset 2. Opposing update priorities 1) App developers want the latest features and performance improvements 2) They also want stability to the point of bug-for-bug compatibility [Source: Android WebView rendering BlinkOn 3]
  • 40. 40 Appendix #1: References 1. http://www.w3.org/TR/CSS2/ 2. http://www.w3.org/TR/DOM-Level-2-Core/core.html 3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 4. http://deview.kr/2013/detail.nhn?topicSeq=5 5. http://www.slideshare.net/joone/hardware-acceleration-in-webkit 6. http://dev.chromium.org/developers/design-documents/multi-process-architecture 7. https://docs.google.com/a/chromium.org/presentation/d/1pYAGn2AYJ7neFDlDZ9DmL HpwMIskzMUXjFXYR7yfUko/edit 8. http://dev.chromium.org/developers/design-documents/inter-process-communication 9. http://dev.chromium.org/developers/design-documents/multi-process-resource- loading 10. http://dev.chromium.org/developers/design-documents/gpu-accelerated- compositing-in-chrome 11. http://dev.chromium.org/developers/design-documents/compositor-thread- architecture 12. http://dev.chromium.org/developers/design-documents/impl-side-painting 13. http://blog.csdn.net/jaylinzhou/article/details/18313505
  • 41. 41