Know your application rendering inside out

Good performance is not just loading fast — it is also running well. Before you apply a checklist of 60fps tips, you need to know what your app is doing today: where frames go long, whether layout is thrashing, and which layers are paying for every paint.

In this JSFoo 2016 talk I covered the critical rendering path and the rendering lifecycle (JavaScript → Style → Layout → Paint → Composite), the ~16ms frame budget on a 60Hz display, and how to debug jank in Chrome DevTools. We looked at requestAnimationFrame, requestIdleCallback, Web Workers, compositor-only properties like transform and opacity, layers, and GPU rasterization.

The short version: measure first, then optimize.

Know Your Application Rendering Inside Out on Speaker Deck

Watch the JSFoo recording:

The original proposal has more detail on the outline.