Understanding                        WebKit Rendering                             Ariya HidayatSunday, October 7, 12
whoamiSunday, October 7, 12
Sunday, October 7, 12
WebKitSunday, October 7, 12
WebKit is EverywhereSunday, October 7, 12
Browser at a High Level                                        User Interface                                             ...
WebKit Components                                              Render Engine                                              ...
Platform Abstraction                        Networking                                     Thread         Geolocation    T...
LayoutSunday, October 7, 12
From Contents to Pixels                                                        DOM                                        ...
DOM Tree                        <html><body><p>Hello</p></body></html>           HTMLDocument                   HTMLBodyEl...
HTML Parsing                                                           tag                                                ...
DOM Tree vs Render Tree            HTMLDocument                                    RenderRoot                 HTMLBodyElem...
“Attach” Process                        Historical: Node is invisible, attach it to the main view to make it visible      ...
Sunday, October 7, 12
It’s a forest!Sunday, October 7, 12
Effects of Style Recalc and Layout      document.getElementById(box).style.top = 100px;                                   ...
Getting the Right Style                                                                          Stylesheet List          ...
Minimizing Layout                                             Element                              clientHeight           ...
PaintingSunday, October 7, 12
Goals of Painting       • “Visualize” all RenderObjects (again, tree traversal)       • All painting commands go to Graphi...
CSS Painting: 10 Stages                               http://www.w3.org/TR/CSS2/zindex.html                        Appendi...
Graphics Abstraction                                                       Chromium                                       ...
Painting Flow: Browser vs WebKit                        Browser                                                           ...
Path is EverythingSunday, October 7, 12
Stroke = Outline                    Solid   Dashed   Dotted   TexturedSunday, October 7, 12
Brush = Fill             None       Solid   Gradient   TexturedSunday, October 7, 12
Gradient = Non-uniform Pixel ValuesSunday, October 7, 12
Drawing Time: Solid vs Gradient                         Only border                                                    14x...
Path Approximation                    Curves                             PolygonSunday, October 7, 12
Antialiasing                        Multiple levels of transparencySunday, October 7, 12
Transformation                   Scaling                                        Perspective                             Ro...
Text RasterizationSunday, October 7, 12
Font Atlas                        Buffer                                 ByeSunday, October 7, 12
Simple to Complex                                     ell o!                                    H                   Simple...
Simple to Complex                                                           ell o!                                        ...
Hardware AccelerationSunday, October 7, 12
Game vs WebSunday, October 7, 12
Game                                                          Text                                                        ...
Large Area, but Still BoundedSunday, October 7, 12
Web Page                               Images                        TextSunday, October 7, 12
Challenges        Predictable contents (assets)   ✔         Mostly text                          ✔         Mostly images  ...
SoC = System-on-a-Chip                                CPU   GPUSunday, October 7, 12
GPU Workflow                          Matrix               Vertices            Rendered   TexturedSunday, October 7, 12
Optimized for Games                              “Fixed” geometry                             Transformation              ...
Powerful Capabilities            http://epicgames.com/technology/   http://www.rage.com/                        epic-citad...
http://www.trollquotes.org/619-super-spider-bat-troll-quote/Sunday, October 7, 12
Fundamental Physical Limitations       • Memory: Can’t store too much stuff       • Speed: Quad-core CPU can do certain op...
Traffic CongestionSunday, October 7, 12
Efficient Use of GPU                 Drawing      Backing     Layer &                 primitives    stores   compositingSun...
Maps                        TileSunday, October 7, 12
Pinch to Zoom         when you pinch...Sunday, October 7, 12
Responsive Interface                                                 decoupled                        Rendering           ...
Rendering vs Interaction                                                            Screen                                ...
Checkerboard PatternSunday, October 7, 12
Progressive Rendering                        Fast but blurry                                          Crisp but slowSunday...
Perceived Responsiveness                        User pinches                                                        Smooth...
Tiling System                                 Texture upload                          ....                ....            ...
Tile Transformation            Panning = Translation   Zooming = ScalingSunday, October 7, 12
Checkerboard PatternSunday, October 7, 12
Typical Animation                        opacity, movement, scaling, rotation, ...Sunday, October 7, 12
Principles of Fluid Animation                             At the beginning, push as many                        1         ...
Immediate vs Retained                                   At the beginning...                                               ...
Mechanics of Animation                                         “Hey, this is good stuff. Cache it as texture              ...
Elements = LayerSunday, October 7, 12
Logical 3-DSunday, October 7, 12
Compositing By Force                        -webkit-transform: translateZ(0)                             Not needed for CS...
Magical Advice                         Use translate3d for                        hardware accelerationSunday, October 7, 12
Magical Advice                         Use translate3d for                        hardware accelerationSunday, October 7, 12
Debugging in Safari              defaults write com.apple.Safari IncludeInternalDebugMenu 1Sunday, October 7, 12
Compositing Indicators                                Texture (number = upload)                                   Composit...
Avoid Texture Reupload                        No reupload                     Upload                           Opacity    ...
ExamplesSunday, October 7, 12
Color Transition                        @-webkit-keyframes box {                            0% { -webkit-transform: backgr...
Color Transition: The Trick                              Blended with                                         http://jsfidd...
Prepare and Reuse                                   Hide the layer                                     offscreen          ...
Timer Latency                                                              Depending                                      ...
Avoid Overcapacity                                   ....        ....                        Think of the GPU memory like ...
ConclusionSunday, October 7, 12
Rendering AspectsSunday, October 7, 12
There is No Silver BulletSunday, October 7, 12
Thank You                        ariya.hidayat@gmail.com                        ariya.ofilabs.com                        @A...
Upcoming SlideShare
Loading in...5
×

Understanding Webkit Rendering

19,842

Published on

Published in: Technology
0 Comments
49 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,842
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
577
Comments
0
Likes
49
Embeds 0
No embeds

No notes for slide

Understanding Webkit Rendering

  1. 1. Understanding WebKit Rendering Ariya HidayatSunday, October 7, 12
  2. 2. whoamiSunday, October 7, 12
  3. 3. Sunday, October 7, 12
  4. 4. WebKitSunday, October 7, 12
  5. 5. WebKit is EverywhereSunday, October 7, 12
  6. 6. Browser at a High Level User Interface Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine StackSunday, October 7, 12
  7. 7. WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8)Sunday, October 7, 12
  8. 8. Platform Abstraction Networking Thread Geolocation Timer I/O Client Interface Clipboard Events Theme Graphics API Calls Events Port (Chrome, Safari, etc.)Sunday, October 7, 12
  9. 9. LayoutSunday, October 7, 12
  10. 10. From Contents to Pixels DOM Render Layout HTML DOM HTML Parser Tree Render Paint Tree Style CSS Style Sheets Parser Rules http://www.html5rocks.com/en/tutorials/internals/howbrowsersworkSunday, October 7, 12
  11. 11. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contentsSunday, October 7, 12
  12. 12. HTML Parsing tag <html><body><p>Hello</p></body></html> Loader Tokenizer text DOM Tree May come in chunks Tree Builder Section 12.2 in HTML Specification http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#parsingSunday, October 7, 12
  13. 13. DOM Tree vs Render Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:noneSunday, October 7, 12
  14. 14. “Attach” Process Historical: Node is invisible, attach it to the main view to make it visible View 1:1 many:1 Node/Element RenderObject RenderStyle tree structure/navigation <div>42</div> computed style metrics (box model) hit testing another tree structureSunday, October 7, 12
  15. 15. Sunday, October 7, 12
  16. 16. It’s a forest!Sunday, October 7, 12
  17. 17. Effects of Style Recalc and Layout document.getElementById(box).style.top = 100px; Aggregated “dirty” area document.getElementById(box).style.backgroundColor = red; No layout necessary, metrics are not flagged as “changed”Sunday, October 7, 12
  18. 18. Getting the Right Style Stylesheet List HTMLDocument p { color: blue } HTMLBodyElement HTMLParagraphElement DOM Tree RenderStyle CSS Style Selector: id, class, tags, ...Sunday, October 7, 12
  19. 19. Minimizing Layout Element clientHeight focus() clientLeft getBoundingClientRect() clientTop getClientRects() clientWidth scrollByLines() offsetHeight scrollByPages() offsetLeft scrollHeight offsetParent scrollIntoView() offsetTop scrollIntoViewIfNeeded() offsetWidth scrollLeft scrollTop scrollWidth innerText outerText http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html http://code.google.com/p/chromium/source/search?q=%22-%3EupdateLayoutIgnorePendingStylesheets()%22Sunday, October 7, 12
  20. 20. PaintingSunday, October 7, 12
  21. 21. Goals of Painting • “Visualize” all RenderObjects (again, tree traversal) • All painting commands go to GraphicsContext abstraction • Important Optimizations • Clipped to the visible viewport • Back-to-front Transparency & clippingSunday, October 7, 12
  22. 22. CSS Painting: 10 Stages http://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of Stacking Contexts • Background • Floats • Foreground • Selection Done by the render objects • Outline (in the render tree)Sunday, October 7, 12
  23. 23. Graphics Abstraction Chromium Android Qt Mac & iOS GraphicsContext Skia CoreGraphics QPainter graphics stack Native controls, RenderTheme e.g. form elementsSunday, October 7, 12
  24. 24. Painting Flow: Browser vs WebKit Browser WebKit User scrolls the viewport Request painting, GraphicsContext Sometimes to the backing store Style change Mark “dirty” areaSunday, October 7, 12
  25. 25. Path is EverythingSunday, October 7, 12
  26. 26. Stroke = Outline Solid Dashed Dotted TexturedSunday, October 7, 12
  27. 27. Brush = Fill None Solid Gradient TexturedSunday, October 7, 12
  28. 28. Gradient = Non-uniform Pixel ValuesSunday, October 7, 12
  29. 29. Drawing Time: Solid vs Gradient Only border 14x slower Solid color fill (depending on the dimension) Linear gradient fill Radial gradient fillSunday, October 7, 12
  30. 30. Path Approximation Curves PolygonSunday, October 7, 12
  31. 31. Antialiasing Multiple levels of transparencySunday, October 7, 12
  32. 32. Transformation Scaling Perspective RotationSunday, October 7, 12
  33. 33. Text RasterizationSunday, October 7, 12
  34. 34. Font Atlas Buffer ByeSunday, October 7, 12
  35. 35. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text RotatedSunday, October 7, 12
  36. 36. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Make it as an image RotatedSunday, October 7, 12
  37. 37. Hardware AccelerationSunday, October 7, 12
  38. 38. Game vs WebSunday, October 7, 12
  39. 39. Game Text Textured objects Animation Transformation PhysicsSunday, October 7, 12
  40. 40. Large Area, but Still BoundedSunday, October 7, 12
  41. 41. Web Page Images TextSunday, October 7, 12
  42. 42. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediateSunday, October 7, 12
  43. 43. SoC = System-on-a-Chip CPU GPUSunday, October 7, 12
  44. 44. GPU Workflow Matrix Vertices Rendered TexturedSunday, October 7, 12
  45. 45. Optimized for Games “Fixed” geometry Transformation Textured triangles ParallelismSunday, October 7, 12
  46. 46. Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadelSunday, October 7, 12
  47. 47. http://www.trollquotes.org/619-super-spider-bat-troll-quote/Sunday, October 7, 12
  48. 48. Fundamental Physical Limitations • Memory: Can’t store too much stuff • Speed: Quad-core CPU can do certain operations better • Bandwidth: Data transfer can be the bottleneckSunday, October 7, 12
  49. 49. Traffic CongestionSunday, October 7, 12
  50. 50. Efficient Use of GPU Drawing Backing Layer & primitives stores compositingSunday, October 7, 12
  51. 51. Maps TileSunday, October 7, 12
  52. 52. Pinch to Zoom when you pinch...Sunday, October 7, 12
  53. 53. Responsive Interface decoupled Rendering Processor User interactionSunday, October 7, 12
  54. 54. Rendering vs Interaction Screen Backing Store Rendering Web Page User interactionSunday, October 7, 12
  55. 55. Checkerboard PatternSunday, October 7, 12
  56. 56. Progressive Rendering Fast but blurry Crisp but slowSunday, October 7, 12
  57. 57. Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!)Sunday, October 7, 12
  58. 58. Tiling System Texture upload .... .... CPU GPUSunday, October 7, 12
  59. 59. Tile Transformation Panning = Translation Zooming = ScalingSunday, October 7, 12
  60. 60. Checkerboard PatternSunday, October 7, 12
  61. 61. Typical Animation opacity, movement, scaling, rotation, ...Sunday, October 7, 12
  62. 62. Principles of Fluid Animation At the beginning, push as many 1 resources as possible to the GPU 2 During the animation, minimize CPU-GPU interactionSunday, October 7, 12
  63. 63. Immediate vs Retained At the beginning... draw the shape onto a buffer For every animation tick... blit the buffer at (x, draw the shape at (x, y) y) x = x + 10 x = x + 10 Off main threadSunday, October 7, 12
  64. 64. Mechanics of Animation “Hey, this is good stuff. Cache it as texture Initialization “Apply [operation] to texture #42.” Animation stepSunday, October 7, 12
  65. 65. Elements = LayerSunday, October 7, 12
  66. 66. Logical 3-DSunday, October 7, 12
  67. 67. Compositing By Force -webkit-transform: translateZ(0) Not needed for CSS .someid { -webkit-animation-name: somekeyframeanimation; -webkit-animation-duration: 7s; -webkit-transform: translateZ(0); } Don’t do thatSunday, October 7, 12
  68. 68. Magical Advice Use translate3d for hardware accelerationSunday, October 7, 12
  69. 69. Magical Advice Use translate3d for hardware accelerationSunday, October 7, 12
  70. 70. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1Sunday, October 7, 12
  71. 71. Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer OverflowSunday, October 7, 12
  72. 72. Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS”Sunday, October 7, 12
  73. 73. ExamplesSunday, October 7, 12
  74. 74. Color Transition @-webkit-keyframes box { 0% { -webkit-transform: background-color: blue; } 100% { -webkit-transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between colorSunday, October 7, 12
  75. 75. Color Transition: The Trick Blended with http://jsfiddle.net/79AVnSunday, October 7, 12
  76. 76. Prepare and Reuse Hide the layer offscreen ViewportSunday, October 7, 12
  77. 77. Timer Latency Depending on user Animation end triggers the JavaScript callback JavaScript code kicks the next animation Prepare both animation and hide the “wrong” oneSunday, October 7, 12
  78. 78. Avoid Overcapacity .... .... Think of the GPU memory like a cache.Sunday, October 7, 12
  79. 79. ConclusionSunday, October 7, 12
  80. 80. Rendering AspectsSunday, October 7, 12
  81. 81. There is No Silver BulletSunday, October 7, 12
  82. 82. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayatSunday, October 7, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×