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

웹브라우저 엔진
김효 (h.kim@navercorp.com)
시스템스컴퓨팅G / NAVER LABS
2015-2

Hyo Kim (h.kim@navercorp.com, kshow@naver.com)
Linux Kernel/Cluster : 5 Years
Distributed File System, Database, NoSQL Engine : 5 Years
Browser Engine : 5 Years
Naver Web Engine Lead

3
Contents
Browser Engine
How Browser Works
Advanced Rendering Technology
How to Improve Rendering Performance
JavaScript Engine
Naver Labs & Developers

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

8
Evolution of the Worldwide Browser Landscape

11
Major Browser’s Rendering Engine
SERVO

12
Mobile browser trend
* Code wars - BCG

13
어디에 쓰이나?
Contents
App
Engine
Browser
Devices Web OS
Browser
Engine

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

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

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
TreeLookup
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 >

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>

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.

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

How to improve
rendering performance

37
layout & painting
• Layout : 배치를 바꾸는 것
• Painting : 그리는 것
• Web engine의 주요 병목 지점
• Web engine 개발자는 layout과 painting이
– 가능하면 발생하지 않도록 하고,
– 빠르게 하고,
– 영향을 최소화해야 한다.

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 (일종의 메모리 관리)

44
Java Script Engine
Source Code Parser Syntax Tree
Bytecode
Generator
Bytecode
JIT Compiler Machine Code
Execution
Loader
Parser
DOM
Java Script

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
FTLcollect 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

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

More Related Content

What's hot

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

More from NAVER D2

Recently uploaded

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