Download as PDF, PPTX
![Mechanics of Animation
“Hey, this is good stuff. Cache it as texture
Initialization
“Apply [operation] to texture #42.”
Animation step
Sunday, October 7, 12](https://image.slidesharecdn.com/understanding-webkit-rendering-121007174442-phpapp02/85/Understanding-Webkit-Rendering-64-320.jpg)
![Mechanics of Animation
“Hey, this is good stuff. Cache it as texture
Initialization
“Apply [operation] to texture #42.”
Animation step
Sunday, October 7, 12](https://image.slidesharecdn.com/understanding-webkit-rendering-121007174442-phpapp02/75/Understanding-Webkit-Rendering-64-2048.jpg)
Uploaded byAriya Hidayat
Understanding Webkit Rendering
The document discusses the process of rendering and layout in WebKit. It explains that WebKit parses HTML into a DOM tree and applies CSS styles to create a render tree. It then lays out elements based on their metrics and computed styles to establish positioning. Finally, it paints the render tree onto the screen by traversing it and issuing drawing commands to the underlying graphics system. The document provides details on how style calculations, layout, and painting optimizations work to efficiently display content on the web.
More Related Content
Similar to Understanding Webkit Rendering
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Understanding Webkit Rendering
- 1. Understanding WebKit Rendering Ariya Hidayat Sunday, October 7, 12
- 2.
- 3.
- 4.
- 5. WebKit is Everywhere Sunday,October 7, 12
- 6. Browser at aHigh Level User Interface Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine Stack Sunday, October 7, 12
- 7. WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8) Sunday, October 7, 12
- 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.
- 10. From Contents toPixels 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. DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contents Sunday, October 7, 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. DOM Tree vsRender Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:none Sunday, October 7, 12
- 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.
- 16. It’s a forest! Sunday,October 7, 12
- 17. Effects of StyleRecalc 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. Getting the RightStyle Stylesheet List HTMLDocument p { color: blue } HTMLBodyElement HTMLParagraphElement DOM Tree RenderStyle CSS Style Selector: id, class, tags, ... Sunday, October 7, 12
- 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.
- 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. CSS Painting: 10Stages 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. 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. Painting Flow: Browservs 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. Path is Everything Sunday,October 7, 12
- 26. Stroke = Outline Solid Dashed Dotted Textured Sunday, October 7, 12
- 27. Brush = Fill None Solid Gradient Textured Sunday, October 7, 12
- 28. Gradient = Non-uniformPixel Values Sunday, October 7, 12
- 29. Drawing Time: Solidvs Gradient Only border 14x slower Solid color fill (depending on the dimension) Linear gradient fill Radial gradient fill Sunday, October 7, 12
- 30. Path Approximation Curves Polygon Sunday, October 7, 12
- 31. Antialiasing Multiple levels of transparency Sunday, October 7, 12
- 32. Transformation Scaling Perspective Rotation Sunday, October 7, 12
- 33.
- 34. Font Atlas Buffer Bye Sunday, October 7, 12
- 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. 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.
- 38. Game vs Web Sunday,October 7, 12
- 39. Game Text Textured objects Animation Transformation Physics Sunday, October 7, 12
- 40. Large Area, butStill Bounded Sunday, October 7, 12
- 41. Web Page Images Text Sunday, October 7, 12
- 42. Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediate Sunday, October 7, 12
- 43. SoC = System-on-a-Chip CPU GPU Sunday, October 7, 12
- 44. GPU Workflow Matrix Vertices Rendered Textured Sunday, October 7, 12
- 45. Optimized for Games “Fixed” geometry Transformation Textured triangles Parallelism Sunday, October 7, 12
- 46. Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadel Sunday, October 7, 12
- 47.
- 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.
- 50. Efficient Use ofGPU Drawing Backing Layer & primitives stores compositing Sunday, October 7, 12
- 51. Maps Tile Sunday, October 7, 12
- 52. Pinch to Zoom when you pinch... Sunday, October 7, 12
- 53. Responsive Interface decoupled Rendering Processor User interaction Sunday, October 7, 12
- 54. Rendering vs Interaction Screen Backing Store Rendering Web Page User interaction Sunday, October 7, 12
- 55.
- 56. Progressive Rendering Fast but blurry Crisp but slow Sunday, October 7, 12
- 57. Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!) Sunday, October 7, 12
- 58. Tiling System Texture upload .... .... CPU GPU Sunday, October 7, 12
- 59. Tile Transformation Panning = Translation Zooming = Scaling Sunday, October 7, 12
- 60.
- 61. Typical Animation opacity, movement, scaling, rotation, ... Sunday, October 7, 12
- 62. Principles of FluidAnimation 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. 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. 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. Elements = Layer Sunday,October 7, 12
- 66.
- 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. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
- 69. Magical Advice Use translate3d for hardware acceleration Sunday, October 7, 12
- 70. Debugging in Safari defaults write com.apple.Safari IncludeInternalDebugMenu 1 Sunday, October 7, 12
- 71. Compositing Indicators Texture (number = upload) Composited layer No associated texture Container layer Overflow Sunday, October 7, 12
- 72. Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS” Sunday, October 7, 12
- 73.
- 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. Color Transition: TheTrick Blended with http://jsfiddle.net/79AVn Sunday, October 7, 12
- 76. Prepare and Reuse Hide the layer offscreen Viewport Sunday, October 7, 12
- 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. Avoid Overcapacity .... .... Think of the GPU memory like a cache. Sunday, October 7, 12
- 79.
- 80.
- 81. There is NoSilver Bullet Sunday, October 7, 12
- 82. Thank You ariya.hidayat@gmail.com ariya.ofilabs.com @AriyaHidayat Sunday, October 7, 12