Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
[D2 오픈세미나]2.browser engine 이형욱_20140523
1. 웹브라우저 엔진의 구조와 원리
( Understanding Open Source Rendering Engine )
이형욱 (hyungwook.lee@navercorp.com)
시스템스컴퓨팅G / NAVER LABS
2014-05
2. 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
7. 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
18. 18
2. Rendering Path : Software Rendering Path
1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing)
2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.
19. 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
27. 27
3. Use layers to improve performance
< Multi layer mode using translate3d>
< Single layer mode>
28. 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. 29
• Compositing 처리시 필요한 Memory 사용량 및 작업량 증가
5. Cost of multi layers
<Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림>
30. 30
1. Use “opacity, translate, rotate and scale”
2. Use reqeustAnimateFrame. Avoid setTimeout,
setInterval
3. Use Browser Optimized CSS animation. Avoid Jquery
animate()
6. Paul’s Guideline for Animation
< Paul Irish >