Your animation rate should match the refresh rate of your device:

Phones
55-60Hz

Laptops mostly 58-60Hz
but 50Hz in low-power mode

Random monitors
50-62Hz

<script type='text/javascript'>
  function animate(time) { }
  requestAnimationFrame(animate);
</script>

• Garbage collection
• Heavy DOM manipulation
• JS timers
• XHR handlers

Use DevTools' Timeline to identify jank!

Most of what happens in a tab happens on one thread.

But we can run some things even when JS is busy. Like CSS animation!

This is on Chrome for Android first, everywhere else soon.

Use CSS animation to let the browser do the right thing:

• CSS transitions
• CSS keyframe animations

Like with requestAnimationFrame, the benefits are:

• Better-timed, smoother-looking animations
• Better battery life
• More graceful degredation

Great for:

• UI substitution effects
• Continuous animations

Example

• What element is slow?
  • Set parts of the DOM to display:none
  • Take a Timeline recording, note paint times
• What style is slow?
  • Pick an element, starting with big ones
  • Disable CSS styles, note paint times

Fixed up example

Sometimes you want to go further or you get stuck.

Turn to about:tracing.

Documentation is on dev.chromium.org

Browsers evolve fast.

The architectural best practices are here to stay.

• requestAnimationFrame
• CSS animation

But the specifics of what's slow will change.

Train your eyes and use the tools to hunt down jank when it appears.

• The Dev Tools Timeline
• Bisecting slow CSS styles & elements

• These slides & other resources at jankfree.com
• Chrome Office Hours right after this talk in the Chrome area