[D2 campus seminar]웹브라우저 엔진
•
105 likes•11,850 views
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.
Report
Share
[D2 campus seminar]웹브라우저 엔진
- 1. 웹브라우저 엔진 김효 (h.kim@navercorp.com) 시스템스컴퓨팅G / NAVER LABS 2015-2
- 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
- 5. 5 HTML5
- 6. 6 HTML5 On 28 October 2014, HTML5 was released as a W3C Recommendation
- 7. 7 HTML5
- 8. 8 Evolution of the Worldwide Browser Landscape
- 11. 11 Major Browser’s Rendering Engine SERVO
- 12. 12 Mobile browser trend * Code wars - BCG
- 13. 13 어디에 쓰이나? Contents App Engine Browser Devices Web OS Browser Engine
- 15. 15 Browser at High Level CodeCoverage 10% 90% UI Browser Engine Rendering Engine Network I/O JavaScript Engine Graphics Stack DataPersistence
- 16. 16 <html> <head> <title> NAVER </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> Summary of browser main flows.
- 17. 17 Loader
- 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
- 19. 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. 20 HTML CSS DOM Tree Style Rules Renderer TreeLookup Render Tree : Render Tree flows
- 21. 21 HEAD TITLE NAVER BODY DIV H1 P HTML Hello World Block Block Block Block Block Inline Inline Render Tree : Example
- 22. 22 Render Tree : Visual formatting Model < Relative Positioning >< Normal Flow > < Block formatting context > < Inline formatting context >
- 24. 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. 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. 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. 29 1. Non-composited SW rendering (Traditional) 2. Composited SW rendering 3. Composited GPU rendering Types of rendering path
- 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
- 36. How to improve rendering performance
- 37. 37 layout & painting • Layout : 배치를 바꾸는 것 • Painting : 그리는 것 • Web engine의 주요 병목 지점 • Web engine 개발자는 layout과 painting이 – 가능하면 발생하지 않도록 하고, – 빠르게 하고, – 영향을 최소화해야 한다.
- 39. 39 https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html CSS properties by style operation required
- 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 (일종의 메모리 관리)
- 44. 44 Java Script Engine Source Code Parser Syntax Tree Bytecode Generator Bytecode JIT Compiler Machine Code Execution Loader Parser DOM Java Script
- 45. 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. 46 Asm.js • AOT(ahead-of-time) compiling • use asm • JavaScript subset
- 47. 기밀 47 / 파워포인트 문서 사용 안내 Asm.js : Demo
- 48. 48
- 49. 49