Performant UIs using CSS magic

Performance beyond HTTP

Animation to improve performance

How can I do this?

Case study — ScrollListView.js

Read more

But there's a problem

Why?

Performance

Know your paints vs reflows

What causes a reflow or paint?

// Paint no geometric changes
body.style.visibility = 'hidden';

// Paint & reflow
body.style.fontSize = '20px';

// Reflow, browser is forced to
// return element geometry
body.offsetLeft;

Batching

Control & Minimise

How do I measure UI performance?

Chrome timeline

Safari to the rescue

Flooding the GPU

It's not easy

Native performance on the web?

Performance is fragile

Web platform needs low level controls

Thanks!