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

웹브라우저엔진의구조와원리( Understanding Open Source Rendering Engine )

이형욱 ([email protected])

시스템스컴퓨팅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

http://www.w3.org/TR/CSS2/

http://www.w3.org/TR/DOM-Level-2-Core/core.html

http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

http://deview.kr/2013/detail.nhn?topicSeq=5

http://www.slideshare.net/joone/hardware-acceleration-in-webkit

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

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

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

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

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

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

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