CSS Animation with GPU

CSS Animation with GPU

Presented at SF Web Performance Meetup, Nov 17, 2016.

https://www.meetup.com/SF-Web-Performance-Group/events/235424858/

A common advice to have a smooth CSS animation is to follow the best practice of using a restrictive set of CSS properties. In this talk, we will dive a bit deeper to understand how our favorite browser's rendering engine utilizes the graphics processing unit (GPU) to perform CSS animation, what we shall do to have the GPU compositing as efficient as possible, and some tools to help debugging and understanding any potential issues. Finally, we will apply what we learn to build a buttery smooth 3-D Cover Flow clone with the power of CSS and JavaScript.

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

November 17, 2016
Tweet

Transcript

  1. 5.
  2. 7.

    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
  3. 8.

    HTMLDocument HTMLBodyElement HTMLParagraphElement RenderRoot RenderBody RenderText • metrics (box model)

    • hit testing <html><body><p>Hello, SF Web Perf!</p></body></html> DOM Tree vs Render Tree
  4. 12.

    When I don’t know what happened, it just bothers me,

    gets under my skin, and I need to write about it. Taylor Swift
  5. 18.
  6. 24.
  7. 27.
  8. 37.
  9. 41.

    Steady touchstart Pressed Manual Scrolling Automatic Scrolling touchend touchmove touchend

    and zero speed timer tick decelerate to zero speed touchstart timer tick touchend and positive speed
  10. 50.