[D2 오픈세미나]2.browser engine 이형욱_20140523

웹브라우저 엔진의 구조와 원리
( Understanding Open Source Rendering Engine )
이형욱 (hyungwook.lee@navercorp.com)
시스템스컴퓨팅G / NAVER LABS
2014-05

2
0. Contents
Chapter 1: How browsers work
① Browser at High Level
② Major Browser’s Rendering Engine
③ Summary of browser main flows.
④ HTML Parser
⑤ Render Tree
⑥ Layout
⑦ Paint
Chapter 2: Advanced Rendering Technology
① Types of rendering path
② Software Rendering Path
③ Hardware Rendering Path
④ Threaded Compositor
⑤ Threaded Rasterization
Chapter 3: How to improve rendering performance
① Understanding Dev Tools
② CSS properties by style operation required
③ Use layers to improve performance
④ Layers in WebKit
⑤ Cost of multi layers
⑥ Paul’s Guideline for Animation

3
Chapter 1, How browsers work

4
1. Browser at High Level
CodeCoverage
10%
90%
UI
Browser Engine
Rendering Engine
Network I/O
JavaScript
Engine
Graphics
Stack
DataPersistence

5
2. Major Browser’s Rendering Engine

6
<html>
<head>
<title> NAVER </title>
</head>
<body>
<div>
<h1> Hello </h1>
<p> World </p>
</div>
</body>
</html>
3. Summary of browser main flows.

7
DOM: Document Object Model
- Document = HTML, well-formed XML
- Object Model = Data + Method
Standard way for accessing and manipulating documents.
+
4. HTML Parser (1/2): DOM

8
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>
4. HTML Parser (2/2): Example

9
5. Render Tree (1/4): CSS Box model
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
Default style sheet for HTML 4
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

10
5. Render Tree (2/4): Visual formatting Model
< Relative Positioning >< Normal Flow >
< Block formatting context >
< Inline formatting context >

11
HTML
CSS
DOM
Tree
Style
Rules
Renderer
TreeLookup
5. Render Tree (3/4): Render Tree flows

12
HEAD
TITLE
NAVER
BODY
DIV
H1 P
HTML
Hello World
Block
Block
Block
Block Block
Inline Inline
5. Render Tree (4/4): Example

13
6. 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
2. Global and incremental layout
3. Dirty bit system
4. Asynchronous and Synchronous layout
dirty
< Incremental layout >

14
6. Layout (2/2): Example
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)

15
7. Paint
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>

16
Chapter 2, Advanced Rendering Technology

17
1. Non-composited SW rendering (Traditional)
2. Composited SW rendering
3. Composited GPU rendering
1. Types of rendering path

18
2. Rendering Path : Software Rendering Path
1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing)
2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.

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

24
Chapter 3, How to improve rendering performance

26
https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html
2. CSS properties by style operation required

27
3. Use layers to improve performance
< Multi layer mode using translate3d>
< Single layer mode>

28
4. Layers in WebKit
1. It's the root object for the page. <html>
2. CSS position properties (relative, absolute or a
transform)
3. It is transparent
4. Has overflow, an alpha mask or reflection
5. Has a CSS filter
6. <canvas>
7. <video>

29
• Compositing 처리시 필요한 Memory 사용량 및 작업량 증가
5. Cost of multi layers
<Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림>

30
1. Use “opacity, translate, rotate and scale”
2. Use reqeustAnimateFrame. Avoid setTimeout,
setInterval
3. Use Browser Optimized CSS animation. Avoid Jquery
animate()
6. Paul’s Guideline for Animation
< Paul Irish >

33
Appendix #2: 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-in-
chrome
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

[D2 오픈세미나]2.browser engine 이형욱_20140523

More Related Content

What's hot

Viewers also liked

Similar to [D2 오픈세미나]2.browser engine 이형욱_20140523

More from NAVER D2

Recently uploaded

[D2 오픈세미나]2.browser engine 이형욱_20140523