• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[D2 오픈세미나]2.browser engine 이형욱_20140523
 

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

on

  • 5,255 views

 

Statistics

Views

Total Views
5,255
Views on SlideShare
3,232
Embed Views
2,023

Actions

Likes
55
Downloads
103
Comments
0

10 Embeds 2,023

http://helloworld.naver.com 1848
http://www.hanrss.com 111
http://mangastorytelling.tistory.com 27
http://feedly.com 18
https://twitter.com 8
http://www.newsblur.com 6
http://www.linkedin.com 2
http://mail.sensmail.com 1
http://newsblur.com 1
http://116.122.158.233 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 웹브라우저 엔진의 구조와 원리 ( Understanding Open Source Rendering Engine ) 이형욱 (hyungwook.lee@navercorp.com) 시스템스컴퓨팅G / NAVER LABS 2014-05
    • 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 Chapter 1, How browsers work
    • 4 1. Browser at High Level CodeCoverage 10% 90% UI Browser Engine Rendering Engine Network I/O JavaScript Engine Graphics Stack DataPersistence
    • 5 2. Major Browser’s Rendering Engine
    • 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 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 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 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 5. Render Tree (2/4): Visual formatting Model < Relative Positioning >< Normal Flow > < Block formatting context > < Inline formatting context >
    • 11 HTML CSS DOM Tree Style Rules Renderer TreeLookup 5. Render Tree (3/4): Render Tree flows
    • 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 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 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 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 Chapter 2, Advanced Rendering Technology
    • 17 1. Non-composited SW rendering (Traditional) 2. Composited SW rendering 3. Composited GPU rendering 1. Types of rendering path
    • 18 2. Rendering Path : Software Rendering Path 1. Renderer Process에서 skia를 이용하여 bitmap을 생성 (필요 시 compositing) 2. Shared Memory를 이용하여 Browser Process에 전달하여 화면에 Update.
    • 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 3. Rendering (1/2): Ideal
    • 21 3. Rendering (2/2): Real
    • 22 4. Threaded Compositor
    • 23 5. Threaded Rasterization
    • 24 Chapter 3, How to improve rendering performance
    • 25 1. Understanding Dev Tools
    • 26 https://docs.google.com/spreadsheet/pub?key=0ArK1Uipy0SbDdHVLc1ozTFlja1dhb25QNGhJMXN5MXc&single=true&gid=0&output=html 2. CSS properties by style operation required
    • 27 3. Use layers to improve performance < Multi layer mode using translate3d> < Single layer mode>
    • 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 • Compositing 처리시 필요한 Memory 사용량 및 작업량 증가 5. Cost of multi layers <Layer를 너무 많이 사용할 경우 Compositing 시간이 오래 걸림>
    • 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
    • 32 Appendix #1: Vocabulary
    • 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