[D2 campus seminar]웹브라우저 엔진

웹브라우저 엔진

김효 ([email protected])

시스템스컴퓨팅G / NAVER LABS

2015-2

Hyo Kim ([email protected], [email protected])

Linux Kernel/Cluster : 5 Years

Distributed File System, Database, NoSQL Engine : 5 Years

Browser Engine : 5 Years

Naver Web Engine Lead

mailto:[email protected]

mailto:[email protected]

3

Contents

Browser Engine

How Browser Works

Advanced Rendering Technology

How to Improve Rendering Performance

JavaScript Engine

Naver Labs & Developers

Browser Engine

5

HTML5

6

HTML5

On 28 October 2014, HTML5 was released as a W3C Recommendation

7

HTML5

8

Evolution of the Worldwide Browser Landscape

9

Desktop browser trend

10

Mobile browser trend

11

Major Browser’s Rendering Engine

SERVO

12

Mobile browser trend

* Code wars - BCG

13

어디에 쓰이나?

Contents

App Engine

Browser

Devices Web OS

Browser Engine

How browsers work

15

Browser at High Level

Co

de C

ove

rag

e

10%

90%

UI

Browser Engine

Rendering Engine

Network I/O JavaScript

Engine Graphics

Stack

Data

Persiste

nce

16

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

Summary of browser main flows.

17

Loader

18

DOM: Document Object Model - Document = HTML, well-formed XML - Object Model = Data + Method Standard way for accessing and manipulating documents.

+

HTML Parser : DOM

19

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>

HTML Parser : Example

20

HTML

CSS

DOM Tree

Style Rules

Renderer Tree Lookup

Render Tree : Render Tree flows

21

HEAD

TITLE

NAVER

BODY

DIV

H1 P

HTML

Hello World

Block

Block

Block

Block Block

Inline Inline

Render Tree : Example

22

Render Tree : Visual formatting Model

< Relative Positioning > < Normal Flow >

< Block formatting context >

< Inline formatting context >

23

CSS layout reflow

24

Layout : 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)

25

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>

26

CSS Z-order layer

27

Summary of browser main flows.

DOM Node

DOM Node

DOM Node

DOM Node

DOM Node

DOM Node

Render Object

Render Object

Render Object

Render Object

Render Object

Render Object

Render Layer

Render Layer

Render Layer

Render Layer

HTML

CSS Style Sheet

HTML Parser

CSS Parser

DOM Tree

Style Rule

attach() Render

Tree

Layout

Painting Display

Parsing Layouting Painting

DOM Tree Render Tree

Loading

Platform drawing callback.

Advanced Rendering Technology

29

1. Non-composited SW rendering (Traditional)

2. Composited SW rendering

3. Composited GPU rendering

Types of rendering path

30

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>

31

Rendering Path : Hardware Rendering Path

1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)

2. Textures upload into Video memory

3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update

32

Rendering (1/2): Ideal

33

Rendering (2/2): Real

34

Threaded Compositor

35

Threaded Rasterization

How to improve rendering performance

37

layout & painting

• Layout : 배치를 바꾸는 것

• Painting : 그리는 것

• Web engine의 주요 병목 지점

• Web engine 개발자는 layout과 painting이

– 가능하면 발생하지 않도록 하고,

– 빠르게 하고,

– 영향을 최소화해야 한다.

38

Understanding Dev Tools

39

https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html

CSS properties by style operation required

40

가능하면 발생하지 않도록

• left/top에 의한 이동은 transform/translate을 이용

• show/hide는 alpha값에 의한 opacity를 이용

Use layers to improve performance

http://sculove.github.io/slides/improveBrowserRendering/#/8

최적의 layer를 구성한다.

41

Use layers to improve performance

< Multi layer mode using translate3d>

< Single layer mode>

42

Tiling

• Viewport와 covered rect에 걸쳐있는 tile들만 paint, texture upload.

• Tile의 크기(width * height)는 가변적이며, 2의 배수 단위를 사용 – Chrome의 경우 256 * 256 을 주로 사용

• 준비되지 않은 Tile이 필요할 때에는 해당 Tile을 생성, paint, upload 해야 함

• Tile Management (일종의 메모리 관리)

JavaScript Engine

44

Java Script Engine

Source Code Parser Syntax Tree

Bytecode Generator

Bytecode

JIT Compiler Machine Code

Execution

Loader

Parser

DOM

Java Script

http://jrmcv.files.wordpress.com/2010/06/wigl_bytecode.png

45

JavaScriptCore FLT JIT optimization

JS Source

Interpret with LLInt

Compile with Baseline

Compile with DFG

Execute Baseline code

Execute DFG code

Execute FTL code

Compile with FTL collect LLInt

profiling

collect Baseline profiling :

value profiles and inline caches

collect DFG profiling :

context-sensitive profiling for any inlined functions

code ran for a while trigger DFG compilation

trigger FTL compilation

46

Asm.js

• AOT(ahead-of-time) compiling • use asm • JavaScript subset

기밀

47 / 파워포인트 문서 사용 안내

Asm.js : Demo

48

49