Jank Busting

I just spotted this rather awesome post from @aerotwist https://aerotwist.com/blog/my-performance-audit-workflow/.

I'd previously sent Paul an email, so thanks Paul if you saw it and the post was partly in reply to my email.

It's nice to see I follow a fairly similar approach.

Further into the post Paul mentions 'Runtime Performance' and highlights 'in a nutshell what he's on the hunt for':

  • Large invalidations of element styles (recalculate styles) and geometry (layout).
  • Repeated layout and style changes inside a single frame aka Layout Thrashing.
  • Animation of layout properties.
  • Large paint areas aka Paint Storms.
  • Expensive painting.
  • Badly written touch and scroll handlers.
  • Memory churn.

As well as a link that had previously passed me by:


Chrome Dev Tools Timelime

I'm particularly impressed with Chome's timeline https://developers.google.com/chrome-developer-tools/docs/timeline and find it highly rewarding, especially on mobile / tablet devices pushing for that gloriously smooth 60fps.

What I'm finding frustrating at the minute is I can see spikes and where there's room for improvement but I struggle to narrow down and find out what's causing the issue and how to rectify it.

There's some great resources on the web, here's a few:

What I'd love to see are more posts / screencasts showing specific examples and how to improve them. I particularly like screencasts as I often learn handy shortcuts / workflow tricks along the way as an added bonus.

If you haven't seen it already, here's a video of Paul Irish and Paul Lewis doing exactly this. It's awesome. Enjoy.

Browse by category: