Jank Spotting

What's wrong with this picture?

Bad Example Good Example

Care and Feeding of Monitor

Keeping within your frame budget

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

Galaxy Nexus



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


Random monitors

source: http://commons.wikimedia.org/wiki/File:Flat_monitor.svg

Do not use setTimeout

It will never be smooth

Staying on Time, Every Time

Use requestAnimationFrame

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

Smoothness is About Budget

Scrolling Jank

Other Things to Watch For

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

Use DevTools' Timeline to identify jank!

CSS Animation

Smooth Animation

Better than lightweight-JS animation? Zero-JS animation.

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.

Smooth Animation

Example Time!

Smooth Animation

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

Paint Times

The Browser Doth Churn

Back to that Jank Spotting

Diagnosing Long Paints

Basic Rendering Questions

  • 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


Optimizing to the Metal

Wrap Up

These are Techniques, Not Recipes

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

Hungry for More?

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