• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Understanding Webkit Rendering
 

Understanding Webkit Rendering

on

  • 13,942 views

 

Statistics

Views

Total Views
13,942
Views on SlideShare
13,850
Embed Views
92

Actions

Likes
32
Downloads
391
Comments
0

6 Embeds 92

https://twitter.com 43
http://roninteste.blogspot.com.br 40
http://www.verious.com 5
https://si0.twimg.com 2
http://connor.pinterest.com 1
http://pinterest.com 1

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

    Understanding Webkit Rendering Understanding Webkit Rendering Presentation Transcript

    • 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 Data Persistence Browser Engine Render Engine Networking JavaScript Graphics I/O Engine StackSunday, October 7, 12
    • WebKit Components Render Engine CSS DOM SVG HTML Canvas WebCore Client Interface JavaScript Engine (JSC/V8)Sunday, October 7, 12
    • 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
    • LayoutSunday, October 7, 12
    • 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
    • DOM Tree <html><body><p>Hello</p></body></html> HTMLDocument HTMLBodyElement HTMLParagraphElement attributes, children, contentsSunday, October 7, 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
    • DOM Tree vs Render Tree HTMLDocument RenderRoot HTMLBodyElement RenderBody HTMLParagraphElement RenderText There is no Render* for display:noneSunday, October 7, 12
    • “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
    • Sunday, October 7, 12
    • It’s a forest!Sunday, October 7, 12
    • 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
    • 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
    • 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
    • PaintingSunday, October 7, 12
    • 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
    • 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
    • Graphics Abstraction Chromium Android Qt Mac & iOS GraphicsContext Skia CoreGraphics QPainter graphics stack Native controls, RenderTheme e.g. form elementsSunday, October 7, 12
    • 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
    • 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 slower Solid color fill (depending on the dimension) Linear gradient fill Radial gradient fillSunday, October 7, 12
    • Path Approximation Curves PolygonSunday, October 7, 12
    • Antialiasing Multiple levels of transparencySunday, October 7, 12
    • Transformation Scaling Perspective RotationSunday, October 7, 12
    • Text RasterizationSunday, October 7, 12
    • Font Atlas Buffer ByeSunday, October 7, 12
    • Simple to Complex ell o! H Simple shape Solid color Curves Gradient brush Textured stroke Blur shadow Serif text RotatedSunday, October 7, 12
    • 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
    • Hardware AccelerationSunday, October 7, 12
    • Game vs WebSunday, October 7, 12
    • Game Text Textured objects Animation Transformation PhysicsSunday, October 7, 12
    • Large Area, but Still BoundedSunday, October 7, 12
    • Web Page Images TextSunday, October 7, 12
    • Challenges Predictable contents (assets) ✔ Mostly text ✔ Mostly images ✔ Initial response immediateSunday, October 7, 12
    • 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 Textured triangles ParallelismSunday, October 7, 12
    • Powerful Capabilities http://epicgames.com/technology/ http://www.rage.com/ epic-citadelSunday, October 7, 12
    • 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 operations better • Bandwidth: Data transfer can be the bottleneckSunday, October 7, 12
    • Traffic CongestionSunday, October 7, 12
    • Efficient Use of GPU Drawing Backing Layer & primitives stores compositingSunday, October 7, 12
    • Maps TileSunday, October 7, 12
    • Pinch to Zoom when you pinch...Sunday, October 7, 12
    • Responsive Interface decoupled Rendering Processor User interactionSunday, October 7, 12
    • Rendering vs Interaction Screen Backing Store Rendering Web Page User interactionSunday, October 7, 12
    • Checkerboard PatternSunday, October 7, 12
    • Progressive Rendering Fast but blurry Crisp but slowSunday, October 7, 12
    • Perceived Responsiveness User pinches Smooth scaled Blocky (but fast!)Sunday, October 7, 12
    • Tiling System Texture upload .... .... CPU GPUSunday, October 7, 12
    • 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 resources as possible to the GPU 2 During the animation, minimize CPU-GPU interactionSunday, October 7, 12
    • 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
    • Mechanics of Animation “Hey, this is good stuff. Cache it as texture Initialization “Apply [operation] to texture #42.” Animation stepSunday, October 7, 12
    • Elements = LayerSunday, October 7, 12
    • Logical 3-DSunday, October 7, 12
    • 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
    • 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) Composited layer No associated texture Container layer OverflowSunday, October 7, 12
    • Avoid Texture Reupload No reupload Upload Opacity Position Everything else! Size Animation “Hardware accelerated CSS”Sunday, October 7, 12
    • ExamplesSunday, October 7, 12
    • 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
    • Color Transition: The Trick Blended with http://jsfiddle.net/79AVnSunday, October 7, 12
    • Prepare and Reuse Hide the layer offscreen ViewportSunday, October 7, 12
    • 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
    • Avoid Overcapacity .... .... Think of the GPU memory like a cache.Sunday, October 7, 12
    • 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 @AriyaHidayatSunday, October 7, 12