View
5.973
Download
4
Category
Preview:
Citation preview
웹브라우저 엔진
김효 (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
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
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
Recommended