Successfully reported this slideshow.
Your SlideShare is downloading. ×

Understanding Webkit Rendering

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 82 Ad
Advertisement

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to Understanding Webkit Rendering (20)

Advertisement

Recently uploaded (20)

Understanding Webkit Rendering

  1. 1. Understanding WebKit Rendering Ariya Hidayat Sunday, October 7, 12
  2. 2. whoami Sunday, October 7, 12
  3. 3. Sunday, October 7, 12
  4. 4. WebKit Sunday, October 7, 12
  5. 5. WebKit is Everywhere Sunday, October 7, 12
  6. 6. Browser at a High Level User Interface Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine Stack Sunday, 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. Layout Sunday, 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/howbrowserswork Sunday, October 7, 12
  11. 11. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contents Sunday, 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#parsing Sunday, October 7, 12
  13. 13. DOM Tree vs Render Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:none Sunday, 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 structure Sunday, 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()%22 Sunday, October 7, 12
  20. 20. Painting Sunday, 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 & clipping Sunday, 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 elements Sunday, 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” area Sunday, October 7, 12
  25. 25. Path is Everything Sunday, October 7, 12
  26. 26. Stroke = Outline Solid Dashed Dotted Textured Sunday, October 7, 12
  27. 27. Brush = Fill None Solid Gradient Textured Sunday, October 7, 12
  28. 28. Gradient = Non-uniform Pixel Values Sunday, 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 fill Sunday, October 7, 12
  30. 30. Path Approximation Curves Polygon Sunday, October 7, 12
  31. 31. Antialiasing Multiple levels of transparency Sunday, October 7, 12
  32. 32. Transformation Scaling Perspective Rotation Sunday, October 7, 12
  33. 33. Text Rasterization Sunday, October 7, 12
  34. 34. Font Atlas Buffer Bye Sunday, October 7, 12
  35. 35. Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text Rotated Sunday, 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 Rotated Sunday, October 7, 12
  37. 37. Hardware Acceleration Sunday, October 7, 12
  38. 38. Game vs Web Sunday, October 7, 12
  39. 39. Game Text Textured objects Animation Transformation Physics Sunday, October 7, 12
  40. 40. Large Area, but Still Bounded Sunday, October 7, 12
  41. 41. Web Page Images Text Sunday, October 7, 12
  42. 42. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate Sunday, October 7, 12
  43. 43. SoC = System-on-a-Chip CPU GPU Sunday, October 7, 12
  44. 44. GPU Workflow Matrix Vertices Rendered Textured Sunday, October 7, 12
  45. 45. Optimized for Games “Fixed” geometry Transformation Textured triangles Parallelism Sunday, October 7, 12
  46. 46. Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadel Sunday, 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 bottleneck Sunday, October 7, 12
  49. 49. Traffic Congestion Sunday, October 7, 12
  50. 50. Efficient Use of GPU Drawing Backing Layer & primitives stores compositing Sunday, October 7, 12
  51. 51. Maps Tile Sunday, October 7, 12
  52. 52. Pinch to Zoom when you pinch... Sunday, October 7, 12
  53. 53. Responsive Interface decoupled Rendering Processor User interaction Sunday, October 7, 12
  54. 54. Rendering vs Interaction Screen Backing Store Rendering Web Page User interaction Sunday, October 7, 12
  55. 55. Checkerboard Pattern Sunday, October 7, 12
  56. 56. Progressive Rendering Fast but blurry Crisp but slow Sunday, 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 GPU Sunday, October 7, 12
  59. 59. Tile Transformation Panning = Translation Zooming = Scaling Sunday, October 7, 12
  60. 60. Checkerboard Pattern Sunday, 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 interaction Sunday, 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 thread Sunday, October 7, 12
  64. 64. Mechanics of Animation “Hey, this is good stuff. Cache it as texture Initialization “Apply [operation] to texture #42.” Animation step Sunday, October 7, 12
  65. 65. Elements = Layer Sunday, October 7, 12
  66. 66. Logical 3-D Sunday, 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 that Sunday, October 7, 12
  68. 68. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  69. 69. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
  70. 70. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1 Sunday, October 7, 12
  71. 71. Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer Overflow Sunday, 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. Examples Sunday, 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 color Sunday, October 7, 12
  75. 75. Color Transition: The Trick Blended with http://jsfiddle.net/79AVn Sunday, October 7, 12
  76. 76. Prepare and Reuse Hide the layer offscreen Viewport Sunday, 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” one Sunday, October 7, 12
  78. 78. Avoid Overcapacity .... .... Think of the GPU memory like a cache. Sunday, October 7, 12
  79. 79. Conclusion Sunday, October 7, 12
  80. 80. Rendering Aspects Sunday, October 7, 12
  81. 81. There is No Silver Bullet Sunday, October 7, 12
  82. 82. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayat Sunday, October 7, 12

×