An Event Apart: Rendering Without the Lumpy Bits

by Luke Wroblewski June 24, 2013

In his Rendering Without the Lumpy Bits presentation at An Event Apart Boston MA 2013, Jake Archibald walked through tips and techniques for smooth animation and layout rendering on browsers. Here's my notes from his talk:

  • Until recently we've taken an odd stance on graphics performance: just make it usable. We can do a lot better than that.
  • Response rates matter. Facebook tested lowering the refresh rate of their home feed and saw a big drop in engagement. Rendering performance impacts user experience.
  • We used to have few tools for smooth rendering in browsers but today all the major browsers are competing on creating smooth, fluid, graphic rendering.

Graphics Performance

  • There's a number of things that enable browsers to render Web pages. You can see the flow of processes by watching dev tools.
  • Pausing is when a Web page loads text and turns starts to turn them into HTML elements.
  • Recalculate style is triggered when styles are computed or changed.
  • Reflow and layout is the process that determines how to render the HTML elements in appropriate styles and sizes. This is determined by a parallel render tree.
  • Paint is the process that actually renders the pixels.
  • Layout trashing is one of the main issues with animation on the Web. If you need to get information from the page about styles, do that before you make changes. In other words, do your reads before your writes. This will drastically improve performance.
  • Not all CSS styles are created equally. Big drop shadows and blurs (experimental filter) can really slow down rendering.
  • Fixed background images for pages cause a lot of re-paints in some browsers. But rather than avoiding fixed background images, use dev tools to test things.
  • Use tools over rules. All the different browsers have their quirks. Use their dev tools to see what's happening and file bugs.
  • Browser paint tools can help you determine what is taking rendering a lot time.

Mobile Tips

  • When it comes to performance, mobile is almost the same as the desktop excepts for a few things.
  • On mobile browsers, the double tap to zoom interaction has spoiled things for people. Each tap waits 300ms to determine if it is a double tap.
  • You can remove this delay, but then taps are triggered on scroll.
  • FT fastclick is a simple Javascript library that you should use on every mobile project to help taps feel much more responsive.
  • 100ms feels instant, everything after that, not so much... for interactions.

WTFRPS?

  • To see what is impacting rendering look at frame rates per second.
  • For animation, 100ms is not fast enough. 16.67ms is the goal to look right on modern screens (60hz rendering).
  • SetTimeOut could be used to align with these refreshes, but it is not timed very well.
  • requestAnimationFrame is how you should trigger changes in your animation. jQuery uses setTimeOut in order to be backwards compatible but the animation results are not as smooth.
  • Don't queue up your next animation until the previous one completes.

Use the GPU

  • Make the hardware do the hard work through the GPU.
  • In the browser, we are moving more and more work to the GPU.
  • Composite is the operation that brings GPU rendered elements together with the rest of the page.
  • Put transform:translate-z(0) into your CSS to create GPU layers.
  • Animate with transforms: it makes for mush smoother animations. Unfortunately, Firefox will still move from frame to frame unless you add a very tiny rotate.
  • Forcing something to use translate-z can make animation better at first
  • The desktop can handle many layers, but mobile devices can't.
  • 3D transforms will create layers. Animating, transitioning, opacity, and filter use layers. As do canvas, videos, flash, silverlight. Fixed positioning elements and fixed backgrounds will use GPU layers soon as well.
  • When you move from the hardware to software, the compositing step can slow things down again.
  • Anything on top of a GPU layer needs to be a GPU layer.

Rendering Tips

  • Think about frame rates per second.
  • Don't overdue the layout. Do reads before writes.
  • Be mindful of painting costs & when they happen. Use the dev tools.
  • Don't make users suffer the 300ms tap delay.
  • Use requestAnimationFrame/CSS for smooth animations.
  • Learn the GPU and see how it works. This will prepare you for the future of web performance and apps.