SlideShare a Scribd company logo
1 of 49
Download to read offline
Mobile Browser Internals
( Understanding Blink Rendering Engine )
이형욱 TL (hyungwook.lee@navercorp.com)
웹브라우저기술lab / NAVER LABS
2014-01
0. Contents
1. Chapter 1: Web Browser Basics
①
②
③
④
⑤
⑥

2.

Browser at High Level
Rendering Engine main flow
DOM (Document Object Model)
CSS (Cascading Style Sheets)
Loader, Parser, Tree Builder
Layout, Rendering

Chapter 2: Blink Rendering Engine
①
②
③
④
⑤
⑥
⑦
⑧
⑨
⑩
⑪
⑫

KHTML -> WebKit Vs Blink
Chrome Vs Chromium
Chromium / Blink Source Structure
Chromium / Blink Structure, Use Case
Why multi-process architecture
Blink Multi Process Architecture
Multi-process resource loading
Rendering Path
GPU Process
Threaded Compositor
Threaded Rasterization
Chromium powered WebView
2
Chapter 1, Web Browser Basics

3
1. Browser at High Level

UI

Data Persistence

Code Coverage

10%
Browser Engine

Rendering Engine

90%
Network
I/O

JavaScript
Engine

Graphics
Stack

4
2. Rendering Engine main flow

<html>
<head>
<title> NHN </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>

5
3. DOM (Document Object Model)

+
DOM: Document Object Model
- Document = HTML, well-formed XML
- Object Model = Data + Method
Standard way for accessing and manipulating documents.
6
4. CSS (1/2): Box model
The way the box is layed out is determined by





Box type: inline, block
Box dimensions: width, height
Positioning scheme: static, absolute, fixed, relative
External information: image size / view port size

Default style sheet for HTML 4
html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre { display: block;}
* Default display property: inline

7
4. CSS (2/2): Visual formatting Model

< Inline formatting context >

< Block formatting context >

< Normal Flow >

< Relative Positioning >

8
5. Loader

9
6. Parser (1/3): Basic

10
6. Parser (2/3): Example
HTML

<html>
<head>
<title> NHN </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>

HEAD

BODY

TITLE

DIV

NHN

H1

P

Hello

World

11
6. Parser (3/3): Java Script Engine

Bytecode
Generator

Source Code

Parser

Bytecode

Execution

Syntax Tree

JIT Compiler

Machine Code

Loader

Parser

DOM

Java Script

12
7. Tree Builder (1/5): DOM Tree

HTML

DOM
Tree

CSS

Style
Rules

13
7. Tree Builder (2/5): Render Tree

HTML

DOM
Tree
Lookup

CSS

Renderer
Tree

Style
Rules

14
7. Tree Builder (3/5): DOM Tree & Render Tree

15
7. Tree Builder (4/5): How DOM is Attached

16
7. Tree Builder (5/5): Example
HTML

Block

HEAD

BODY

Block

TITLE

DIV

Block

NHN

H1

Hello

P

World

Block

Block

Inline

Inline
17
8. Layout (1/2): Algorithm Overview
1. CSS 2.1 Visual formatting Model.
1) Normal Flow
① Block formatting contexts
② Inline formatting contexts
③ Relative positioning
2) Floats
3) Absolute positioning

dirty

2. Global and incremental layout
3. Dirty bit system
< Incremental layout >

4. Asynchronous and Synchronous layout

18
8. Layout (2/2): Example
HTML

Block
(0, 0, 1024, 768)

HEAD

BODY

Block
(0, 0, 1024, 768)

TITLE

NHN

Block

DIV

H1

(0, 0, 1024, 55)

P

Block
(10, 20, 1024, 37)

Hello

World

Inline

Block
(10, 80, 1024, 18)

Inline
19
9. Rendering (1/3): Overview
Block (html)
(0, 0, 1024, 768)

Block (body)
(0, 0, 1024, 768)

Block (div)
(0, 0, 1024, 55)

Block (h1)
(10, 20, 1024, 37)

Inline (hello)

<div>

768

Block (p)
(10, 80, 1024, 18)

1024

Inline (world)
20
9. Rendering (2/3): Double Buffering

< Single Backing Store >

< Tiled Backing Store >

21
9. Rendering (3/3): GPU Acceleration
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Textures upload into Video memory
3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update

22
10. Summary of browser main flows.
Loading
HTML

Parsing

Layouting
Layout

DOM
Tree

HTML
Parser

Platform drawing callback.

Render
Tree

attach()

CSS Style
Sheet

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

DOM
Node
DOM
Node

Render
Object

Render
Layer
Render
Object

Render
Layer

23
Chapter 2, Blink Rendering Engine

24
1. KHTML -> WebKit Vs Blink
KHTML, KJS (1999.05 ~)

WebKit (2001 ~)
Open Source in 2005
Apple Forks KHTML, KJS in 2001

Google Forks WebKit in 2013

Blink (2013.04 ~)
25
2. Chrome Vs 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
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

26
3. Chromium / Blink Source Structure

(Blink)

27
4. Chromium / Blink (1/2): Structure
Custom
Browser

Custom Content
Interface Layer

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)
28
4. Chromium / Blink (2/2): Use Case

Custom Content
Interface Layer

Browser
Components
(autocomplete, autofill, bookmark, devtools,
download, favicon, history, omibox … )

Blink

Chromium

Content API
Content
(Multi-process-impl)

Blink(WebKit)
29
5. Why multi-process architecture?
기존 브라우저의 문제점
• 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조
• 과거의 OS는 단일 사용자, 협조적 멀티 태스킹 시스템
• 이와 같은 시스템에서, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침
• 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴

문제해결을 위한 접근
• 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함
• 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정
성에 영향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음

30
6. Blink Multi Process Architecture
Browser Process와
Renderer Process의 연결 구조
Renderer Process의 각 View
역시 Browser Process에
연결 고리를 가짐

각 프로세스별로
입출력을 위한 스레드가
별도로 존재

Renderer Process에
WebKit 렌더링 엔진 존재

31
7. Blink IPC (Inter-process communication)
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)에서 이루어짐
• 스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능

32
8. Blink Multi Process Architecture in detail
Browser Process
IPC
RenderWidgetHost

RenderViewHost
Manager

WebContents

SiteInstance

RenderViewHost

RenderProcessHost

RenderWidgetHost
RenderViewHost

2
1

RenderViewHost
Manager

WebContents

RenderMainThread
(Single Process Mode)

Process Launcher
Thread

SiteInstance

RenderProcessHost

RenderWidgetHost

RenderViewHost

Cache Thread

File Thread

Main Thread

DB Thread

UI Thread

RenderWidget

WebKit

RenderWidget

I/O
Thread

RenderView

6

Main Thread

4

5

3

Renderer Process

Renderer Process
Main Thread

IO Thread

RenderWidget

RenderView

RenderView

WebKit

WebKit

I/O
Thread

33
9. 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
session state, Global resource and network optimizations, Predictive optimizations

34
10. Rendering Path: Blink Architecture

35
10. Rendering Path: Software Rendering Path
1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing)

2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.

36
10. Rendering Path: Hardware Rendering Path
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Textures upload into Video memory
3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update

37
11. GPU Process: Overview
•

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

38
11. GPU Process: Rendering with the compositor

3. GL Command로 Texture Quad요청

2. GL Command로 Textures Upload 요청

1. Compositor에서 bitmap을 생성

39
12. Browser side Compositor

40
13. Rendering: Ideal

41
13. Rendering: Real

42
14. Threaded Compositor

43
15. Threaded Rasterization

44
16. Chromium Powered WebView

AOSP WebView

Chromium WebView

Chromium
Version

WebKit r.84325
Chromium 12.0.742

Chromium
30.0.1599.92

HTML5

298

428

CSS3

45%

75%

DevTool

X

O

Process

single-process

single-process

Engine

WebKit

Blink

Comments

Android ICS부터 Update 없음.

http://html5test.com

http://css3test.com
PC와 동일한 디버깅 환경 제공

Google에서 WebKit을 fork한 버전

45
Appendix #1: Vocabulary

46
Appendix #2: Chrome://tracing

47
Appendix #3: 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.

http://dev.chromium.org/developers/design-documents/displaying-a-web-page-inchrome

8.

http://dev.chromium.org/developers/design-documents/inter-process-communication

9.

http://dev.chromium.org/developers/design-documents/multi-process-resourceloading

10.

http://dev.chromium.org/developers/design-documents/gpu-acceleratedcompositing-in-chrome

11.

http://dev.chromium.org/developers/design-documents/compositor-threadarchitecture

12.

http://dev.chromium.org/developers/design-documents/impl-side-painting
48
49

More Related Content

What's hot

[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것NAVER Engineering
 
Performance Tuning - Memory leaks, Thread deadlocks, JDK tools
Performance Tuning -  Memory leaks, Thread deadlocks, JDK toolsPerformance Tuning -  Memory leaks, Thread deadlocks, JDK tools
Performance Tuning - Memory leaks, Thread deadlocks, JDK toolsHaribabu Nandyal Padmanaban
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptAmit Tyagi
 
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 [122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 NAVER D2
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.jsEmanuele DelBono
 
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...Codemotion
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.Beqa Chacha
 
Chrome DevTools
Chrome DevToolsChrome DevTools
Chrome DevToolsroadster43
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJSAll Things Open
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response StructureBhagyashreeGajera1
 
Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)rahul kundu
 

What's hot (20)

[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것[24]안드로이드 웹뷰의 모든것
[24]안드로이드 웹뷰의 모든것
 
Performance Tuning - Memory leaks, Thread deadlocks, JDK tools
Performance Tuning -  Memory leaks, Thread deadlocks, JDK toolsPerformance Tuning -  Memory leaks, Thread deadlocks, JDK tools
Performance Tuning - Memory leaks, Thread deadlocks, JDK tools
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Html5-Web-Storage
Html5-Web-StorageHtml5-Web-Storage
Html5-Web-Storage
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기 [122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
[122]책에서는 맛볼 수 없는 HTML5 Canvas 이야기
 
An introduction to React.js
An introduction to React.jsAn introduction to React.js
An introduction to React.js
 
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Java Script ppt
Java Script pptJava Script ppt
Java Script ppt
 
HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.HTML Basic, CSS Basic, JavaScript basic.
HTML Basic, CSS Basic, JavaScript basic.
 
Javascript
JavascriptJavascript
Javascript
 
Node.js Express Framework
Node.js Express FrameworkNode.js Express Framework
Node.js Express Framework
 
Chrome DevTools
Chrome DevToolsChrome DevTools
Chrome DevTools
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
 
HTTP Request and Response Structure
HTTP Request and Response StructureHTTP Request and Response Structure
HTTP Request and Response Structure
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 

Similar to Mobile Browser Internal (Blink Rendering Engine)

[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523NAVER D2
 
Dot Net Nuke Presentation
Dot Net Nuke PresentationDot Net Nuke Presentation
Dot Net Nuke PresentationTony Cosentino
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
How browsers work landscape
How browsers work landscapeHow browsers work landscape
How browsers work landscapeanandkishore
 
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_20131022NAVER D2
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8David Chou
 
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 FasterDoris Chen
 
Web browser architecture.87 to 88
Web browser architecture.87 to 88Web browser architecture.87 to 88
Web browser architecture.87 to 88myrajendra
 
How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishNagamurali Reddy
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architectureNguyen Quang
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009ken.egozi
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pagesNilesh Bafna
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
Oshyn Best Practices For Sitecore CMS
Oshyn Best Practices For Sitecore CMSOshyn Best Practices For Sitecore CMS
Oshyn Best Practices For Sitecore CMSdotCMS
 
Oshyn - Best Practices For Sitecore CMS
Oshyn - Best Practices For Sitecore CMSOshyn - Best Practices For Sitecore CMS
Oshyn - Best Practices For Sitecore CMSdotCMS
 
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 AzureTodd Whitehead
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workAlbino Tonnina
 

Similar to Mobile Browser Internal (Blink Rendering Engine) (20)

[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523[D2 오픈세미나]2.browser engine 이형욱_20140523
[D2 오픈세미나]2.browser engine 이형욱_20140523
 
Dot Net Nuke Presentation
Dot Net Nuke PresentationDot Net Nuke Presentation
Dot Net Nuke Presentation
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Top 8 WCM Trends 2010
Top 8 WCM Trends 2010Top 8 WCM Trends 2010
Top 8 WCM Trends 2010
 
How browsers work landscape
How browsers work landscapeHow browsers work landscape
How browsers work landscape
 
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
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
 
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
 
Web browser architecture.87 to 88
Web browser architecture.87 to 88Web browser architecture.87 to 88
Web browser architecture.87 to 88
 
How Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul IrishHow Browsers Work -By Tali Garsiel and Paul Irish
How Browsers Work -By Tali Garsiel and Paul Irish
 
Web browser architecture
Web browser architectureWeb browser architecture
Web browser architecture
 
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
Monorail presentation at WebDevelopersCommunity, Feb 1, 2009
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Oshyn Best Practices For Sitecore CMS
Oshyn Best Practices For Sitecore CMSOshyn Best Practices For Sitecore CMS
Oshyn Best Practices For Sitecore CMS
 
Oshyn - Best Practices For Sitecore CMS
Oshyn - Best Practices For Sitecore CMSOshyn - Best Practices For Sitecore CMS
Oshyn - Best Practices For Sitecore CMS
 
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
 
Polymer Web Framework - Swecha Boot Camp
Polymer Web Framework - Swecha Boot CampPolymer Web Framework - Swecha Boot Camp
Polymer Web Framework - Swecha Boot Camp
 
Html css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers workHtml css workshop, lesson 0, how browsers work
Html css workshop, lesson 0, how browsers work
 

Recently uploaded

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rick Flair
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESmohitsingh558521
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 

Recently uploaded (20)

Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...Rise of the Machines: Known As Drones...
Rise of the Machines: Known As Drones...
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICESSALESFORCE EDUCATION CLOUD | FEXLE SERVICES
SALESFORCE EDUCATION CLOUD | FEXLE SERVICES
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 

Mobile Browser Internal (Blink Rendering Engine)

  • 1. Mobile Browser Internals ( Understanding Blink Rendering Engine ) 이형욱 TL (hyungwook.lee@navercorp.com) 웹브라우저기술lab / NAVER LABS 2014-01
  • 2. 0. Contents 1. Chapter 1: Web Browser Basics ① ② ③ ④ ⑤ ⑥ 2. Browser at High Level Rendering Engine main flow DOM (Document Object Model) CSS (Cascading Style Sheets) Loader, Parser, Tree Builder Layout, Rendering Chapter 2: Blink Rendering Engine ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ KHTML -> WebKit Vs Blink Chrome Vs Chromium Chromium / Blink Source Structure Chromium / Blink Structure, Use Case Why multi-process architecture Blink Multi Process Architecture Multi-process resource loading Rendering Path GPU Process Threaded Compositor Threaded Rasterization Chromium powered WebView 2
  • 3. Chapter 1, Web Browser Basics 3
  • 4. 1. Browser at High Level UI Data Persistence Code Coverage 10% Browser Engine Rendering Engine 90% Network I/O JavaScript Engine Graphics Stack 4
  • 5. 2. Rendering Engine main flow <html> <head> <title> NHN </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> 5
  • 6. 3. DOM (Document Object Model) + DOM: Document Object Model - Document = HTML, well-formed XML - Object Model = Data + Method Standard way for accessing and manipulating documents. 6
  • 7. 4. CSS (1/2): Box model The way the box is layed out is determined by     Box type: inline, block Box dimensions: width, height Positioning scheme: static, absolute, fixed, relative External information: image size / view port size Default style sheet for HTML 4 html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block;} * Default display property: inline 7
  • 8. 4. CSS (2/2): Visual formatting Model < Inline formatting context > < Block formatting context > < Normal Flow > < Relative Positioning > 8
  • 10. 6. Parser (1/3): Basic 10
  • 11. 6. Parser (2/3): Example HTML <html> <head> <title> NHN </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> HEAD BODY TITLE DIV NHN H1 P Hello World 11
  • 12. 6. Parser (3/3): Java Script Engine Bytecode Generator Source Code Parser Bytecode Execution Syntax Tree JIT Compiler Machine Code Loader Parser DOM Java Script 12
  • 13. 7. Tree Builder (1/5): DOM Tree HTML DOM Tree CSS Style Rules 13
  • 14. 7. Tree Builder (2/5): Render Tree HTML DOM Tree Lookup CSS Renderer Tree Style Rules 14
  • 15. 7. Tree Builder (3/5): DOM Tree & Render Tree 15
  • 16. 7. Tree Builder (4/5): How DOM is Attached 16
  • 17. 7. Tree Builder (5/5): Example HTML Block HEAD BODY Block TITLE DIV Block NHN H1 Hello P World Block Block Inline Inline 17
  • 18. 8. Layout (1/2): Algorithm Overview 1. CSS 2.1 Visual formatting Model. 1) Normal Flow ① Block formatting contexts ② Inline formatting contexts ③ Relative positioning 2) Floats 3) Absolute positioning dirty 2. Global and incremental layout 3. Dirty bit system < Incremental layout > 4. Asynchronous and Synchronous layout 18
  • 19. 8. Layout (2/2): Example HTML Block (0, 0, 1024, 768) HEAD BODY Block (0, 0, 1024, 768) TITLE NHN Block DIV H1 (0, 0, 1024, 55) P Block (10, 20, 1024, 37) Hello World Inline Block (10, 80, 1024, 18) Inline 19
  • 20. 9. Rendering (1/3): Overview Block (html) (0, 0, 1024, 768) Block (body) (0, 0, 1024, 768) Block (div) (0, 0, 1024, 55) Block (h1) (10, 20, 1024, 37) Inline (hello) <div> 768 Block (p) (10, 80, 1024, 18) 1024 Inline (world) 20
  • 21. 9. Rendering (2/3): Double Buffering < Single Backing Store > < Tiled Backing Store > 21
  • 22. 9. Rendering (3/3): GPU Acceleration 1. 각 Layer 별 bitmap을 생성 (Render Layer traversing) 2. Textures upload into Video memory 3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update 22
  • 23. 10. Summary of browser main flows. Loading HTML Parsing Layouting Layout DOM Tree HTML Parser Platform drawing callback. Render Tree attach() CSS Style Sheet 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 DOM Node DOM Node Render Object Render Layer Render Object Render Layer 23
  • 24. Chapter 2, Blink Rendering Engine 24
  • 25. 1. KHTML -> WebKit Vs Blink KHTML, KJS (1999.05 ~) WebKit (2001 ~) Open Source in 2005 Apple Forks KHTML, KJS in 2001 Google Forks WebKit in 2013 Blink (2013.04 ~) 25
  • 26. 2. Chrome Vs 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 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 26
  • 27. 3. Chromium / Blink Source Structure (Blink) 27
  • 28. 4. Chromium / Blink (1/2): Structure Custom Browser Custom Content Interface Layer 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) 28
  • 29. 4. Chromium / Blink (2/2): Use Case Custom Content Interface Layer Browser Components (autocomplete, autofill, bookmark, devtools, download, favicon, history, omibox … ) Blink Chromium Content API Content (Multi-process-impl) Blink(WebKit) 29
  • 30. 5. Why multi-process architecture? 기존 브라우저의 문제점 • 현재(크롬 제작 당시)의 브라우저는 과거의 OS와 비슷한 구조 • 과거의 OS는 단일 사용자, 협조적 멀티 태스킹 시스템 • 이와 같은 시스템에서, 어떤 어플리케이션의 문제는 OS 전체의 안정성에 영향을 미침 • 단일 프로세스 모델의 브라우저에서는 한 페이지의 문제가 브라우저 전체에 문제를 일으킴 문제해결을 위한 접근 • 절대적으로 안정적인 렌더링 엔진을 만드는 것은 거의 불가능함 • 최근의 OS는 각 어플리케이션을 고립시킴으로써 특정 어플리케이션의 문제가 시스템 전체의 안정 성에 영향을 미치지 않도록 하며, 사용자 각자의 데이터를 보호하고 있음 30
  • 31. 6. Blink Multi Process Architecture Browser Process와 Renderer Process의 연결 구조 Renderer Process의 각 View 역시 Browser Process에 연결 고리를 가짐 각 프로세스별로 입출력을 위한 스레드가 별도로 존재 Renderer Process에 WebKit 렌더링 엔진 존재 31
  • 32. 7. Blink IPC (Inter-process communication) 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)에서 이루어짐 • 스레드를 분리함으로써 브라우저로의 동기적인 메시지 송수신이 가능 32
  • 33. 8. Blink Multi Process Architecture in detail Browser Process IPC RenderWidgetHost RenderViewHost Manager WebContents SiteInstance RenderViewHost RenderProcessHost RenderWidgetHost RenderViewHost 2 1 RenderViewHost Manager WebContents RenderMainThread (Single Process Mode) Process Launcher Thread SiteInstance RenderProcessHost RenderWidgetHost RenderViewHost Cache Thread File Thread Main Thread DB Thread UI Thread RenderWidget WebKit RenderWidget I/O Thread RenderView 6 Main Thread 4 5 3 Renderer Process Renderer Process Main Thread IO Thread RenderWidget RenderView RenderView WebKit WebKit I/O Thread 33
  • 34. 9. 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 session state, Global resource and network optimizations, Predictive optimizations 34
  • 35. 10. Rendering Path: Blink Architecture 35
  • 36. 10. Rendering Path: Software Rendering Path 1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing) 2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update. 36
  • 37. 10. Rendering Path: Hardware Rendering Path 1. 각 Layer 별 bitmap을 생성 (Render Layer traversing) 2. Textures upload into Video memory 3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update 37
  • 38. 11. GPU Process: Overview • 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 38
  • 39. 11. GPU Process: Rendering with the compositor 3. GL Command로 Texture Quad요청 2. GL Command로 Textures Upload 요청 1. Compositor에서 bitmap을 생성 39
  • 40. 12. Browser side Compositor 40
  • 45. 16. Chromium Powered WebView AOSP WebView Chromium WebView Chromium Version WebKit r.84325 Chromium 12.0.742 Chromium 30.0.1599.92 HTML5 298 428 CSS3 45% 75% DevTool X O Process single-process single-process Engine WebKit Blink Comments Android ICS부터 Update 없음. http://html5test.com http://css3test.com PC와 동일한 디버깅 환경 제공 Google에서 WebKit을 fork한 버전 45
  • 48. Appendix #3: 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. http://dev.chromium.org/developers/design-documents/displaying-a-web-page-inchrome 8. http://dev.chromium.org/developers/design-documents/inter-process-communication 9. http://dev.chromium.org/developers/design-documents/multi-process-resourceloading 10. http://dev.chromium.org/developers/design-documents/gpu-acceleratedcompositing-in-chrome 11. http://dev.chromium.org/developers/design-documents/compositor-threadarchitecture 12. http://dev.chromium.org/developers/design-documents/impl-side-painting 48
  • 49. 49