Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fluid User Interface with Hardware Acceleration

Fluid User Interface with Hardware Acceleration

Talk at W3Conf 2013, San Francisco.

Ariya Hidayat

February 22, 2013

More Decks by Ariya Hidayat

Other Decks in Programming


  1. 2

  2. Browser: High Level User Interface Browser Engine Graphics Stack Data

    Persistence Render Engine JavaScript Engine Networking I/O 7
  3. From Contents to Pixels HTML Parser DOM CSS Parser HTML

    Style Sheets DOM Tree Style Rules Render Tree Render Layout Paint http://www.html5rocks.com/en/tutorials/internals/howbrowserswork 8
  4. DOM Tree vs Render Tree HTMLDocument HTMLBodyElement HTMLParagraphElement RenderRoot RenderBody

    RenderText tree structure/navigation metrics (box model) hit testing RenderStyle computed style many:1 10
  5. Style Recalc vs 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” 11
  6. Minimizing Layout 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 clientHeight clientLeft clientTop clientWidth offsetHeight offsetLeft

    offsetParent offsetTop offsetWidth scrollLeft scrollTop scrollWidth innerText outerText Element focus() getBoundingClientRect() getClientRects() scrollByLines() scrollByPages() scrollHeight scrollIntoView() scrollIntoViewIfNeeded() 12
  7. CSS Painting: 10 Stages http://www.w3.org/TR/CSS2/zindex.html Appendix E. Elaborate description of

    Stacking Contexts • Background • Floats • Foreground • Selection • Outline Done by the render objects (in the render tree) 13
  8. Game vs Web Page Predictable contents (assets) ✔ Mostly text

    ✔ Mostly images ✔ immediate Initial response 25
  9. GPU 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 • Power: Electrons always need energy 26
  10. Fluid Animation At the beginning, push as many resources as

    possible to the GPU During the animation, minimize the interaction between CPU-GPU 1 2 27
  11. Immediate vs Retained draw the shape at (x, y) x

    = x + 10 blit the buffer at (x, y) x = x + 10 For every animation tick... At the beginning... draw the shape onto a buffer Off main thread 28
  12. Animation Mechanics Initialization Animation step “Hey, this is good stuff.

    Cache it as texture #42.” “Apply [operation] to texture #42.” Animation loop 29
  13. By Force transform: translateZ(0) Not needed for CSS animation! .someid

    { animation-name: somekeyframeanimation; animation-duration: 7s; transform: translateZ(0); } Don’t do that 32
  14. Color Transition @keyframes box { 0% { transform: background-color: blue;

    } 100% { transform: background-color: green; } } Need a new texture uploaded to the GPU for every in-between color 49
  15. Timer Latency Depending on user reaction Animation end triggers the

    JavaScript callback JavaScript code kicks the next animation Prepare both animation and hide the “wrong” one 51
  16. More Stuff Jank Busters: http://www.youtube.com/watch?v=hAzhayTnhEI Continuous painting: http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with- DevTools-Continuous-Painting-Mode Chrome

    GPU rendering benchmark (Telemetry): http://www.chromium.org/developers/design-documents/rendering-benchmarks Skia debugger: http://wesleyhales.com/blog/2013/02/18/Adventures-With-the-Skia-Debugger/ 52
  17. There is No Silver Bullet Traditional graphics programming has been

    always full of tricks. It will always be. 56