High Performance CSS

Improving the speed with Tools

Paul Irish - Chrome Developer Advocate

WARNING

Performance advice is addictive

  • take a holistic view of your app's perf
  • measure
  • identify the largest bottlenecks
  • understand the crux of your problem
  • fix what matters most
  • measure

Reflows

CSS costs

  • CSS Parsing: meh
  • Selector matching: meh
  • Style recalc: yeah..
  • Reflow/Layout: eesh!
  • Paint, compositing: eesh!

Jank Spotting

What's wrong with this picture?

Bad Example

Keeping within your frame budget

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

Galaxy Nexus

Phones
55-60Hz

Chromebook

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

Monitor

Random monitors
50-62Hz

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

Do not use setTimeout

It will never be smooth

requestAnimationFrame()

  • API for "hey I got screen updates, guys!"
  • great for jQuery-style inline style animation
  • great for canvas, WebGL
  • great for parallax scrolling experience
  • great for device batteries

Staying on Time, Every Time

Use requestAnimationFrame

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

Scrolling Jank

Other Things to Watch For

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

Chrome DevTools

Chrome DevTools

  • Constantly evolving
  • Use Canary channel for development
  • Lots of juicy experimental features

Performance: Timeline + Frames view

  • Timeline gives you an overview of memory usage over time
  • Summary and detailed views
  • Helps remove jank. Layout or scripts - who triggered what?
  • Frames view helps achieve that snappy 60fps you ideally want

Timeline Demo!

  • NYT Skimmer
  • Events mode shows interaction between layers. bigger picture than a CPU profile.
  • Frames mode for play by play
  • Record and select your target spot

Timeline Demo!

  • View image decoding/resize cost
  • View why a layout/reflow occured
  • Prettify minified script and line numbers still map
  • View HTML parsing cost

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

Costly CSS properties (for now)

(These may change!)

Demo in Chromium!

Diagnosing Long Paints

  • What element is slow?
    • Set parts of the DOM to display:none to remove from Layout/Reflow
    • Set parts of the DOM to visibility:hidden to remove from Paint
  • How to measure it?
    • Take a Timeline recording, note paint times
    • View paint rate in experimental force repaint mode
  • What style is slow?
    • Pick an element, starting with big ones
    • Disable CSS styles, note paint times
  • How to measure it?
    • same

What can you do?

  • Remove styles.
  • Simplify styles
  • Negotiate with your designer
  • Use images instead of CSS. (data URI that action!)

We got 60fps! but.. how about mobile?

  • LETS DO IT LIVE!! ON MOBILE!!!
  • also.. just expect slower.

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

Thanks!

Questions?

Paul Irish - Chrome Developer Advocate, Google