This document discusses browser engines and summarizes key points:
1. It describes how browsers work at a high level, including parsing HTML and CSS to build DOM and render trees, performing layout and painting, and using JavaScript engines.
2. It covers advanced rendering technologies like hardware acceleration, compositing, and threaded rendering to improve performance.
3. It provides tips for engine developers to optimize layout, painting, and rendering, such as using layers and translation instead of positioning to reduce reflows.
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. 3
Contents
Browser Engine
How Browser Works
Advanced Rendering Technology
How to Improve Rendering Performance
JavaScript Engine
Naver Labs & Developers
18. 18
DOM: Document Object Model
- Document = HTML, well-formed XML
- Object Model = Data + Method
Standard way for accessing and manipulating documents.
+
HTML Parser : DOM
27. 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.
30. 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. 31
Rendering Path : Hardware Rendering Path
1. 각 Layer 별 bitmap을 생성 (Render Layer traversing)
2. Textures upload into Video memory
3. Compositor에서 Layer 순서에 맞게 Texture를 drawing하여 화면에 Update
37. 37
layout & painting
• Layout : 배치를 바꾸는 것
• Painting : 그리는 것
• Web engine의 주요 병목 지점
• Web engine 개발자는 layout과 painting이
– 가능하면 발생하지 않도록 하고,
– 빠르게 하고,
– 영향을 최소화해야 한다.
40. 40
가능하면 발생하지 않도록
• left/top에 의한 이동은 transform/translate을 이용
• show/hide는 alpha값에 의한 opacity를 이용
Use layers to improve performance
http://sculove.github.io/slides/improveBrowserRendering/#/8
최적의 layer를 구성한다.
41. 41
Use layers to improve performance
< Multi layer mode using translate3d>
< Single layer mode>
42. 42
Tiling
• Viewport와 covered rect에 걸쳐있는 tile들만 paint, texture upload.
• Tile의 크기(width * height)는 가변적이며, 2의 배수 단위를 사용
– Chrome의 경우 256 * 256 을 주로 사용
• 준비되지 않은 Tile이 필요할 때에는 해당 Tile을 생성, paint, upload 해야 함
• Tile Management (일종의 메모리 관리)