Post on 08-Sep-2014
description
웹브라우저엔진의구조와원리( 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
Co
de C
ove
rag
e
10%
90%
UI
Browser Engine
Rendering Engine
Network I/OJavaScript
EngineGraphics
Stack
Data
Persiste
nce
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
DOMTree
StyleRules
RendererTreeLookup
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) Floats3) 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
20
3. Rendering (1/2): Ideal
21
3. Rendering (2/2): Real
22
4. Threaded Compositor
23
5. Threaded Rasterization
24
Chapter 3, How to improve rendering performance
25
1. Understanding Dev Tools
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 Jqueryanimate()
6. Paul’s Guideline for Animation
< Paul Irish >
31
32
Appendix #1: Vocabulary
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