Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[D2 오픈세미나]2.browser engine 이형욱_20140523

10,875 views

Published on

Published in: Technology
  • Be the first to comment

[D2 오픈세미나]2.browser engine 이형욱_20140523

  1. 1. 웹브라우저 엔진의 구조와 원리 ( Understanding Open Source Rendering Engine ) 이형욱 (hyungwook.lee@navercorp.com) 시스템스컴퓨팅G / NAVER LABS 2014-05
  2. 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
  3. 3. 3 Chapter 1, How browsers work
  4. 4. 4 1. Browser at High Level CodeCoverage 10% 90% UI Browser Engine Rendering Engine Network I/O JavaScript Engine Graphics Stack DataPersistence
  5. 5. 5 2. Major Browser’s Rendering Engine
  6. 6. 6 <html> <head> <title> NAVER </title> </head> <body> <div> <h1> Hello </h1> <p> World </p> </div> </body> </html> 3. Summary of browser main flows.
  7. 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
  8. 8. 8 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> 4. HTML Parser (2/2): Example
  9. 9. 9 5. Render Tree (1/4): CSS Box model html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block;} * Default display property: inline Default style sheet for HTML 4 The way the box is layed out is determined by  Box type: inline, block  Box dimensions: width, height  Positioning scheme: static, absolute, fixed, relative  External information: image size / view port size
  10. 10. 10 5. Render Tree (2/4): Visual formatting Model < Relative Positioning >< Normal Flow > < Block formatting context > < Inline formatting context >
  11. 11. 11 HTML CSS DOM Tree Style Rules Renderer TreeLookup 5. Render Tree (3/4): Render Tree flows
  12. 12. 12 HEAD TITLE NAVER BODY DIV H1 P HTML Hello World Block Block Block Block Block Inline Inline 5. Render Tree (4/4): Example
  13. 13. 13 6. Layout (1/2): Algorithm Overview 1. CSS 2.1 Visual formatting Model. 1) Normal Flow ① Block formatting contexts ② Inline formatting contexts ③ Relative positioning 2) Floats 3) Absolute positioning 2. Global and incremental layout 3. Dirty bit system 4. Asynchronous and Synchronous layout dirty < Incremental layout >
  14. 14. 14 6. Layout (2/2): 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)
  15. 15. 15 7. 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>
  16. 16. 16 Chapter 2, Advanced Rendering Technology
  17. 17. 17 1. Non-composited SW rendering (Traditional) 2. Composited SW rendering 3. Composited GPU rendering 1. Types of rendering path
  18. 18. 18 2. Rendering Path : Software Rendering Path 1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing) 2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.
  19. 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
  20. 20. 20 3. Rendering (1/2): Ideal
  21. 21. 21 3. Rendering (2/2): Real
  22. 22. 22 4. Threaded Compositor
  23. 23. 23 5. Threaded Rasterization
  24. 24. 24 Chapter 3, How to improve rendering performance
  25. 25. 25 1. Understanding Dev Tools
  26. 26. 26 https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html 2. CSS properties by style operation required
  27. 27. 27 3. Use layers to improve performance < Multi layer mode using translate3d> < Single layer mode>
  28. 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. 29 • Compositing 처리시 필요한 Memory 사용량 및 작업량 증가 5. Cost of multi layers <Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림>
  30. 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 >
  31. 31. 31
  32. 32. 32 Appendix #1: Vocabulary
  33. 33. 33 Appendix #2: References 1. http://www.w3.org/TR/CSS2/ 2. http://www.w3.org/TR/DOM-Level-2-Core/core.html 3. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ 4. http://deview.kr/2013/detail.nhn?topicSeq=5 5. http://www.slideshare.net/joone/hardware-acceleration-in-webkit 6. http://dev.chromium.org/developers/design-documents/multi-process-architecture 7. http://dev.chromium.org/developers/design-documents/displaying-a-web-page-in- chrome 8. http://dev.chromium.org/developers/design-documents/inter-process-communication 9. http://dev.chromium.org/developers/design-documents/multi-process-resource- loading 10. http://dev.chromium.org/developers/design-documents/gpu-accelerated- compositing-in-chrome 11. http://dev.chromium.org/developers/design-documents/compositor-thread- architecture 12. http://dev.chromium.org/developers/design-documents/impl-side-painting

×