CSS Reflow vs Composite Performance Demo

How it works:

• Group A (Reflow): Changes the left property, which triggers layout recalculation
• Group B (Composite): Uses transform: translateX(), which runs on the compositor thread
• Performance difference: You'll notice Group B performs much better, especially with 100+ balls
• See list of which CSS properties trigger here: css-triggers.com

Visualizing Repaints:

• Open browser DevTools (F12)
• Go to Rendering tab (if not visible, click the three dots menu → More tools → Rendering)
• Check "Paint flashing"
• You should see Group A flashing (repainting) but not Group B
• This shows that transforms don't trigger repaints

Testing Performance:

• Open browser DevTools (F12)
• Go to Performance monitor panel (three dots menu → More tools → Performance monitor)
• Select 1,000 balls and observe the real-time metrics
• Watch CPU usage, Layouts/sec, and Style recalcs/sec
• Toggle between Group A and B to see the difference
• Group A will show high Layout and Style recalc activity
• Group B will show minimal Layout activity

Code Examples:

Reflow Animation (Group A):

@keyframes moveLeftRight {
      0% {
        left: 0;
      }
      100% {
        left: calc(var(--container-width) - var(--circle-size));
      }
    }

Composite Animation (Group B):

@keyframes transformMove {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(calc(var(--container-width) - var(--circle-size)));
      }
    }